zoukankan      html  css  js  c++  java
  • jQuery学习——克隆

    .clone()

    描述: 创建一个匹配的元素集合的深度拷贝副本。

    • 添加的版本: 1.0.clone( [withDataAndEvents ] )

      • withDataAndEvents (默认: false)
        类型: Boolean
        一个Boolean值,表示是否会复制元素上的事件处理函数。从jQuery 1.4开始,元素数据也会被复制。
    • 添加的版本: 1.5.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

      • withDataAndEvents (默认: false)
        类型: Boolean
        一个Boolean值,表示是否会复制元素上的事件处理函数。 默认值是 false*对于1.5.0的默认值被不适当地设置成了true,将在1.5.1以上改回false 。
      • deepWithDataAndEvents (默认: value of withDataAndEvents)
        类型: Boolean
        一个布尔值,指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。默认情况下它的值相匹配的第一个参数的值( 默认值是 false

    .clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。出于性能方面的考虑,表单元素动态的状态(例如,用户将数据输入到input和 textarea,或者 用户在select中已经选中某一项)不会被复制到克隆元素。克隆操作将设置  这些字段为HTML中指定的默认值。

    注意: 使用.clone()可能产生id属性重复的元素的副作用,id应该是唯一的。在可能的情况下,建议,应避免克隆有此属性或标识符的元素,使用类(class)属性代替。

    Example: 复制所有 b 元素然后将他们插入到所有段落里面的前面。

    <!DOCTYPE html>
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
     
      <b>Hello</b><p>, how are you?</p>
     
    <script>
      $("b").clone().prependTo("p");
    </script>
     
    </body>
    </html>

    当使用 .clone()克隆一组元素,并且这些克隆生成的元素尚未被添加到 DOM 中,那么当这些元素被插入到 DOM 中时,不能保证是按它们的原顺序被插入的。但是,可以像下面例子中提到的那样,保证顺序的正确性:

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      #orig, #copy, #copy-correct {
        float: left;
        width: 20%;
      }
    </style>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
     
    <div id="orig">
        <div class="elem"><a>1</a></div>
        <div class="elem"><a>2</a></div>
        <div class="elem"><a>3</a></div>
        <div class="elem"><a>4</a></div>
        <div class="elem"><a>5</a></div>
    </div>
    <div id="copy"></div>
    <div id="copy-correct"></div>
     
    <script>
    // sort order is not guaranteed here and may vary with browser
    $('#copy').append($('#orig .elem')
              .clone()
              .children('a')
              .prepend('foo - ')
              .parent()
              .clone());
     
    // correct way to approach where order is maintained
    $('#copy-correct')
              .append($('#orig .elem')
              .clone()
              .children('a')
              .prepend('bar - ')
              .end());
    </script>
     
    </body>
    </html>
  • 相关阅读:
    利用pyinotify监控文件内容,像tailf命令但比它更强
    AWS SDK for C++调用第三方S3 API
    Windows 10恢复Shift+右键打开命令提示符窗口
    TP-LINK WR841N V8刷OpenWRT
    Build subversion 1.8 with SSL on OS X Yosemite
    OpenWrt自定义和官方一样的固件
    Windows 10下通过蓝牙连接iPhone个人热点进行共享上网
    Broadcom有线网卡在Windows 8/8.1/10下使用系统自带驱动会断网的解决办法
    BCM94352HMB蓝牙BCM20702A0在Ubuntu 14.04下的驱动方法
    Spring Boot 发送邮件
  • 原文地址:https://www.cnblogs.com/pilee/p/3478476.html
Copyright © 2011-2022 走看看