jq: dom的查询

最新推荐文章于 2022-06-02 10:08:11 发布

星辰大海_enoch

最新推荐文章于 2022-06-02 10:08:11 发布

阅读量119

点赞数

本文链接：https://blog.csdn.net/u012872771/article/details/103666518

版权

父元素

parent(selecor) --> 直接父元素

        <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>dom的查询</title>
</head>
<body>
    <div>
        <ul>
            <li>li1</li>
            <li>li2</li>
            <div>
                <span>span1</span>
            </div>
            <li>li3</li>
            <li>li4</li>
            <li>li5</li>
            <span>span2</span>
        </ul>
    </div>
    <script src="http://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
         console.log( $('span').parent() )
    </script>
</body>
</html>

可以传css选择器指定:

        console.log( $('span').parent('div') )

提醒: 在下面的元素中，我已经把ul中的子元素span去掉了。

parents(selecor) --> 祖先元素

        console.log( $('span').parents() )

默认选择当前元素的所有祖先，传参css选择器可以指定。

closest(selecor|jQuery Object|element) -->最近的selector元素(必选)

选择当前元素的最近的指定父元素(可以越级)。

        console.log( $('span').closest('div') )

offsetParent() --> 查找最近有定位的附近元素，无参数

        console.log( $('span').offsetParent() )

子元素

children(selector) --> 找子元素(不包括后代)，可传参指定

        console.log( $('ul').children() )
console.log( $('ul').children('.item') )

find() --> 找后代元素

        console.log( $('ul').find('.span1') )

我们发现jq对象中还有一个prevObject属性，这是上一级(这里的上级是ul)的节点，由其我们可以在继续调用ul下的子元素

        $('ul').find('li:eq(3)').css('color', 'red').prevObject.find('li:eq(2)').css('color', 'blue')

这个方法已经被封装在end()方法中，可以使用end()操作。

end() --> 回退功能

        $('ul').find('li:eq(3)').css('color', 'red').end().find('li:eq(2)').css('color', 'blue').end().find('li:eq(1)').css('color', 'pink')

add() --> 同级添加到jq对象中的

可以传select选择器 element元素 jq对象 html

如果我们要写这样两行代码:

        $('li:first').css('background', 'orange');
$('li:last').css('background', 'orange');

可以使用add()使用链式方式:

        $('li:first').add('li:last').css('background', 'orange');

addBack() -> 在链式调用的时候返回加上前一个元素。

比如给第二个设置一个样式，第三四个设置一个样式，现在想把第二三四设置另一个样式。

        $('li:eq(1)').css('background', 'orange').nextAll().css('background', 'pink').addBack().css('color', '#fff');

星辰大海_enoch

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq: dom的查询

父元素 parent(selecor) --> 直接父元素 <!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>dom...
复制链接

扫一扫