jQuery-dom操作-原创手记-慕课网

DOM节点的创建

jQuery节点创建与属性的处理

创建元素节点：

$("<div></div>")

创建为属性节点：

$("<div id='test' class='aaron'>TEXT</div>")

DOM节点的插入

DOM内部插入append()与appendTo()

append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。
appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

    <script type="text/javascript">

        $("#bt1").on('click', function() {            //.append(), 内容在方法的后面，
            //参数是将要插入的内容。
            $(".content").append('<div class="append">通过append方法添加的元素</div>')
        })    </script>

    <script type="text/javascript">

        $("#bt2").on('click', function() {            //.appendTo()刚好相反，内容在方法前面，
            //无论是一个选择器表达式 或创建作为标记上的标记
            //它都将被插入到目标容器的末尾。
            $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
        })    </script>

DOM外部插入after()与before()

.after(content)：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
.before(content)：与上同理，只是在匹配元素前面插入内容

    <script type="text/javascript">
    $("#bt1").on('click', function() {        //在匹配test1元素集合中的每个元素前面插入p元素
        $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
    })    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {        //在匹配test1元素集合中的每个元素后面插入p元素
        $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')

    })    </script>

DOM内部插入prepend()与prependTo()

prepend：向每个匹配的元素内部前置内容
prepend：把所有匹配的元素前置到另一个指定的元素集合中

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .aaron1{            border: 1px solid red;
        }        .aaron2{            border: 1px solid blue;
        }        .aaron2 p {            color: #FF2255;
        }    </style></head><body><h2>通过prepend与prependTo添加元素</h2><button id="bt1">点击通过jQuery的prepend添加元素</button><button id="bt2">点击通过jQuery的prependTo添加元素</button><div class="aaron1">
    <p>测试prepend</p></div><div class="aaron2">
    <p>测试prependTo</p></div><script type="text/javascript">
    $("#bt1").on('click', function() {        //找到class="aaron1"的div节点
        //然后通过prepend在内部的首位置添加一个新的p节点
        $('.aaron1')
            .prepend('<p>prepend增加的p元素</p>')
    })</script><script type="text/javascript">
    $("#bt2").on('click', function() {        //找到class="aaron2"的div节点
        //然后通过prependTo内部的首位置添加一个新的p节点
        $('<p>prependTo增加的p元素</p>')
            .prependTo($('.aaron2'))
    })</script></body></html>

效果图

Screenshot from 2018-04-04 16-44-17.png

总结下内部操作四个方法的区别：

append()向每个匹配的元素内部追加内容
prepend()向每个匹配的元素内部前置内容
appendTo()把所有匹配的元素追加到另一个指定元素的集合中
prependTo()把所有匹配的元素前置到另一个指定的元素集合中

DOM外部插入insertAfter()与insertBefore()

insertBefore：在目标元素前面插入集合中每个匹配的元素
insertAfter：在目标元素后面插入集合中每个匹配的元素

注意

insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；
insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；

DOM节点的删除

DOM节点删除之empty()的基本用法

empty()方法跟删除不一样，empty()只移除指定元素中所有的子节点，同样移除元素里的文本。但是本身元素不被删除

<div class="example"><p>测试empty()</p></div>

通过empty处理

$('.example').empty()

结果

<div class="example"></div>

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

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

 <script type="text/javascript">
    $("#button1").on('click', function() {        //删除整个 class=test1的div节点
        $(".test1").remove()
    })

    $("#button2").on('click', function() {        //找到所有p元素中，包含了3的元素
        //这个也是一个过滤器的处理
        $("p").remove(":contains('3')")
    }) </script>

DOM节点删除之empty和remove区别

empty方法

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

remove方法

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

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

删除页面上的节点，但是节点上的数据与事件不会丢失。

<div>
    <p>P元素1，默认给绑定一个点击事件</p>
    <p>P元素2，默认给绑定一个点击事件</p>
    <button id="bt1">点击删除 p 元素</button>
    <button id="bt2">点击移动 p 元素</button></div><script type="text/javascript">
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })    var p;
    $("#bt1").click(function() {        if (!$("p").length) return; //去重
        //通过detach方法删除元素
        //只是页面不可见，但是这个节点还是保存在内存中
        //数据与事件都不会丢失
        p = $("p").detach()
    });

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

DOM节点删除之detach()和remove()区别

remove：移除节点

无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据
有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据

detach：移除节点

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

DOM节点的复制与替换

DOM拷贝clone()

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

HTML部分
<div></div>JavaScript部分
$("div").on('click', function() {//执行操作})//clone处理一$("div").clone()   //只克隆了结构，事件丢失//clone处理二$("div").clone(true) //结构、事件与数据都克隆

DOM替换replaceWith()和replaceAll()

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

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p></div>

替换第二段的节点与内容

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

结果

<div>
    <p>第一段</p>
    <a style="color:red">替换第二段的内容</a>'    <p>第三段</p></div>

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

.replaceAll()和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理

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

总结

.replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别
.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序
.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用
.replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

DOM包裹wrap()方法

wrap方法是指在改元素的基础上为其添加一个父元素

<p>p元素</p>

给p元素增加一个div包裹

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

最后的结构

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

DOM包裹unwrap()方法

作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

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

找到p元素，然后调用unwrap方法，这样只会删除父辈div元素了

$('p').unwrap();

结果

<p>p元素</p>

DOM包裹wrapAll()方法

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

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

给所有p元素增加一个div包裹

$('p').wrapAll('<div></div>')

最后结果

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

.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。通过回调的方式可以单独处理每一个元素。

$('p').wrapAll(function() {    return '<div><div/>';
})

结果

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

DOM包裹wrapInner()方法

.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构

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

给所有元素增加一个p包裹

$('div').wrapInner('<p></p>')

最后的结构

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

jQuery遍历

jQuery遍历之children()方法

查找合集里面的第一级子元素，children(selector) 方法是返回匹配元素集合中每个元素的所有子元素。

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul></div>

代码如果是$("div").children()，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。

jQuery遍历之find()方法

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul></div>

children是父子关系查找，find是后代关系（包含父子关系）

.find()方法要注意的知识点：

find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。
find只在后代中遍历，不包括自己。
选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。

jQuery遍历之parents()方法

快速查找合集里面的每一个元素的所有祖辈元素

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul></div>

在li节点上找到祖辈元素div，这里可以用$("li").parents()方法

jQuery遍历之next()方法

允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象。

jQuery遍历之prev()方法

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

jQuery遍历之siblings()

取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合

jQuery遍历之add()方法

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

jQuery遍历之each()

each是一个for循环的包装迭代器
each通过回调的方式处理，并且会有2个固定的实参，索引与元素
each回调方法中的this指向当前迭代的dom元

<ul>
    <li>ＡＡＡ</li>
    <li>ＢＢＢ</li>
    <li>ＣＣＣ</li></ul>

开始迭代li，循环3次

$("li").each(function(index, element) {
     index 索引 0,1,2
     element是对应的li节点 li,li,li     this 指向的是li
})

作者：Dl_毛良伟
链接：https://www.jianshu.com/p/eb39884c96c8