聊一聊JQuery-深/浅克隆方法Clone()

克隆

克隆:是英文"clone"或"cloning"的音译;克隆是指生物体通过体细胞进行的无性繁殖,以及由无性繁殖形成的基因型完全相同的后代个体。

从策划到设计制作，每一步都追求做到细腻，制作可持续发展的企业网站。为客户提供成都网站设计、做网站、网站策划、网页设计、域名注册、网站空间、网络营销、VI设计、 网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。

克隆也可以理解为复制、拷贝和翻倍,就是从原型中产生出同样的复制品,它的外表及遗传基因与原型完全相同,但大多行为 思想不同。

JQ的clone()方法名称个人感觉就是蹭热点名词;其作用就是复制。

clone()

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

clone()方法是克隆匹配的Dom元素;可以生成被选元素的副本,包含子节点,文本与属性。

clone()方法使用格式:$(selector).clone(true|false)​。

深/浅克隆的区别在于方法的参数是true(深克隆)或false(或者没有)是浅克隆。

1. 浅克隆:只复制副本,不会克隆节点的事件。
2. 深克隆:不止复制副本,还会复制节点的JQ事件。

页面示例代码：

    用户名：

为dv1分别注册Dom的0级/2级事件/JQ事件的单击事件;使用colone()方法克隆出新的div,在克隆的div中追加一个p元素其文本用于标示深/浅克隆的div。

深/浅克隆事件

$(function () {
    //注册dom的0级单击事件
    var dv1 = document.getElementById("dv1");
    dv1.onclick = function () {
        console.log("dom 0级事件");
    };
    //注册dom的2级单击事件
    dv1.addEventListener("click", function () {
        console.log("dom 2级事件");
    });
    //注册JQ的单击事件
    //$("#dv1").click(function () { console.log("我是dv1"); });
    $(dv1).click(function () { console.log("我是dv1"); });
    //01.浅克隆 不会复制事件
    //包括 0级/2级dom事件与JQ的事件 都不会被复制
    $("#c1").click(function () {
        //$newDiv克隆出来的新div
        var $newDiv = $("#dv1").clone();
        //在克隆的div追加一个p元素
        //用于标示新div是浅克隆出来的
        $newDiv.append('
浅克隆
');
        //将克隆的div插入到$("#dv1")的后面
        $newDiv.insertAfter($("#dv1"));
    });

    //02.深克隆 会复制事件
    //注意：jq事件 会复制，
    //0级/2级dom事件 不会被复制
    $("#c2").click(function () {
        var $newDiv = $("#dv1").clone(true);
        //用于标示新div是深克隆出来的
        $newDiv.append('
深克隆
');
        $newDiv.insertAfter($("#dv1"));
    });
});

小结

深/浅克隆的区别：

1、方法参数

• 深克隆参数为true 浅克隆参数为false。

2、针对事件

• 浅克隆 0级/2级/JQ事件都不会被克隆。
• 深克隆只会克隆JQ事件,0级/2级事件也不会被克隆。

网页标题：聊一聊JQuery-深/浅克隆方法Clone()
本文链接：http://www.shufengxianlan.com/qtweb/news19/41869.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联