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

      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

时间: 2024-10-20 05:23:25

JQ中的clone()方法与DOM中的cloneNode()方法的相关文章

javascript判断元素存在和判断元素存在于实时的dom中的方法

今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动页面,然后问题就出来了:页面无法向下滚动,调试工具的console里报了好多undefined的错误. 我马上意识到是我写的js代码错误的在首页被执行导致的问题,我的代码大致是这样: 1 if ($('#a')) { 2 // some code ... 3 $('#b').doSomething;

详解Java中的clone方法:原型模式

Java中对象的创建 clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象.所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空间中创建一个新的对象.那么在java语言中,有几种方式可以创建对象呢? 1 使用new操作符创建一个对象2 使用clone方法复制一个对象 那么这两种方式有什么相同和不同呢? new操作符的本意是分配内存.程序执行到new操作符时, 首先去看new操作符后面的类型,因为知道了类型,才能知道要分配多大的内存空间.分配完内存之

JAVA中的clone方法剖析

原文出自:http://blog.csdn.net/shootyou/article/details/3945221 java中也有这么一个概念,它可以让我们很方便的“制造”出一个对象的副本来,下面来具体看看java中的Clone机制是如何工作的?     1. Clone&Copy     假设现在有一个Employee对象,Employee tobby =new Employee(“CMTobby”,5000),通常我们会有这样的赋值Employee cindyelf=tobby,这个时候只

转:Java中的Clone()方法详解

Java中对象的创建 clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象.所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空间中创建一个新的对象.那么在java语言中,有几种方式可以创建对象呢? 使用new操作符创建一个对象 使用clone方法复制一个对象 那么这两种方式有什么相同和不同呢? new操作符的本意是分配内存.程序执行到new操作符时, 首先去看new操作符后面的类型,因为知道了类型,才能知道要分配多大的内存空间.分配完内存之后,再

Java中的clone方法详解

Java中对象的创建 clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象.所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空间中创建一个新的对象.那么在java语言中,有几种方式可以创建对象呢? 1 使用new操作符创建一个对象 2 使用clone方法复制一个对象 那么这两种方式有什么相同和不同呢? new操作符的本意是分配内存.程序执行到new操作符时, 首先去看new操作符后面的类型,因为知道了类型,才能知道要分配多大的内存空间.分配完内存

DOM中document对象的常用属性方法总结

提要: 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问 1.常见对象属性 document.title                 //设置文档标题等价于HTML的<title>标签document.bgColor               //设置页面背景色document.fgColor               //设置前景色(文本颜色)document.linkColor    

JQuery中的id选择器含有特殊字符时,不能选中dom元素的解决方法

1.jquery类库在我们实际项目中用的很多,大家经常需要根据控件的id,获取对应的html元素.但是:当id含有特殊字符的时候,是不能选中的. 2.自己简单的测试了下,jquery的id选择器只支持,单词.阿拉伯数字.下划线.中划线.其中单词,包括英文字母.汉字,但是控件id属于客户不可见内容,实际中开发人员是不用汉字作为id的,这里不考虑. 3.自己写了一个工具方法,开人人员只要将id转义后,jquery就能选中了,不用再考特殊字符的问题.代码是基于jquery1.6版本. function

java中的clone()

什么是"clone"? 在实际编程过程中,我们常常要遇到这种情况:有一个对象A,在某一时刻A中已经包含了一些有效值,此时可能 会需要一个和A完全相同新对象B,并且此后对B任何改动都不会影响到A中的值,也就是说,A与B是两个独立的对象,但B的初始值是由A对象确定的.在 Java语言中,用简单的赋值语句是不能满足这种需求的.要满足这种需求虽然有很多途径,但实现clone()方法是其中最简单,也是最高效的手段. Java的所有类都默认继承java.lang.Object类,在java.lan

DOM中的动态NodeList与静态NodeList

GitHub版本: https://github.com/cncounter/translation/blob/master/tiemao_2014/NodeList/NodeList.md 副标题: 为何getElementsByTagName()比querySelectorAll()快100倍 昨天,我在雅虎的同事 Scott Schiller (斯科特·席勒, 同时也是SoundManager创造者) 发Twitter询问为何getElementsByTagName("a") 在