jQuery 中的DOM操作(二)

jQuery对Dom有很大支持，能进行很多操作，如：

1、查找节点

这方面在前面的选择器中已经体会到了，通过各种选择器我们可以获得想要的节点

查找元素节点：通过选择器可直接获得

例如：

var $li = $("ul li:eq(1)");//获取ul里的第二个li元素

查找属性节点：在利用jQuery选择器获得元素节点后，就可以使用attr()来获得属性节点

attr()的书写方式可以传入一个参数，也可以传入两个参数，当传入一个参数时是根据属性名查找想要属性的值，当传入两个参数时是设置相应属性的值

例如：

var $para = $("p")；

var p_title = $para.attr("title");

$para.attr("title","pTitle")；

2、创建节点

jQuery创建节点是通过$(html)来构建 jQuery对象，其中html是所有创建节点的html格式内容

创建节点可以分为创建元素节点、创建文本节点、创建属性节点，他们的创建格式都是一样的，都是通过使用$(html)来构建。

例如：

var $li_1 = $("<li></li>");

var $li_2 = $("<li>香蕉</li>");

var $li_3 = $("<li title = '香蕉'>香蕉</li>");

3、插入节点

jQuery要实现动态的控制Dom结构的话，一定可以动态的操作dom结构，其中动态的操作包括插入、删除、复制、包裹等等

动态的插入要素：

1> 插入节点<可以新建、复制、查询等来>

2> 插入位置<通过选择器匹配>

3> 插入方式<append、appendTo、prepend、prependTo、after、insertAfter、before、insertBefore>

append:在匹配元素内部追加<追加意思就是说放在最后面>内容，appendTo：颠倒append

prepend：向每个匹配的元素内部前置<前置的意思就是说添加在头部>内容，prependTo：颠倒prepend

after：在每个匹配的元素后面插入内容<插入同级别元素>,insertAfter：颠倒after

before:在每个匹配的元素前面插入内容<插入的也是同级别元素>,insertBefore:颠倒before

PS：插入节点也可用作移动节点，插入节点实质上是现在文档中删除节点，然后在将节点元素插入到文档中的指定位置

4、删除节点

删除节点可以使用remove、empty实现

remove是将匹配的元素彻底删除，包括匹配元素的后代元素也一并被删除，使用remove可以传参，实现选择性的删除工作，remove的返回值是一个指向被删除节点的引用，因此可以在后面在使用这些被删除的元素

例如：

var $li = $("ul li:eq(1)").remove()

$("ul").append($li);

$("ul li").remove(li[title！=菠萝]);

empty并不是删除节点，而是清空所有的后代元素

$("ul li:eq(1)").empty();

清空第二个li元素里面内容，li元素依然存在

5、复制节点

复制实现了节点重用，而不用另外新建，复制的时候可以一并复制节点上面的行为(也就是绑在它上面的事件),也可以只复制节点，分别使用clone(true)和clone()

例如：

$("ul li").click(function(){

$(this).clone().appendTo("ul")//复制当前的li单击节点，并将其最加到ul元素下

})

6、替换节点

替换是将已经存在的节点替换成其他的，使用的方法有replaceWith()，replaceAll()

replaceWith():XX用XXX替换掉

replaceAll()：那XXX替换所有的XX

7、包裹节点

包裹节点的意思就是将某个或者是符合条件的一组节点用其他的标记包裹起来，在jquery中使用wrap()

例如：

$("strong").wrap("<b></b>");//使用b标签把strong元素包裹起来

包裹的方法还有wrapAll(),wrapInner()

wrapAll：将所有匹配的元素用一个元素来包裹<与wrap的不同是，wrap对每个符和条件的元素都进行包裹，而wrapAll不是>

wrapInner：将每个匹配的元素的子内容进行包裹

$("strong").wrapInner("<b></b>");//strong元素的子元素被b标签包