`
KAXU
  • 浏览: 271561 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

jquery 控制 clone( )

阅读更多

clone( )

克隆匹配DOM,并选中当前克隆匹配元素集合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("b").clone().prependTo("p");
  });
  </script>
  
</head>
<body>
  <b>Hello</b><p>, how are you?</p>
</body>

 

$("b").clone().prependTo("p");

将匹配b元素集合克隆,并添加在匹配P元素之前。

 

 

clone( true )

克隆匹配DOM,并获取其事件句柄,选中当前克隆匹配元素集合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("button").click(function(){
      $(this).clone(true).insertAfter(this);
    });

  });
  </script>
  
</head>
<body>
  <button>Clone Me!</button>
</body>
</html>

 

 $(this).clone(true).insertAfter(this);
克隆当前按钮并获取click事件句柄,复制至该按钮后面

分享到:
评论

相关推荐

    jQuery中clone()方法用法实例

    jQuery中的clone()方法是一个非常实用的工具,它能够帮助开发者复制DOM元素及其绑定的事件处理器,以便在页面上实现动态内容的增加或替换。本文档详细介绍了clone()方法的用法,包括它的定义、功能以及如何运用它来...

    jquery 学习课堂工具

    2. **DOM操作**:jQuery提供了一套完整的DOM操作方法,如`append()`在元素内部追加内容,`prepend()`在元素内部预置内容,`remove()`删除匹配的元素,以及`clone()`复制元素等。 3. **事件处理**:通过`.on()`方法...

    jquery 1.7.2 帮助文档

    2. DOM操作:jQuery提供了丰富的DOM操作方法,如`.append()`(在元素内部添加内容)、`.remove()`(删除元素)和`.clone()`(复制元素)。这些方法使得动态修改页面内容变得简单。 3. 事件处理:jQuery的事件处理...

    jQuery 1.4 Reference Guide PDF(包含jQuery1.4.4.js)

    jQuery 1.4还提供了一套完整的API用于DOM操作,如`append()`、`prepend()`用于元素插入,`clone()`用于复制元素,`remove()`和`empty()`用于移除元素。同时,`attr()`、`css()`和`data()`方法则方便了对元素属性、...

    Learning jQuery 1.3 | Jquery基础教程(第二版)

    此外,`$(selector).clone()`用于复制元素,`$(selector).attr()`和`.removeAttr()`用于处理元素的属性。 ### 四、事件处理 jQuery简化了事件绑定的过程,`$(selector).on('event', function() {...})`可以方便地...

    jQuery1.41中文API文档

    例如,`append()` 方法用于在元素末尾添加内容,`prepend()` 在开头添加,`remove()` 删除匹配的元素,`clone()` 复制元素。 3. **事件处理** - jQuery 提供了一致的事件处理方法,如 `click()`, `mouseover()`, `...

    JQuery拖拽使用文档

    revert: true, // 控制拖动结束后元素是否回退到原始位置 helper: 'clone', // 创建克隆体作为拖动时的视觉表示 stop: function(event, ui) { // 拖动结束时的回调函数 // 在这里编写拖动结束后要执行的 ...

    jQuery学习资源包

    - **DOM操作**:jQuery提供了丰富的API用于操作DOM,如`append()`在元素内部添加内容,`remove()`删除元素,`clone()`复制元素等。 - **事件处理**:使用`on()`方法可以绑定事件,如`$("#element").on("click", ...

    jquery-3.31版本

    例如,`append()`、`remove()`和`clone()`等方法的性能都有所提升,使得开发者在构建动态网页时能更加得心应手。 再者,jQuery 3.31对事件处理进行了改进,确保了事件绑定和解绑的精确性。`on()`和`off()`方法现在...

    jquery1.7.2中文手册

    - `$(selector).clone()`复制元素,包括关联的数据和事件。 3. **遍历和过滤(Traversing & Filtering)** - `.children()`和`.parent()`分别用于获取元素的子元素和父元素。 - `.siblings()`获取元素的同级元素...

    jquery制作酷炫圣诞主题首页

    对于大规模的DOM操作,可以使用jQuery的.clone()、.detach()或.html()方法提高效率。同时,合理使用事件代理可以减少事件绑定的数量,减轻内存压力。 最后,为了保证兼容性和用户体验,我们需要对各种浏览器进行...

    JQuery经典案例集合

    还有`.data()`用于存储和检索元素关联的数据,`.append()`、`.prepend()`用于DOM操作,`.clone()`复制元素,`.remove()`删除元素,这些都是JQuery常用的功能。 最后,JQuery的链式操作和封装思想是其设计理念的重要...

    Jquery2.1.3库

    3. **DOM操作**:jQuery封装了大量用于创建、修改和操作DOM元素的方法,如`append()`、`prepend()`用于在元素内部添加内容,`remove()`用于删除元素,`clone()`用于复制元素等。 4. **动画效果**:jQuery提供了一...

    jQuery2.1.3

    例如,`append()`用于向元素内部追加内容,`remove()`用于删除元素,`clone()`用于复制元素,`empty()`清空元素内的所有子元素。这些方法使得DOM结构的动态修改变得轻而易举。 四、事件处理 jQuery提供了优雅的...

    jQuery-1.8.1.js jQuery-1.8.0 API

    2. **DOM 操作**:jQuery 提供了一套简洁的方法来操作 HTML 元素,如 `.append()`(在元素内部添加内容)、`.remove()`(删除元素)和 `.clone()`(复制元素)。 3. **事件处理**:jQuery 的事件处理机制简化了跨...

    Jquery中文帮助文档

    4. **动画效果(Animation)**:`fadeIn()`、`fadeOut()`、`slideToggle()`等方法为元素添加平滑的动画效果,`animate()`可以自定义动画过程,控制元素的各种属性如位置、大小、透明度等。 5. **Ajax交互(Ajax)**...

    jQuery api手册

    4. `$().clone()`:复制元素,包括关联的数据和事件。 ### 事件处理 jQuery的事件处理更加简单: 1. `$().click(fn)`:为元素绑定点击事件。 2. `$().on()`:通用事件绑定,支持代理和事件冒泡。 3. `$().off()`:...

    "jQuery基础教程"电子书

    jQuery提供了便利的DOM操作方法,如`$(element).html()`用于获取或设置元素的HTML内容,`$(element).append()`和`$(element).prepend()`用于在元素内部添加内容,`$(element).remove()`用于删除元素,`$(element)....

    jquery-api-1.7.2

    此外,`$(element).remove()`可以移除元素,而`$(element).clone()`则用于复制元素及其关联数据。 在DOM操作的同时,jQuery还简化了事件处理。使用`$(element).on("event", function)`可以绑定事件监听器,如`$...

    jquery1.8.3api和js

    2. **DOM操作**: jQuery 提供了简洁的API来操作DOM,如 `append()` 在元素内部添加内容,`remove()` 删除元素,`clone()` 复制元素,以及 `html()`、`text()` 和 `attr()` 设置或获取元素的HTML内容、文本或属性。...

Global site tag (gtag.js) - Google Analytics