一、前言

学习jQuery获取Dom的相关操作方法。

二、创建节点及节点属性

虽然，我们可以用原生Javascript获取Dom节点，但在开发中，就显得不那么灵活。原生Javascript方法中 :

1. 创建节点(常见的元素、属性、文本)：document.createElement
2. 添加节点的一些属性 setAttribute
3. 添加文本 : innerHtml
4. 加入文档 :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 }