jQuery之DOM操作详细

最新推荐文章于 2024-07-05 14:21:58 发布

只看五分钟佩奇的小姑姑

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量287

点赞数

文章标签： jquery dom

本文链接：https://blog.csdn.net/Aloe_904/article/details/78407711

版权

前端的尘封往事专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquerydom</title>
    <script type="text/javascript" src="../jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $(function(){
        $('#div2').parents().css('background','#ddd')
        $('#div2').closest('#div1').css('background','#ff9')
        $('#div2').siblings().css('background','pink')
        $('#div2').next().css('background','red')
        $('p').prevAll().css('background','green')

        $('#div3').clone().appendTo($('span'))
        $('#span').wrap('<p>');//每个ID名为span的元素的外面会被包装一对<p></p>
        $('#span').wrapAll('<p>');//所有ID名为span的元素的外面会被包装一对<p></p>


    })
    </script>

</head>
<body>
    <div id="div1">aaa
        <div id="div2">bbb</div>
        <span>span</span>
        <p>p</p>
    </div>
    <div id="div3"> <span id="span">span</span></div>
</body>
</html>
<!-- 
parents():获取当前元素所有的祖先节点，参数就是筛选功能
closest():获取最近的指定的祖先节点(包括当前元素自身)，必须要写筛选的参数，只能找到一个元素
siblings():找到所有的兄弟节点，参数也是筛选功能
next():获取最近的兄弟节点
nextAll():获取下面所有的兄弟节点
prevAll():获取上面所有的兄弟节点
prevUntil(),parentsUntil(),nextUntil();
clone():节点的复制，可以接收一个参数ture，作用是可以复制之前的操作行为
wrap():包装

wrapAll():整体包装
wrapInner():内部包装
unwrap():删除包装（删除父级，不包括body元素）
add():添加元素且是组合在一起
slice():分割元素。第一个参数是开始下标，第二个参数是结束下标。
-->