JQ中的clone()方法与DOM中的cloneNode()方法

Posted 2020-08-27 cleaverlove

　　　　　　JQ中的clone()方法与DOM中的cloneNode()方法

cloneNode()定义和用法

　　cloneNode()方法创建节点的拷贝，并返回该副本。

　　语法： node.cloneNode(deep);  其接收一个可选参数"deep"，为布尔类型，默认是false。

　　当设置为true，克隆当前节点，属性及当前节点的后代.若设置为false,仅仅克隆当前元素节点本身。

　　扩展:  使用cloneNode()方法，当被克隆的节点绑定了事件处理程序，事件处理程序是否会被一同克隆，这个我也没有使用过，但是还是查找了资料。如这篇博文，比较详细介绍了，具体我以后也会测试。

 

JQ中的clone()方法

　　概述： 克隆匹配的DOM元素并且选中这些克隆的副本。

　　　　在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

　　　需要特别注意不同版本的JQ，参数有一些不同。

　　　手册中显示版本为V1.0时，只有一个参数（true或false）指示事件处理函数是否会被复制。V1.5以上版本默认值是false.

　　　版本为1.5时有两个参数，第一个参数(true或者false)指示事件处理函数是否会被复制。第二个参数也是布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

　　　　特别注意： 

　　　　　1.在jQuery 1.4之前，clone()函数只额外复制元素的绑定事件，从1.4版本开始，支持复制元素的附加数据。

　　　　　2. 1.5.0版本（只有1.5.0）,第二个参数的默认值被错误地设定为true，从1.5.1开始，其默认值才被改为false.

　　　在做“许愿墙”项目时，需要克隆每个愿望贴的操作。 我写的代码如下:

 1 var newEle = $(cloneObj).clone(true,true); 

　　　　我使用的版本是1.11.0,这样既可以复制事件处理程序，也可以复制到所有子元素的数据。

拓展

　　　我发现clone()的第二个参数好像能为未来出现的相同的元素添加事件啊。那还有没有能够为未来出现相同元素添加事件的方法呢？

　　　答案是： 那必须的.

　　　　delegate(selector, [type], [data], fn) : 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

　　　　使用delegate()方法的事件处理程序适用于当前或者未来的元素（比如由脚本创建的新元素）.

　　　代码如下：

$(‘body‘).delegate(‘.live‘, ‘click‘, function() {
     $(this).css(‘background‘, ‘orange‘);
     alert(‘live事件被执行了‘);
});
//点击按钮添加新元素
$(‘button:contains(live)‘).click(function() {
   $(‘<div class="live">live</live>‘).appendTo(‘body‘);
});

　　　　使用delegate()方法，为类名"live"元素添加点击事件，通过按钮添加新元素，当你点击时，新的元素的背景色也会变成橙色，这说明delegate()方法能为未来出现的相同的元素添加事件.

　　　解除delegate()添加的事件使用undelegate()方法解除。

$(‘button:contains(die)‘).click(function() {
   $(‘body‘).undelegate();
});

　　注意： 

　　　　1.调用delegate()方法的貌似是要添加事件元素的父元素。

　　　　2. 手册中live()方法 有这句话： 从jQuery 1.7开始，不再建议使用.live()方法。请使用.on()来添加事件处理。使用旧版本的用户，应该优先使用.delegate()来替代.live()。     首先在1.7版本开始on() 方法是 .bind()、.live() 和 .delegate() 方法的新的替代品。.on(), .live(), .delegate()都是能为现在及未来元素添加事件的。

　　　　在1.7版本以前我们最好使用.delegate(),而在1.7后面，推荐使用.on()方法

　　　　例子：html结构如下

1 <div id="div1">
2      <p>Click to set background color using the<b>on() method</b>.</p>
3 </div>
　<button>添加p元素</button>

　　　　JQ代码如下:

// 给元素里面的p添加事件
$("#div1").on("click", "p", function() {
   $(this).css("background", "pink");
});
//在#div1中添加p元素
$("button:contains(p)").click(function() {
    $("<p>Click to set background color using the <b> on() method</b>.</p>").appendTo("#div1");
});

　　　通过按钮添加的p元素，点击时背景色会变粉色。

　　　取消通过.on()添加的事件处理程序，使用off()

 1 $(‘#div1‘).off(); 

　　　另外关于.live()方法，更详细的介绍可以参考JQ手册1.11.0,里面有提到事件委托，附加说明等。这里就不多阐述了。

　　　在查阅资料的过程中，这两篇博文也给我了一些思考，附上链接，以后也便于查看，加深理解。地址1，地址2