jQuery DOM操作

一  事件冒泡和事件捕获

 事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。addEventListener的第三个参数，就是控制触发

顺序是否为事件捕获，true事件捕获，false事件冒泡，默认false，即事件冒泡。

<div id="parent">
        <div class="child" id="child"></div>
    </div>

document.getElementById('parent').addEventListener('click',function (e) {
            alert('parent事件被触发'+this.id)
        })

 可以通过第三个参数来尝试结果有何不同，结论如下：

 事件冒泡执行顺序：先child ,在执行parent；

 事件捕获的执行顺序：先parent，再执行child。

二  DOM节点的插入

 内部节点的插入：

 append()前面是被插入的对象，后面是要在对象内插入的元素内容，末尾追加内容；

prepend()向每个匹配的元素内部前置内容；

appendTo()前面是要插入的元素内容，而后面是被插入的对象；

prependTo()把所有匹配的元素前置到另一个指定的元素集合中。

外部节点的是插入：

after()向元素的后边添加html代码，如果元素后面有元素来，那将后面的元素后移，然后将html代码插入。

before()向元素的前面添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插入。

insertAfter()和insertBefore是内容在方法前面，它将被放在参数里元素的后面。

三  DOM节点的删除

 empty()通过empty移除指定元素中的所有子节点。

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

detach()从当前页面中移除该元素，但保留这个元素的内存模型对象。

<p>P元素1，默认给绑定一个点击事件</p>
    <p>P元素2，默认给绑定一个点击事件</p>
    <button id="bt1">点击删除 p 元素</button>
    <button id="bt2">点击移动 p 元素</button>

$("#bt1").click(function() {
        if (!$("p").length) return; //去重
        //通过detach方法删除元素
        //只是页面不可见，但是这个节点还是保存在内存中
        //数据与事件都不会丢失
        p = $("p").detach()
    });

    $("#bt2").click(function() {
        //把p元素在添加到页面中
        //事件还是存在
        $("body").append(p);
    });

四  DOM节点的复制与替换

 DOM复制

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

注：如果节点有事件或者数据之类的其他处理，需要通过clone(true)传递一个布尔值true来指定。

DOM替换

replaceWith()用提供的内容替换集合中所有匹配的元素且返回被删除元素的集合，目标元素+replaceWith(内容)。

replaceAll()用集合的匹配元素替换每个目标元素,替换内容+replaceAll(目标元素)。

DOM 包裹

wrap()在集合中匹配的每个元素周围包裹一个HTML结构，针对单个DOM元素处理；

wrapAll()在将集合中的元素用父元素包裹起来时使用，针对集合，允许用callback函数做参数；

wrapInner()给集合中匹配的元素内部增加包裹的HTML结构，允许用callback函数做参数。

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

五  DOM遍历

 children()无参数，返回匹配元素集合中每个元素的第一级子元素；

parent()无参数，只会向上查找一级；

parents()无参数，有序的向上匹配元素，并根据匹配的元素常见一个新的jQuery对象，开始查找的是父级元素；

find()必须存在参数，遍历当前元素集合中每个元素的后代，只要符合。

closest()从元素本身开始，像DOM树逐级向上匹配，并返回最先匹配的祖先元素。

next()无参数，指定元素集合中每一个元素紧邻的后面同辈元素的元素集合。

prev()指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，允许穿一个选择器表达式筛选。

siblings()无参数，指定元素集合中每一个元素的同辈元素。

add()的参数可以接收任何的$()，包括jQuery选择选择表达式，DOM元素或者HTML片段引用。

<ul>
    <li>list item 1</li>
    <li>list item 3</li>
</ul>
<p>新的p元素</p>

处理一：传递选择器

$('li').add('p')

处理二：传递dom元素

$('li').add(document.getElementsByTagName('p')[0])

还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了

 $('li').add('<p>新的p元素</p>').appendTo(目标位置)

each()等价于for循环，可以通过回调的方式处理，并且会有2个固定的实参，索引和元素。