jq 节点操作

最新推荐文章于 2023-06-16 19:59:01 发布

哈哈绝

最新推荐文章于 2023-06-16 19:59:01 发布

阅读量232

点赞数 1

分类专栏： jq 学习笔记

本文链接：https://blog.csdn.net/qq_41194704/article/details/103149003

版权

学习笔记同时被 2 个专栏收录

33 篇文章 2 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

jq 节点操作

获取节点
下表中的所有方法都具有筛选功能，就是都有参数
如 $(‘h2’).prev(‘div’) 意思为获取h2的前一个div节点

方法	作用
first()	获取集合中的第一个节点
last()	获取集合中的最后一个节点
prev()	获取前一个节点
next()	获取后一个节点
nextAll()	获取下面的所有兄弟节点
siblings()	获取所有兄弟节点，不包括本身
children()	获取直接子元素只选择一层
find()	获取后代子元素参数是必须的，如要选择所有可以用*选择器
parent()	获取父节点
parents()	获取祖先节点
closest()	获取当前最近的祖先元素，唯一最近的元素参数是必须的

例子如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li class="active">li5
            <a>我是直接子元素<span>haha</span></a>
            <span>我是直接子元素</span>
        </li>
        <li>li6</li>
        <li>li7</li>
        <li>li8</li>
        <li>li9</li>
        <li>li10</li>
    </ul>
    <script>
        //获取节点
        //下面的所有方法都具有筛选功能
        //获取集合中的第一个元素 first()
        $('li').first().css('color', 'red');
        //获取集合中的最后一个元素 last()
        $('li').last().css('color', '#ccc');
        //获取前一个节点 prev()
        $('.active').prev().html('我是前一个');
        //获取后一个节点 next()
        $('.active').next().html('我是后一个')
        //获取下面的所有兄弟节点 nextAll()
        $('.active').nextAll().css('background', 'yellow');
        //获取所有兄弟节点 siblings()
        $('.active').siblings().css('font-size', '17px');
        //获取直接子元素 children()
        $('.active').children().css('border','1px solid black')
        //获取后代子元素 find()
        $('.active').find('*').css('border','1px solid red')
        //父节点 parent()
        $('.active').parent().css('border', '1px solid greenyellow')
        //祖先节点 parents()
        $('.active').parents().css('background', 'rgba(100,100,100,.2)');
        //获取当前最近的祖先节点 closest()
        $('.active').closest('ul').css('box-shadow', '1px 1px 5px red')
    </script>
</body>
</html>

添加节点
append() 与appendTO的区别在于后续链式操作的时候对象不同
append prepend before after对页面的已经有的元素，做的都是剪切操作
//解决办法不用变量，用字符串就可以解决这个问题如(’< span>aaa</ span>’)
//或在定义变量的时候就直接用 let span=’ < span>ssss</ span> ’

方法	作用
append()	将节点添加到指定节点的里面的最后面
appendTo()	将节点添加到指定节点的里面的最后面
prepend()	将节点添加到指定节点的里面的最前面
prependTo()	将节点添加到指定节点的里面的最前面
before()	将节点添加到指定节点的上面，形成上一个兄弟元素
insertBefore()	将节点添加到指定节点的上面，形成上一个兄弟元素
after()	将节点添加到指定节点的下面，形成下一个兄弟节点
insertAfter()	将节点添加到指定节点的下面，形成下一个兄弟节点
clone()	克隆节点，clone的参数是布尔值 false 默认 true 会克隆操作的行为
remove()	删除节点，不会保存操作的行为
detach()	detach() 对于删除的节点会保存操作的行为

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>

<body>
    <div style="border: 1px solid black;">1111</div>
    <script>
        //添加节点 
        //append() appendTo() 将节点添加到指定节点的里面的最后面
        $span = $('<span>2222</span>')
        // $('div').append($span); ///11112222
        // $span.appendTo($('div'));//11112222
        //append() 与appendTO的区别在于后续链式操作的时候对象不同 append是div appendTo是span
        //prepend prependTo() 将节点添加到指定节点的里面的最前面
        // $('div').prepend($span); //22221111
        // $span.prependTo($('div'));//22221111
        //before()  insertBefore() 将节点添加到指定节点的上面，形成上一个兄弟节点
        // $('div').before($span) //2222
                                  //1111
        // $span.insertBefore($('div')); //2222
                                         //1111
        //after() insertAfter() 将节点添加到指定节点的下面，形成下一个兄弟节点
        // $('div').after($span);  //1111
                                  //2222
        // $span.insertAfter($('div')); //1111
                                       //2222
        //问题：为什么会出现上面的结果呢，那是因为append prepend before after对页面的已经有的元素，做的都是剪切操作
        //解决办法 不用变量，用字符串就可以解决这个问题 如('<span>aaa</span>')
        //或在定义变量的时候就直接用 let span='<span>ssss</span>'
        //克隆节点 clone() 参数是布尔值 默认为false ，参数为true时，会克隆操作的行为
        $('div').click(function () {
            alert(123)
        })
        //false
        // $('div').clone().insertAfter($('div'))
        //true
        // $('div').clone(true).insertBefore($('div'))
        //删除节点 remove detach
        //remove 与detach 都可以进行删除操作，区别是，detach 会保存操作  remove 不会
        //remove()不会保存操作
        // let $s = $('div').remove();
        // $('body').append($s)
        //detach会保存操作
        // let $s = $('div').detach();
        // $('body').append($s)
    </script>
</body>
</html>