jQuery中的DOM操作

查找节点

1.查找元素节点——通过jQuery选择器

$("element");

$("#id");

$(".class");

$("*");

2.查找文本节点——通过元素节点的text ( )方法

$("#id").text();

3.查找属性节点——通过元素节点的attr ( )方法

$("#id").attr(name);

创建节点——通过工厂函数

1.创建元素节点

$("<p></p>");

$("<p/>");

2.创建文本节点

$("<p>文本节点的内容</p>");

3.创建属性节点

$("<p id="p1">text content</p>");

删除节点

1.$(selector) . remove ( [selector] )

删除文档中所有匹配的节点，包含子节点。

注意：此方法有返回值，返回值为删除的节点对象。所以可以通过返回值来再次使用这个对象。

            返回的对象只保留节点本身，其他绑定的事件，附加的数据都会被移除。

<div>

<div id="div1" style="background: #ccc">第一章</div>

<div id="div2" style="background: #ccc">第二章</div>

<div id="div3" style="background: #ccc">第三章</div>

<div id="div4" style="background: #ccc">第四章</div>

</div>

<input id="btn" type="button" value="测试" />

$(document).ready(function() {

$("#btn").click(function(){

//插入一个节点作为参考依据

var eleNode = $("<div>第五章</div>");

$("#div3").after(eleNode);

//方法1，单击按钮只能插入一个节点

var btnNode = $("#btn").remove();            //事件已被移除

$("#div4").after(btnNode);

//方法2，可一直单击按钮插入节点

// $("#div4").after($("#btn"));

})

});

2.$ ( selector ) . detach ( [selector] )

只有一点与remove( )方法的不同：返回的对象中，不会删除所有绑定的事件，附加的数据等。

$(document).ready(function() {

$("#btn").click(function(){

//插入一个节点作为参考依据

var eleNode = $("<div>第五章</div>");

$("#div3").after(eleNode);

//方法1，单击按钮只能插入一个节点

var btnNode = $("#btn").detach();          //事件没有移除

$("#div4").after(btnNode);

})

});

3.$ ( selector ) . empty ( )

删除匹配的节点集合中所有的子节点，匹配的节点集合本身不会被删除。

复制节点——HTML DOM：cloneNode( )

$ ( selector ).clone ( [true] )

ture是可选的，如果选择，则复制的节点包含原来节点所绑定的事件处理程序；否则不包含。

替换节点——HTML DOM：replaceChild( )

1.$( content ) . replaceAll ( selector )

用content（可以是元素节点，html字符串或jQuery对象）来替换所有selector匹配到的节点。

2.$ ( selector ) . replaceWith ( content )

将所有selector匹配到的节点，替换成content。效果与replaceAll（）一样，只是颠倒了操作顺序。

注意：替换节点前若已经为其绑定了事件，则替换后，事件与被替换节点一起消失。