JQuery中有很多DOM操作，但是因为之前没有总结过，所以用来用去都是那几个，一写html中的表单交互，尤其是那些复杂的表单交互，就是一大坨的js，我自己看着都费劲。
所以我感觉有必要总结一下
<div id="divlist" class="ddiv"> <a>我是第一层的a标签</a> <ul> <li class="li1" title="你妹啊"><a>乔安生 我是 ul > li 里面的a标签1</a></li> <li><a>我是 乔安生ul > li 里面的a标签2</a></li> <li><a>我是 ul > 乔安生li 里面的a标签3</a></li> <li><a>我是 ul > li 乔安生里面的a标签4</a></li> <li><a>我是 ul > li 里面的a标签5乔安生</a></li> <li title="你妹啊"></li> </ul> <a>我是第一层的a标签2</a> <a>我是第一层的a标签3</a> <ul> <li class="li1" title="你妹啊"><a>111</a></li> <li><a>222</a></li> <li><a>333</a></li> <li><a>444</a></li> <li><a>555</a></li> <li title="你妹啊"></li> </ul> </div>
查找节点
$(".ddiv ul li:eq(1)").text()//获取元素的文本内容
$(".ddiv ul li:eq(0)").attr('title');//获取元素的属性(属性有class、id、title、date-id等)
<div id="div2">
<p id="haha">哈哈哈哈哈</p>
<p id="hehe">嘿嘿嘿嘿嘿</p>
<p id="lala">啦啦啦啦啦</p>
</div>
插入节点
append() $("#haha").append("<p>我是append</p>"); 结果<p id="haha">哈哈哈哈哈<p>我是append</p></p> 结论append会把属性插入到指定元素结尾处(注意是结尾处不是后面)
appendTo() $("<p id='qwe'>appendTo</p>").appendTo("#haha"); 结果<p id="haha">哈哈哈哈哈<p id="qwe">appendTo</p></p> 结论appendTo和append相反是把前面的元素放到后面元素的结尾处
prepend() $("#haha").prepend("<p>我是prepend</p>"); 结果<p id="haha"><p>我是prepend</p>哈哈哈哈哈</p> 结论prepend会把数据元素放到目标元素文本开始处
prependTo() $("<p>prependTo</p>").prependTo("#haha"); 结果<p id="haha"><p>prependTo</p>哈哈哈哈哈</p> 结论prependTo他是和上面的相反他是把目标元素插入到
after() $("#haha").after("<p>我是after</p>") 结果<p id="haha">哈哈哈哈哈</p><p>我是after</p> 结论after可以把自定义元素插入到目标元素的后面
insertAfter() $("<p>我是insertAfter</p>").insertAfter("#haha") 结果<p id="haha">哈哈哈哈哈</p><p>我是insertAfter</p> 结论他也是把目标元素放到数据元素的后面
before() $("#haha").before("<p>我是before</p>") 结果<p>我是before</p><p id="haha">哈哈哈哈哈</p> 结论before是把自定义元素添加到目标元素的前面
insertBefore()
<div id="divlist" class="ddiv"> <a>我是第一层的a标签</a> <ul> <li class="li1" title="你妹啊"><a>乔安生 我是 ul > li 里面的a标签1</a></li> <li><a>我是 乔安生ul > li 里面的a标签2</a></li> <li><a>我是 ul > 乔安生li 里面的a标签3</a></li> <li><a>我是 ul > li 乔安生里面的a标签4</a></li> <li><a>我是 ul > li 里面的a标签5乔安生</a></li> <li title="你妹啊"></li> </ul> <a>我是第一层的a标签2</a> <a>我是第一层的a标签3</a> <ul> <li class="li1" title="你妹啊"><a>111</a></li> <li><a>222</a></li> <li><a>333</a></li> <li><a>444</a></li> <li><a>555</a></li> <li title="你妹啊"></li> </ul> </div>
删除节点
JQuery提供了三种删除节点的方法 remove(),detach(),empty()
$("#haha").remove() 直接干掉 目标元素
$("ul li").remove("li[title=你妹啊]") 干掉 title=你妹啊 的所有元素
$(".li1").empty() 清空目标元素里面的元素和文本
$(".li1").detach()和remove()一样移除掉元素，但是这个方法会保留删除元素已经绑定的事件
复制节点
clone()
$("ul li").click(function () {
$(this).clone().appendTo("ul");
//复制当前点击的节点，并追加到<ul>元素中
});//end ul li
替换节点
$("#haha").click(function () {
$("#haha").replaceWith("换了！！！");
});//end haha
包裹节点
$("p").wrap("<strong></strong>") 在p元素外面添加一个<strong></strong>标签
$("p").wrapAll("<strong></strong>")
wrap是为每一个p标签外面都添加一个<strong></strong>标签
wrapAll是把p标签包裹起来 如果上下两行都是p 那么<strong></strong>标签会把他们两个都包起来。
属性操作
在JQuery中可以使用attr()方法来获取和设置元素的属性，removeAttr()方法来删除元素属性
$(".li1").attr("title") 获取目标元素的title属性
$(".li1").attr("title","aa") 设置目标元素的title属性的值
$(".li1").attr({"title":"aa","name":"qioa"}) 同时设置目标元素的多个属性的值
$(".li1").removeAttr("title"); 删除目标元素的title元素
样式操作
设置样式
$("#haha").attr("class","aa"); 设置目标元素的引用的样式
追加样式
$("#haha").addClass("qiao") 为目标元素追加一个样式
移除样式
$("#haha").removeClass("qiao") 移除目标元素的样式