2021-02-24 jQuery中 dom 元素子父节点的操作方法

最新推荐文章于 2022-10-31 20:46:17 发布

nnnnnnn3

最新推荐文章于 2022-10-31 20:46:17 发布

阅读量81

点赞数

本文链接：https://blog.csdn.net/nnnnnnn3/article/details/114044576

版权

<body>
<style>
    .addBox{
        width: 50px;
        height: 50px;
        border: 2px solid #b160ad;
    }
</style>
<div class="outBox">
    <button class="btn">press</button>
</div>
<button class="btn1">1</button>
<button class="btn1">2</button>
<button class="btn1">3</button>
<button class="btn2">a</button>
<button class="btn2">b</button>
<button class="btn2 delBtn">c</button>
<script src="./库/jquery-1.9.1.js"></script>
<script>
    //wrap unwrap
    $(".outBox").css({
        border:"1px solid #cbcbcb",
        width:"100px",
        height:"100px"
    })
    var addBox="<div class='addBox'></div>"
    $(".btn").wrap(addBox);
    $(".addBox").unwrap($(".outBox"))

    $(".btn1").wrap(addBox);//多个元素用wrap时分别包裹

    //wrapAll
    $(".btn2").wrapAll(addBox)//多个元素全部包进一个

    //wrapInner 把元素内部内容全部包裹
    $(".btn1").wrapInner(addBox)

    //替换 replaceWith / replaceAll
    // $(".btn1").replaceWith(function (index) {
    //     return("<div>"+index+"</div>")
    // })

    //复制元素 clone 参数:true false

    $("body").append(($(".btn2")).clone());

    //删除方法 empty remove
    //empty:删除当前元素所有子节点
    $(".btn1").empty();

    //remove: 删除元素及元素绑定的事件不可恢复
    $(".btn2").remove(".delBtn");

    //detach: 删除元素但保留元素的事件可恢复
</script>
</body>

nnnnnnn3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-02-24 jQuery中 dom 元素子父节点的操作方法

<body><style> .addBox{ width: 50px; height: 50px; border: 2px solid #b160ad; }</style><div class="outBox"> <button class="btn">press</button></div><button class="btn1"&gt
复制链接

扫一扫

2021-02-24 jQuery中 dom 元素子父节点的操作方法

“相关推荐”对你有帮助么？