jQuery使用：DOM操作之元素包裹克隆DOM与data的综合应用

Posted 2021-02-08 zheoneandonly

包裹

• wrap()
• wrapInner()
• wrapAll()
• unwrap()
• clone()

数据缓存机制

• data

文档处理（包裹）

 1.1.wrap()--将所匹配的元素用其他元素结构化标签包裹起来（实际上就是给指定的元素添加父元素）。参数可以是html标记代码字符串；也可以是DOM元素对象；或者是传入一个方法，方法的返回值可以是前面两种情况。

//html
<div class="demo">b</div>
<div class="a">a</div>

//js
$(‘.demo‘).wrap(‘<div class="b">c</div>‘);

上面这个示例展示的结果可以得出一个结论就是通过wrap包裹元素，其实质就是将元素添加到指定的元素的末尾。同时我们又会思考另一个问题，就是通常我们选择的DOM不会只有一个，而是多个，如果执行了wrap()会发什么呢？

//html
<div class="demo">b</div>
<div class="demo">d</div>
<div class="a">a</div>

//js
$(‘.demo‘).wrap( $(‘.a‘) );

从上面的示例可以得到，当jQuery对象是DOM集合时，每个DOM节点上包裹一个指定元素。被指定的元素是DOM节点，相当于拷贝指定的DOM节点(节点的属性会被拷贝，但是内部节点内容不会被拷贝)。最后展示一下function作为参数的语法：

$(‘.demo‘).wrap( function(index){
    //index表示当前正在执行被包裹的元素的jQuery索引
    return ‘<div class="wrapper‘+ index +‘"></div>‘;
} );

既然前面我们讲到当调用wrap()方法的jQuery对象是DOM集合时，执行的是每个节点上包裹一个指定的元素。如果一个节点集合需要被一个指定的元素包裹怎么办呢？jQuery给我们提供了wrapInner()方法。

1.2.wrapAll()--将调用wrapAll方法的jQuery对象包含的所有的DOM节点包裹在一个指定的元素内，如果DOM集合的节点不是兄弟节点，会以第一个获取到的节点为基础，将其他节点剪切到第一个节点的下方，作为第一个节点的兄弟节点，再执行统一包裹。参数可以是HTML标记代码字符串，也可以是DOM节点。

//html
<div class="a">
    <div class="demo">
        <p>
            <span class="demo"></span>
        </p>
        <div class="demo"><a></a></div>
    </div>    
</div>
<p class="demo"></p>

//js
$(‘.demo‘).wrapAll(‘<div class="wrapper"></div>‘);

1.3.wrapInner()--将每一个DOM节点的内容被指定的元素包裹起来。参数可以是HTML标记代码字符串，DOM节点对象，也可以是方法，语法类似wrap。

//html
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

//js
var hrefArr = ["www.baidu.com","www.1688.com","www.qq.com","www.huawei.com.cn","www.136.com"];
$(‘ul li‘).wrapInner(function(index){
    return ‘<a href=" ‘+ hrefArr[index] + ‘ "></a>‘;
});
//实例中的每个li内的数字会被包裹在a标签内，当然也可以包裹元素。

1.4.unwrap()--用来移除被选元素的父元素。

//html
<div class="aa">
    <p class="bb"><span class="cc"></span></p>
</div>

//js
$(‘.cc‘).unwrap();

方法内也可以添加参数(选择器)，用来移除指定的元素，比如上面的示例可以添加‘p’实现的效果是一样的，如果添加‘div‘就不能删除父元素了。这个参数起到的筛选的作用。

1.5.clone()--生成备选元素的副本，包含子节点文本和属性（非特性属性也可以被克隆）；元素上绑定的事件需要传入boolean值来指定是否被一并克隆。

//html
<div class="demo" style="width: 100px;height: 100px;background-color: red;" data-cst="duyi"></div>

//js
$(‘.demo‘).clone(true).appendTo(‘body‘);

关于克隆的一个小demo：

//html
<table class="stb">
    <tr>
        <th>名字</th>
        <th>年龄</th>
        <th>班级</th>
    </tr>
    <tr class="tpl">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

//css
.tpl{
    display: none;
}

//js
var studentArr = [
    {
        name: ‘小明‘,
        age : 18,
        class: 3
    },
    {
        name: ‘小红‘,
        age: 19,
        class: 2
    },
    {
        name: ‘小李‘,
        age: 50,
        class: 1
    }
];
var oWrapper = $(‘.stb‘);
studentArr.forEach(function(ele,index){
    var oCloneDom = $(‘.tpl‘).clone().removeClass(‘tpl‘);
    oCloneDom
        .find(‘td‘)
            .eq(0)
                .text(ele.name)
                    .next()
                        .text(ele.age)
                            .next()
                                .text(ele.class);
    oWrapper.append(oCloneDom);
});

