jQuery遍历之add()方法

.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。

处理一：传递选择器
eg: $('li').add('p')

jQuery遍历之closest()方法

 closest()方法接受一个匹配元素的选择器字符串

从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回匹配的祖先元素

eg:$("div").closest("li").css("border","1px solid red")  ///查找div以上的所有li元素（包括div）让他们有红色边框

与parents的区别：

1. 起始位置不同：.closest开始于当前元素 .parents开始于父元素
2. 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
3. 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

jQuery遍历之parents()方法

 快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法

 parents会往上一直查到查找到祖先节点

parents包括父节点 和祖辈节点  祖先节点等

可以加一个选择器

parents()无参数

有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象;

jQuery遍历之parent()方法

 快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用parent()方法

因为是父元素，这个方法只会向上查找一级

jQuery遍历之find()方法

 快速查找DOM树中的这些元素的后代元素，此时可以用find()方法

children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）

1.与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数 如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。

2.find只在后代中遍历，不包括自己。

• 选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。

jQuery遍历之children()方法

 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

注意：jQuery是一个合集对象，所以通过children是匹配合集中每一给元素的第一级子元素

允许传一个选择器的表达式

DOM包裹wrapAll()方法

 wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素

.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构

eg: $('p').wrapAll('<div></div>');

//给所有的P元素增加了一个父div的结构

<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

eg: //wrapAll接受一个回调函数

        //每一次遍历this都指向了合集中每一个a元素

        $('a').wrapAll(function() {

            return '<div></div>'

        })

结果：等同于warp的处理了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

DOM包裹unwrap()方法

 作用与wrap方法是相反的

将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

方法和wrap一样

DOM包裹wrap()方法

 .wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构

eg:  $('p').wrap('<div></div>')

.wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

使用后的效果与直接传递参数是一样，只不过可以把代码写在函数体内部，写法不同而已

eg: $('p').wrap(function() {

    return '<div></div>';   //与第一种类似，只是写法不一样
})



使用wrap盒子会被撑大
因为wrap的标签还有自己的border和padding、margin这些

DOM替换replaceWith()和replaceAll()

 .replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

$("p:eq(1)").replaceWith('<a >替换第二段的内容</a>')

.replaceAll( target ) ：用集合的匹配元素替换每个目标元素

$('<a >替换第二段的内容</a>').replaceAll('p:eq(1)')

• .replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别
• .replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序

• .replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

DOM拷贝clone()

.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

clone():只克隆节点 结构

clone(true):克隆节点 结构和附带的事件与数据

clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容

eg: $(".left").append( $(this).clone().css('color','red').text('aaaaaaa') )

detach()和remove()区别

DOM节点删除之保留数据的删除操作  detach()

什么时候用：

 如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理

用法：

 所有绑定的事件、附加的数据等都会保留下来。$("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

注：它只能处理通过JQuery的方法绑定的事件或者数据

eg:

<p>P元素1，默认给绑定一个点击事件</p>

    <p>P元素2，默认给绑定一个点击事件</p>

    <button id="bt1">点击删除 p 元素</button>

    <button id="bt2">点击移动 p 元素</button>

    <script type="text/javascript">

    $('p').click(function(e) {

        alert(e.target.innerHTML)

     //  target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口

    })

    var p;

    $("#bt1").click(function() {

        if (!$("p").length) return; //去重   这一步是避免重复detach，重复操作下面一步恢复就不行了

        //通过detach方法删除元素

        //只是页面不可见，但是这个节点还是保存在内存中

        //数据与事件都不会丢失

        p = $("p").detach()

    });

    $("#bt2").click(function() {

        //把p元素在添加到页面中

        //事件还是存在

        $("body").append(p);//p是保留删除的数据，如果不删除，就不能追加

    });

    </script>

DOM节点删除之empty和remove区别

 empty方法

• 严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
• empty不能删除自己本身这个节点

remove方法

• 该节点与该节点所包含的所有后代节点将同时被删除
• 提供传递一个筛选的表达式，删除指定合集中的元素

DOM节点删除之remove()的有参用法和无参用法

 remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

通过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法

remove表达式参数：

可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点

eg: $("p").filter(":contains('3')").remove()

1.filter() 方法返回符合一定条件的元素。

2.该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回。

3.该方法通常用于缩小在被选元素组合中搜索元素的范围。

提示：filter() 方法是与 not() 方法相对的。

eg:$("p").remove(":contains('3')")

//删除p标签中文本有3的