锋利的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()
将每一个匹配元素的子内容(包括文本)，用其他结构化标记包裹起来。