文档处理与数据缓存机制

 在关于clone()方法的解析中，说克隆一个元素时可以复制其子节点内容、属性、特性、甚至绑定的事件都可以复制，这好像是说元素上的所有内容都可以被复制。但是真的是这样的吗？请看下列代码：

<div class="demo"  data-cst="duyi"></div>

$(‘.demo‘).prop(‘data-log‘,‘1111‘);
console.log( $(‘.demo‘).prop(‘data-log‘) );//1111
console.log( $(‘.demo‘).data(‘log‘) );//undefined
console.log( $(‘.demo‘).data(‘cst‘) );//duyi
console.log( $(‘.demo‘).clone().prop(‘data-log‘) );//undefined
console.log( $(‘.demo‘).clone().data(‘log‘) );//undefined
console.log( $(‘.demo‘).clone().data(‘cst‘) );//duyi

其实这时候你打开控制台可以看到元素通过prop()方法添加的属性并没有出现在元素上，其prop()是用来添加特性使用，但是它在一定程度上可以用来存储数据，这种数据的缓存方式不能被clone()方法复制到，但是通过prop()方法添加的特性是可以被复制的，并且通过查看控制台可以看到添加的特性会出现在标签上。

$(‘.demo‘).prop(‘id‘,‘12‘);
console.log( $(‘.demo‘).clone().prop(‘id‘) );//12

既然prop()实现的数据缓存机制不能被拷贝，那通过data()方法实现的数据缓存能否被拷贝呢？

$(‘.demo‘).data({
    name:"小明",
    age:18,
    class:3
});
console.log( $(‘.demo‘).data(‘name‘) );//‘小明‘
console.log( $(‘.demo‘).clone().data(‘name‘) );//undefined

还是不能！

那为什么还需要data来缓存数据呢？相信细心的朋友已经发现了前面代码埋下的伏笔，在第一个示例中的元素上通过字面量的方式添加了data-cst="duyi"这个属性，可以被jQuery的data()数据存储机制解析成为键值对的数据；在第三个示例中展示了直接通过data()方法传入对象的方式添加缓存数据，这些操作相比prop()方便的多了，并且功能上更加语义化。然后还有一个更重要的因素就是通过prop()获取的值都是字符串类型，而通过data()获取的值和存储的值是一致的。

然而这些还并不是最关键的原因，下面我们通过一个示例来实际应用data()方法处理一个业务模型：

//html
<!-- 模拟购物车勾选结算商品 -->
<div class="wrapperData">
    <div class="tplData">
        <p></p>
        <span></span>
        <button>add</button>
    </div>

    <p class="showData">
        <span>sum</span>
        <span class="sum">0</span>
    </p>
</div>

//css
.tplData{
    display: none;
}

//js
//模拟购物车勾选结算商品
var shopArr = [
    {
        name: ‘james solider‘,
        shopName: ‘nike‘,
        price: 110,
        id: ‘1001‘
    },
    {
        name: ‘Rose crazyLight‘,
        shopName: ‘adidas‘,
        price: 90,
        id: ‘2002‘
    },
    {
        name: ‘curry one‘,
        shopName: ‘Under Armour‘,
        price: 120,
        id: ‘3003‘
    }
];



shopArr.forEach(function(ele,index){
    var oCloneDom = $(‘.tplData‘).clone().removeClass(‘tplData‘);
    oCloneDom.data({
        id:ele.id,
        name:ele.name,
        shopName:ele.shopName,
        price:ele.price
    }).find(‘p‘)
            .text(ele.name)
                .next()
                    .text(ele.price);

    oCloneDom.insertBefore(‘.showData‘);
});
//勾选结算商品
$(‘.wrapperData button‘).click(function(){
    $(‘.sum‘).text( +$(‘.sum‘).text() + $(this).parent().data(‘price‘) );
});

从我们常见的购物车结算示例来看，当点击行为触发选中商品时，我们需要调取对应商品的数据进行结算操作，在示例中，将商品对应的数据通过data()绑定在DOM节点对应的jQuery对象上，就有了后面结算时直接通过jQuery对象的data()方法进行获取。如果通过prop()和attr()方法来存储数据，每一次存储和每一次获取都要操作DOM，相信大家都知道通过浏览器的js引擎调用浏览器的DOM引擎的接口来进行数据交互，比纯粹的js引擎内部数据运算，消耗的资源要大很多，对性能和体验会造成很大的影响。