jQuery - 节点的复制与替换

其他 2018-07-19 00:25:26 阅读次数: 0

拷贝clone()

jQuery提供一个clone方法，专门用于处理dom的克隆。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.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: #f5f5f5;}
    </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>

替换replaceWith()和replaceAll()

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <style>.right div {background: yellow;}</style>
</head>
<body>
    <h2>replaceWith()和replaceAll()</h2>
    <div class="left">
        <button class="bt1">点击,通过replaceWith替换内容</button>
        <button class="bt2">点击,通过rreplaceAll替换内容</button>
    </div>
    <div class="right">
        <div>
            <p>第一段</p>
            <p>第二段</p>
            <p>第三段</p>
        </div>
        <div>
            <p>第四段</p>
            <p>第五段</p>
            <p>第六段</p>
        </div>
    </div>
    <script type="text/javascript">
        //只克隆节点
        //不克隆事件
        $(".bt1").on('click', function() {
            //找到内容为第二段的p元素
            //通过replaceWith删除并替换这个节点
            $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
        })
        </script>
        <script type="text/javascript">
        //找到内容为第六段的p元素
        //通过replaceAll删除并替换这个节点
        $(".bt2").on('click', function() {
            $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
        })
    </script>
</body>
</html>

包裹wrap()方法

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <style>
        .left div,.right div {width: 100px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;background: orange;}
        p {border: 1px solid red;}
        a {border: 1px solid blue;}
    </style>
</head>

<body>
    <h2>DOM包裹wrap()方法</h2>
    <div class="left">
        <button class="aaron1">点击,通过wrap方法给p元素增加父容器div</button>
        <button class="aaron2">点击,通过wrap的回调方法给a元素增加父容器div</button>
    </div>

    <div class="right">
        <p>p元素</p>
        <p>p元素</p>
    </div>

    <div class="left">
        <a>a元素</a>
        <a>a元素</a>
    </div>
    
    <script type="text/javascript">
    $(".aaron1").on('click', function() {
        //给所有p元素，增加父容器div
        $('p').wrap('<div></div>')
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on('click', function() {
        $('a').wrap(function() {
            return '<div class="' + $(this).text() + '" />';
        })
    })
    </script>
</body>

</html>

包裹unwrap()方法

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <style>
        .left,.right {width: 250px;height: 120px;}
        .left div,.right div {width: 100px;height: 120px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;background: #bbffaa;}
        .right div {background: yellow;}p {border: 1px solid red;}a {border: 1px solid blue;}
    </style>
</head>
<body>
    <h2>DOM包裹unwrap()方法</h2>
    <div class="left">
        <div class="aaron1">点击,通过unwrap方法给p元素删除父容器div</div>
        <div class="aaron2">点击,通过unwrap的回调方法给a元素删除父容器div</div>
    </div>
    <div class="right">
        <div><p>p元素</p></div>
        <div><p>p元素</p></div>
    </div>
    <div class="left">
        <div><a>a元素</a></div>
        <div><a>a元素</a></div>
    </div>
    <script type="text/javascript">
    $(".aaron1").on('click', function() {
        //找到所有p元素，删除父容器div
        $('p').unwrap('<div></div>')
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on('click', function() {
        //找到所有p元素，删除父容器div
        $('a').unwrap(function() {
            return '<div></div>';
        })
    })
    </script>
</body>
</html>

包裹wrapAll()方法

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <style>
        .left,.right {width: 250px;height: 120px;}
        .left div,.right div {width: 100px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;background: #bbffaa;}
        .right div {background: yellow;}
        p {border: 1px solid red;}
        a {border: 1px solid blue;}
    </style>
</head>

<body>
    <h2>DOM包裹wrapAll()方法</h2>
    <div class="left">
        <div class="aaron1">点击,通过wrapAll方法给所有P元素增加父容器div</div>
        <div class="aaron2">点击,通过wrapAll的回调方法给每个a元素增加父容器div</div>
    </div>
    <div class="right">
        <p>p元素</p>
        <p>p元素</p>
    </div>
    <div class="left">
        <a>a元素</a>
        <a>a元素</a>
    </div>
    <script type="text/javascript">
    $(".aaron1").on('click', function() {
        //给所有p元素，增加父容器div
        $('p').wrapAll('<div></div>');
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on('click', function() {
        //wrapAll接受一个回调函数
        //每一次遍历this都指向了合集中每一个a元素
        $('a').wrapAll(function() {
            return '<div></div>'
        })
    })
    </script>
</body>

</html>

包裹wrapInner()方法

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <style>
        .left,.right {width: 250px;height: 130px;}
        .left div,.right div {width: 100px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;background: #bbffaa;}
        .right div {background: yellow;}
        p {border: 1px solid red;}
        a {border: 1px solid blue;}
    </style>
</head>
<body>
    <h2>DOM包裹wrapInner()方法</h2>
    <div class="left">
        <div class="aaron1">点击,通过wrapInner方法给所有div元素增加内部父容器p</div>
        <div class="aaron2">点击,通过wrapInner的回调方法给每个div元素增加内部父容器a</div>
    </div>
    <div class="right">
        <div class="right1">p元素</div>
        <div class="right1">p元素</div>
    </div>
    <div class="left">
        <div class="left1">a元素</div>
        <div class="left1">a元素</div>
    </div>

    <script type="text/javascript">
    $(".aaron1").on('click', function() {
        //给所有class=right1的div元素，增加内部包裹父容器p
       $('.right1').wrapInner('<p></p>');
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on('click', function() {
        //wrapInner接受一个回调函数
        //每一次遍历this都指向了合集中每一个class=left1的div元素
        $('.left1').wrapInner(function() {
            return '<a></a>'
        })
    })
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/cai181191/article/details/81079217
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022