锋利的Jquery——学习笔记（四）DOM操作（一）

Jquery中的DOM操作（一）

• 查找节点
• 创建节点
• 插入节点
• 删除节点
• 复制节点
• 替换节点
• 包裹节点
• 属性操作
• 样式操作
• 设置和获取HTML、文本和值
• 遍历节点
• css-dom操作

一、查找节点

1、查找元素节点

var li_txt=$("ul li:eq(2)").text();  //获取元素节点的文本内容
alert(li_txt);

2、查找属性节点

var p_txt=$("p").attr("title");

attr()方法中的第一个参数为属性的名字，第二个参数为设置值

$(selector).attr(attribute,value);

二、创建节点

1、创建元素节点

有两个步骤：
（1）创建元素节点：$(html)方法会根据传入的html标记字符串，创建dom对象，然后包装成jQuery对象返回
（2）将节点加入文档中：append()方法

var $li_1=$("
");
var $li_2=$("
");
$("ul").append($li_1);
$("ul").append($li_2);

2、创建文本节点

var $li_3=$("<li><em>这是em><b>一个b><a href='#'>复杂的组合a>li>");
$("ul").append($li_3);

3、创建属性节点

var $li_4=$("
">西瓜
");
$("ul").append($li_4);

三、插入节点

插入节点的方法（将创建的元素插入到文档的不同位置）

（1）append(); //像每个符合的元素追加内容

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

（2）appendTo(); //将所有匹配元素追加到指定的元素中

$("
猕猴桃
").appendTo("ul");

（3）prepend(); //像每个匹配元素添加前置内容

html:<p>我想说：p>
js:$("p").prepend("<b>hahahahab>");
结果为: <p><b>hahahahab>我想说：p>

（4）prependTo(); //将所有匹配元素前置添加到指定的元素中

js:$("hahahaha").prependTo("p");

（5）after(); //插入到当前元素的后面，区分append()【插入到当前元素内部的最后面】
（6）insertAfter(); // 和（5）插入的位置进行颠倒
（7）before(); //插入到当前元素的前面，区分prepend()【插入到当前元素内部的最前边】
（8）insertBefore(); // 和（7）插入的位置进行颠倒

四、删除节点

1、remove()

根据传入的参数，删除所有匹配元素以及其后代节点，但是这个方法会返回一个删除节点的引用，可以在后续程序中继续应用。

$li_1=$("ul li:eq(2)").remove();
$li_1.appendTo("ul");

$("ul li").remove("li[title!='苹果']");//可以在方法中添加条件

2、empty()

不是删除节点，而是清空节点中的内容。

五、复制节点

应用场景：在网上购物时，选中某个物品后，鼠标选中可以拖入购物车中

$(this).clone(true).appendTo("ul[name='purchasecar']");//表示复制元素的同时，也复制该元素所绑定的事件

六、替换节点

1、replaceWith()

$("p").replaceWith("<b>我是大好人b>");//效果是将原来的<p>我是大好人p>换为现在的<b>我是大好人b>

2、replaceAll()

用法与replaceWith使用恰好相反。
注：当节点被替换以后，原来节点绑定的事件将会消失，需要重新绑定。

七、包裹节点

1、wrapAll()

包裹节点，用wrapAll()方法是将所有匹配元素进行统一的包裹，但是wrap()是将每一个符合的元素节点进行单独的包裹。

2、wrapInner()

将每一个匹配元素的子内容(包括文本)，用其他结构化标记包裹起来。