• 技术文章 >web前端 >js教程

    jquery有克隆方法吗?

    青灯夜游青灯夜游2020-11-19 10:14:52原创48

    jquery有克隆方法,即clone()方法。clone()方法是专门用于处理dom的克隆,可以生成被选元素的副本,包含子节点、文本和属性;语法“$(selector).clone(true|false)”,true规定需复制事件处理程序。

    相关推荐:《jq视频

    克隆节点是DOM的常见操作,jQuery提供一个clone方法,专门用于处理dom的克隆

    .clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。

    clone方法比较简单就是克隆节点,但是需要注意,如果节点有事件或者数据之类的其他处理,我们需要通过clone(ture)传递一个布尔值ture用来指定,这样不仅仅只是克隆单纯的节点结构,还要把附带的事件与数据给一并克隆了。

    语法

    $(selector).clone(true|false)

    参数:

    例如:

    HTML部分

    <div></div>

    JavaScript部分

    $("div").on('click', function() {//执行操作})
    
    //clone处理一
    $("div").clone()   //只克隆了结构,事件丢失
    
    //clone处理二
    $("div").clone(true) //结构、事件与数据都克隆

    使用上就是这样简单,使用克隆的我们需要额外知道的细节:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
        <style>
        .left,
        .right {
            width: 300px;
            height: 120px;
        }
        
        .left div,
        .right div {
            width: 100px;
            height: 90px;
            padding: 5px;
            margin: 5px;
            float: left;
            border: 1px solid #ccc;
            background: #bbffaa;
        }
        </style>
    </head>
    
    <body>
        <h2>通过clone克隆元素</h2>
        <div class="left">
            <div class="aaron1">点击,clone浅拷贝</div>
            <div class="aaron2">点击,clone深拷贝,可以继续触发创建</div>
        </div>
        <script type="text/javascript">
            //只克隆节点
            //不克隆事件
            $(".aaron1").on('click', function() {
                $(".left").append( $(this).clone().css('color','red') )
            })
        </script>
    
        <script type="text/javascript">
            //克隆节点
            //克隆事件
            $(".aaron2").on('click', function() {
                console.log(1)
                $(".left").append( $(this).clone(true).css('color','blue') )
            })
        </script>
    </body>
    
    </html>

    更多编程相关知识,请访问:编程课程!!

    以上就是jquery有克隆方法吗?的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:jquery 克隆方法 clone()
    上一篇:jquery中on()与click()的区别是什么? 下一篇:react如何写点击事件
    第14期线上培训班

    相关文章推荐

    • jquery如何进行字母大小写转换?• jquery怎么获取html元素的内容?• jquery怎么判断滚动条是否存在• jquery和React的区别是什么?• jquery中on()与click()的区别是什么?

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网