JQuery中的DOM操作

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></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></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></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></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") 移除目标元素的样式