我突然想起了append(),但是我记不太清它是原生JS的还是jQuery封装的,貌似是JS的,咦?那它在jQuery里叫什么来着?哎呀!记不清了!确定append()是JS里的?不是jQuery里的?哎呀!这个问题好low啊,要是被那些大牛知道得笑死我了!赶紧偷偷整理一下!

获取节点内容/修改节点内容

原生JS方法

<div id="test">test</div>
<script>
alert(document.getElementById("test").innerHTML);
document.getElementById("test").innerHTML += "test";
</script>

jQuery方法

text()

<div id="test"><h1>test</h1></div>
<script>
//返回test
alert($("#test").text());
$("#test").text(" new test");
</script>

html()

<div id="test"><h1>test</h1></div>
<script>
//返回<h1>test</h1>
alert($("#test").html());
$("#test").html("<h1>new test</h1>");
</script>

属性操作

原生JS方法

<div id="test" style="width:100px; height:100px; background:red;"></div>
<script>
document.getElementById("test").style.background="yellow";
alert(document.getElementById("test").style.background);
document.getElementById("test").setAttribute("width","200px");
alert(document.getElementById("test").getAttribute("width"));
</script>

注意:在使用setAttribute()后,元素的宽度并未发生改变,究其原因,在debug界面可以看到

<div id="test" style="width: 100px; height: 100px; background: yellow;" width="200px"></div>

width被写在style外面,而真正生效的是style里的width

再看CSS管理器里

element.style {
width: 100px;
height: 100px;
background: yellow;
}

width仍然没有变化...如果不在行间写style写在<style>标签里呢?仍然没有用!因为setAttribute()并不会对element.style发生作用,而element.style的优先级是最高的。

所以在使用setAttribute()时要谨慎,没事就别瞎用了。

jQuery方法

<div id="testDiv" style="width:100px; height:100px; background:red;"></div>
<a href="www.cnblogs.com" id="testLink">cnblogs</a>
<script>
alert($("#testDiv").attr("background-color"));
alert($("#testLink").attr("href"));
$("#testDiv").attr("background-color","yellow");
$("#testLink").attr("href","www.baidu.com");
alert($("#testDiv").attr("background-color"));
alert($("#testLink").attr("href"));
</script>

你会发现a的href是有用的,div的background-color是undefined,换成width还是undefined。我也不知道为什么,总之谨慎使用吧。

<div id="test" style="width:100px; height:100px; background:red;"></div>
<script>
alert($("#test").css("background-color"));
$("#test").css({"background-color":"yellow"});
</script>

用css()方法比较稳定,它是CSS类的一个方法,和addClass()/removeClass()/toggleClass()一样。

节点操作

原生JS方法

<div id="testDiv"></div>
<script>
var testSpan = document.createElement("span");
var testText = document.createTextNode("Test");
testSpan.appendChild(testText);
document.getElementById("testDiv").appendChild(testSpan);
</script>

重复插入是没用的,九浅一深什么的都是没有用的,你只能换着姿势插

<div id="testDiv">
<p id="testP">Test</p>
</div>
<script>
var testSpan = document.createElement("span");
var testText = document.createTextNode("Test");
testSpan.appendChild(testText); var testDiv = document.getElementById("testDiv");
var testP = document.getElementById("testP"); testDiv.insertBefore(testSpan,testP);
</script>

或者替换

<div id="testDiv">
<p id="testP">Test</p>
</div>
<script>
var testSpan = document.createElement("span");
var testText = document.createTextNode("TestReplace");
testSpan.appendChild(testText); var testDiv = document.getElementById("testDiv");
var testP = document.getElementById("testP"); testDiv.replaceChild(testSpan,testP);
</script>

或者干脆删掉

<div id="testDiv">
<p id="testP">Test</p>
</div>
<script>
var testDiv = document.getElementById("testDiv");
var testP = document.getElementById("testP"); testDiv.removeChild(testP);
</script>

jQuery方法

<div id="testDiv">
<p id="testP">Test Paragraph</p>
</div>
<script>
$("#testDiv").append("Append Test");
$("#testDiv").append("<p>Element Append Test</p>");
$("#testDiv").prepend("<p>Prepend Test</p>"); $("#testP").before("Before Test");
$("#testP").after("after Test");
</script>

用jQuery则要简单很多,不需要创建节点插来插去,只需要干着插,深深猛插。而且姿势也更多,原生JS只能正常插和从前面插,而jQuery不仅能正常插从前面插,还能在最前面插,在最后面插以及从某个部位的后面插,花样繁多,高下立判。

但是jQuery没有replace方法,但是人家提出了empty()清空子元素

<div id="testDiv">
<p id="testP">Test Paragraph</p>
</div>
<script>
$("#testDiv").empty();
</script>

还有remove(),可以自杀

<div id="testDiv">
<p id="testP">Test Paragraph</p>
</div>
<script>
$("#testP").remove();
</script>

换着姿势杀

<div id="testDiv">
<p id="testP">Test Paragraph</p>
</div>
<script>
$("p").remove("#testP");
</script>

比原生JS不知道高到哪里去了

