DOM节点的创建

jQuery节点创建与属性的处理

创建元素节点：

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

创建为文本节点：

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 
$("<div>我是文本节点</div>")

创建为属性节点：

$("<div id='test' class='aaron'>我是文本节点</div>")

DOM节点的插入

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

选择器 描述
append（content） 向每个匹配的元素内部追加内容
appendTo（content） 把所有匹配的元素追加到另一个指定的元素集合中
prepend 向每个匹配的元素内部前置内容
prependTo 把所有匹配的元素前置到另一个指定的元素集合中

注意：
append()前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是被插入的对象

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

选择器 描述
.after（content） 向每个匹配的元素内部追加内容
insertAfter 在目标集合后面插入集合中每个匹配的元素
.before（content） 据参数设定，在匹配元素的前面插入内容
insertBefore 在目标元素前面插入集合中每个匹配的元素 
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //在test1元素前后插入集合中每个匹配的元素
        //不支持多参数
        $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //在test2元素前后插入集合中每个匹配的元素
        //不支持多参数
        $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
    })
    </script>

注意：
before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理

DOM节点删除

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

empty 与删除又有点不一样，它只移除了指定元素中的所有子节点（包括文本节点）。它只是清空内部的html代码，但是标记仍然留在DOM中。

<div class="hello"><p>慕课网</p></div>

//通过empty处理
$('.hello').empty()

//结果：<p>慕课网</p>被移除
<div class="hello"></div>

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

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

<div class="hello"><p>慕课网</p></div>
$('.hello').on("click",fn)

如果不通过remove方法删除这个节点其实也很简单，但是同时需要把事件给销毁掉，这里是为了防止"内存泄漏"，所以前端开发者一定要注意，绑了多少事件，不用的时候一定要记得销毁

通过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法，所以使用使用起来非常简单

//通过remove处理
$('.hello').remove()
//结果：<div class="hello"><p>慕课网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

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

我们可以通过$()选择一组相同的元素，然后通过remove（）传递筛选的规则，从而这样处理

对比右边的代码区域，我们可以通过类似于这样处理

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

等价于

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

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

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

通过detach方法删除元素只是页面不可见，但是这个节点还是保存在内存中，数据与事件都不会丢失。

    <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节点的复制与替换

DOM拷贝clone()

.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
注意：通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了

HTML部分
<div></div>

JavaScript部分
$("div").on('click', function() {//执行操作})

//clone处理一
$("div").clone()   //只克隆了结构，事件丢失

//clone处理二
$("div").clone(true) //结构、事件与数据都克隆
  • clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css('color','red') 增加了一个颜色
  • 通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上
  • clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据
  • 元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个

DOM替换replaceWith()和replaceAll()

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
.replaceAll( target )和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理

   <script type="text/javascript">
    //只克隆节点
    //不克隆事件
    $(".bt1").on('click', function() {
        //找到内容为第二段的p元素
        //通过replaceWith删除并替换这个节点
        $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
    })
    </script>
    <script type="text/javascript">
    //找到内容为第六段的p元素
    //通过replaceAll删除并替换这个节点
    $(".bt2").on('click', function() {
        $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
    })
    </script>

jQuery基础（二）DOM 随笔

DOM包裹wrap()方法

.wrap( wrappingElement )：给元素增加一个父元素。

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

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

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

以第一个案例为例：

$('p').wrap(function() {
    return '<div></div>';   //与第一种类似，只是写法不一样
})

DOM包裹unwrap()方法

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

<div>
    <p>p元素</p>
</div>
$('p').unwrap();

结果：

<p>p元素</p>

DOM包裹wrapAll()方法

.wrapAll( wrappingElement )：给多个元素添加一个父元素

简单的看一段代码：

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

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

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

最后的结构，2个P元素都增加了一个父div的结构

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

.wrapAll( function ) ：每个元素都增加一个父元素
以上面案例为例，

$('p').wrapAll(function() {
return '

';
})
以上的写法的结果如下，等同于warp的处理了 

<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>')

最后的结构，匹配的di元素的内部元素被p给包裹了

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

.wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容

以上面案例为例，

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

以上的写法的结果如下，等同于第一种处理了

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

注意：

当通过一个选择器字符串传递给.wrapInner() 函数，其参数应该是格式正确的 HTML，并且 HTML 标签应该是被正确关闭的。

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