一、前言
在上篇文章中我们学到就jQuery操作 一些样式的方法。我们继续学习jQuery获取Dom的相关操作方法。
二、创建节点及节点属性
虽然，我们可以用原生Javascript获取Dom节点，但在开发中，就显得不那么灵活。原生Javascript方法中 :
- 创建节点(常见的元素、属性、文本)：
document.createElement - 添加节点的一些属性
setAttribute - 添加文本 :
innerHtml - 加入文档 :
appendChild。
创建一个很简单的元素，就需要几个步骤，每一个元素节点都必须单独创建，当添加到指定的元素位置也很不灵活。
三、jQuery创建节点
jQuery创建元素节点很简单，即通过$()函数处理 ：$("<div>xxx</div>")
也可以创建属性节点 :$("<div class = "Joshua" id = "Iove">xxx</div>")
我们在函数$()中可以书写HTML结构，十分简单和灵活。
四、DOM元素的插入
1.内部插入
-
append
append方法其实内部执行的就是原生的appendChild方法，为每个元素内部追加内容。 -
appendTo
appendTo方法和append方法相反。内容和目标位置相互颠倒了位置。
$("#div).append("<span>Joshua</span>") // 前面是要插入的对象，后面是要再对象内插入的元素内容
$("<div>Joshua</div>").appendTo($("#div")) //前面是要插在对象内的元素内容,后面是要插入的对象
-
prepend
prepend方法 其实就是在匹配元素内部的前面插入相应元素，让其作为它的第一个子元素。
$(".div").prepend("<p>xxxx</p>")；
-
prependTo
方法类似于appendTo。只是位置颠倒。
2.外部插入
-
after
after()方法就是在匹配元素集合中的每个元素后面插入参数指定的内容，作为其兄弟节点。如果该元素后面有元素了，那将后面的元素后移，然后再将其插入。
$(".div").after("<p>xx</p>");
-
before
before()在匹配元素的前面插入元素。作为兄弟节点。如果该元素前面有元素了，那将前面的元素前移，然后再将其插入。
$(".test1").before("<p style="color:red">xxx</p>")
这俩个方法参数可以是:Dom 元素 、html字符串 、元素数组、jQuery对象，也支持多个参数传递:after(div,div2)。
-
insertAfter
insertAfer在目标元素前插入匹配的元素 。
$(<p style="color:red">xxx</p>).insertAfter.($(".div"));
-
insertBefore
insertBefore 在目标元素前面插入匹配的元素
$(<p style="color:red">xxx</p>). insertBefore.($(".div"));
五、DOM元素的删除
1.empty()
empty()即清空的意思，但是它与删除不一样，它只是清空元素的所有子(后代)节点，元素里的任何文本字符串都被看做是其子节点。
<div class = "Joshua">
<span>I love you</span>
</div>
$(".Joshua").empty();
它只是移除了内部所有子元素，但自己仍然存在。
2.remove()
remove()和empty()一样，都有移除的意思，但是remove不但会删除子元素，连自己也删除(- -)，甚至包括一些绑定的事件及相关一切东西。如果某些元素绑定了某些事件，在不用的时候一定消除。所以，看的出来，remove内部做了相应的处理。
$('.hello').remove()
<div class="hello"><p>xxx</p></div>
节点不存在了,同事事件也会被销毁
remove也可以传递一些表达器的表达式来过滤一些匹配元素。
//删除class = div 元素再 包含字符串 为 3 的元素
$(".div").remove('':contain('Joshua')'')
-
区别：
empty()：不能删除自己本身的的节点；它只是清空自己的所有后代节点，不是删除。
remove():删除包含自己在内的所有节点；提供参数（）
3.detach()
这个方法感觉和蔼多了，如果你想在删除这个元素之前，还想保留它绑定的一些事件和节点上的数据，那detach()方法可以满足。因此可以通过append()方法把删除的节点在回复到文档流中。
六 节点的复制和替换
1.clone()
顾名思义，clone方法就是用于克隆节点。需要注意的是，当某个节点绑定了一些事件时，clone(true)需要传递一个布尔值去告诉该方法，要复制事件和数据。
- PS: 元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制。意思是 数据data本来就是存数据的，一个克隆元素是不能将里面的数据克隆出来的，所以必须手动一个一个复制。
2.replaceWith()
即传入一个新的内容（参数可以是：Html字符串，DOM元素，jquery对象），去替换选中的内容。
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
$("p:eq(1)").replaceWith("<a >我是替换内容呀</a>")
3.replaceAll()
它正好和replaceWith()相反。用匹配到的元素去替换目标元素
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
("<a >我是替换内容呀</a>").replaceAll($("p:eq(1)"));
- 这俩个方法会删除元素上的所有数据和绑定事件。
- replaceWith()返回的是一个jQuery对象，这个对象引用的是替换前的节点，而不是替换后的节点。
七 遍历
1.children()
这个方法.children(selector)找到的仅仅是儿子辈的元素
<div class="Joshua">
<ul class = "son">
<li>我是第一段</li>
<p>child</p>
<ul>
</div>
$("div").children()//找到的仅仅是 ul
该方法也可以传一个选择器进行匹配。它查找的只是一级节点。
2.find()
这个方法返回的是后代元素，
<div class="Joshua">
<ul class = "son">
<li>我是第一段</li>
<p>child</p>
<ul>
</div>
$("div").children("p")//p是div的后代
- find()是遍历当前元素集合中的每个元素后代，儿子，孙子。
- find()是必须传递一个选择器表达式的，如果想查找所有 传递
* - find()方法只是遍历后代（子节点，子节点的所有后代节点），不包括自己
- 选择器context就是有find()方法实现的，即
$(".item-li").find("li")等价于$("li",".item-li")( $("子","父亲") )
3.parent()方法
该方法其实就是查找集合元素里面每一个元素的父亲。因为是父元素，所以只会向上查找一级。
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
$("li").parent();//查找li的父元素 ul
$("ul").parent();//查找ul的父元素 div
- 同样的该方法也接受一个选择器表达式
4.parents()方法
顾名思义 这个方法就是 开始于父辈元素 向上查找所有祖辈元素。不只是查找一级。
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
$("li").parents()//查找到div元素
- 同样的该方法也接受一个选择器表达式
5.closest()方法
这个方法就比较好了，即 开始于自己 向上级查找元素，返回最先匹配到的祖先元素.
<div class="div">
<ul class="son">
<li class="grandson">1</li>
<ul class="son2">
<li class="grandson2">1</li>
</ul>
</ul>
</div>
$("grandson2").closest(".son")//查找到class = son元素
- closest()向上查找，直到查找到相应的元素，就停止，而parents一直查找到根元素，并将匹配的元素加入集合。
- closest()返回零个或一个的元素，而parents返回的零个或者一个或者多个的元素。
6.next()方法
这个方法很简单就是返回每一个元素紧邻的后面同辈的元素
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
$(".item-1").next();//返回class = item-2 的li元素
7.prev()方法
这个方法和next方法相反 ：就是返回每一个元素紧邻的前面同辈的元素
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
$(".item-2").prev();//返回class = item-1 的li元素
8.siblings()方法
该方法就比较厉害了，查找指定元素集合中每一个元素的同辈元素。
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
$(".item-2").siblings();//返回class = item-1 class = item-3 的li元素
9.add()方法
我们知道jquery是一个合集对象，如果我们需要往这个合集对象再家一些对象的话，就用到了add()方法。.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。
<ul>
<li>list item 1</li>
<li>list item 3</li>
</ul>
<p>新的p元素</p>
$(".item 1").add("p");加到li的合集中
- 这个方法和我们之前学的append方法有很大不同。add()方法只是添加到jQuery合集中，不会影响界面，而append是在Dom集合中增加了一个节点，会影响界面
10.each()方法
each方法就类似一个for循环的迭代器。在回调的函数里面它会有俩个固定的实参。即index和ele 。这个回调方法中的this 指的是当前迭代到的元素。
<ul>
<li>我</li>
<li>是</li>
<li>一</li>
<li>个</li>
<li>兵</li>
<ul>
$("li").each(function(index, element) {
index 索引 0,1,2,3,4
element是对应的li节点 .
this 指向的是li
})
八 总结
本篇文章我总结了jquery操作dom的一些常用方法，希望大家可以熟练掌握。最近打算写一篇JavaScript中关于数组的一些用法，到时候会与大家分享出来。同时希望自己在HTML5的学习道路上越来越顺畅吧。题外话：最近关于xx黑程序员的一篇文章，在本站上的一些大牛们也离家出走了，关于这事 我就送大家几句话吧：
当智商高于情商，凡事将斤斤计较；
当感性高于理性，情绪将仿佛不定；
当欲望充斥内心，心态将难以归零；
当主观轻视客观，事实将难成依据；
当理念信念缺失，人生将随波逐流 ;
网友评论