遍历操作

原生JS方法

<script>
document.getElementById("test").firstChild;
document.getElementById("test").lastChild;
document.getElementById("test").parentNode;
document.getElementById("test").childNodes[0];
</script>

基本就这样了

jQuery方法

<script>
//祖先
//返回向上一级的父元素
$("test").parent();
//返回向上所有的祖先元素直到根节点
$("test").parents();
//返回介于两者之间的所有祖先元素
$("test").parentsUntil(test2); //子孙
$("test").children();
$("test").children("p.testP");
$("test").find("span");
$("test").find("*"); //兄弟
//前后找,过滤找
$("test").siblings();
$("test").siblings("p");
//往后找
$("test").next();
$("test").nextAll();
//往前找
$("test").pre();
$("test").preAll(); //过滤
//找第一个
$("test").first();
//找最后一个
$("test").last();
//按索引找
$("test").eq(0);
//按条件找
$("test").filter(".testFilter");
//筛选出来找
$("test").not(".testFilter");
</script>

简直无情,已经把原生JS秒出十条街了。

写在结尾

库再好也只是库,是别人的东西,怎样做出自己的库,做出自己的库的方法才是最重要的。jQuery也只是对原生JS的封装,却能绽放出比原生JS更耀眼的魅力,它的源码才是真正的关键所在。学习思维和方法,永远比学习流于表面的代码重要。这篇笔记仅仅是为了我能够不搞混原生JS和jQuery而记录的,仅此而已。

PS:好吧,原生JS里根本就没有append()方法,我终于搞清楚了。

DOM操作二三事的更多相关文章

  1. jQuery的dom操作(二)转

    addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配的元素内部追加内容. appendTo() 向匹配的元素内部追加内容. attr ...

  2. Jquery:Jquery中的DOM操作<二>

    由于昨天晚上回来的晚,写的有点匆忙,所以昨天的学习笔记中出现了多处错误的地方,幸好有各位园友帮忙指出,在这里谢过各位了!今天继续学习关于Jquery中DOM的操作,其实是昨天随笔的延续,求围观!!! ...

  3. javascript的DOM操作(二)

    <html> <title>学习DOM</title> <a id="wen">文本</a> <input nam ...

  4. DOM操作二

    1.创建节点 createElement():   创建新的Element节点 var s = document.createElement('script'); createTextNode(): ...

  5. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  6. JavaScript的BOM、DOM操作、节点以及表格(二)

    BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型.     BOM提供了独立于内容 而与浏览器窗口进行交互的对象:     BOM由一系列相关的对象构成 ...

  7. 前端学习(二十三)DOM操作,事件(笔记)

    javascript 组成部分    1.ECMAScript        javascript的核心解释器 2.DOM        Document Object Modle         文 ...

  8. jQuery笔记(二)jQuery中DOM操作

    前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...

  9. javascript学习(二) DOM操作HTML

    一:DOM操作HTML JavaScript能够改变页面中所有的HTML元素 JavaScript能够改变页面中所有的HTML属性 JavaScript能够改变页面中所有的CSS样式 JavaScri ...

随机推荐

  1. 线段树-hdu2795 Billboard(贴海报)

    hdu2795 Billboard 题意:h*w的木板,放进一些1*L的物品,求每次放空间能容纳且最上边的位子 思路:每次找到最大值的位子,然后减去L 线段树功能:query:区间求最大值的位子(直接 ...

  2. 单机安装 consul ui 对外提供服务

    Consul 安装启动ui,外网无法访问,应为Consul 默认绑定127.0.0.1 ,所以外网无法访问. 通过设置 -client 参数来设置     consul agent -server - ...

  3. 1029C语言文法的理解

    <程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...

  4. UML之Enterprise Architect使用

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:UML之Enterprise Architect使用     本文地址:http://tech ...

  5. HDU 2156 分数矩阵

    http://acm.hdu.edu.cn/showproblem.php?pid=2156 Problem Description 我们定义如下矩阵:1/1 1/2 1/31/2 1/1 1/21/ ...

  6. (转)用MongoDB 实现优酷API 缓存

    由于众所周知的原因, 邪恶的企业优酷于九月的某一天开始禁止第三方播放器加载视频API, 我不得不设置一个反向代理来绕过Flash 的跨域限制. 自此服务器压力激增, 导致用户体验大为劣化. 为了减少服 ...

  7. 一张图看懂css的position里的relative和absolute的区别

    position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, b ...

  8. HDU4803_Poor Warehouse Keeper

    题目很有意思,我想说其实我在比赛的时候就看过了一下这个题目,今天才这么快搞出来吧. 其实总共按上键的次数不会超过10个,我们可以每次假设相隔按两次上键之间按了xi次下键,由于上键的次数是确定的,所以最 ...

  9. 最小生成树-Borůvka算法

    一般求最小生成树的时候,最流行的是Kruskal算法,一种基于拟阵证明的贪心,通过给边排序再扫描一次边集,利用并查集优化得到,复杂度为\(O(ElogE)\).另一种用得比较少的是Prim算法,利用优 ...

  10. NewCaffe

    NewCaffe