jQuery select 级联 jquery层级选择器

转载

mob64ca1408d5ff 2023-10-03 20:53:21

文章标签 jQuery select 级联 jquery html 选择器 jQuery 文章分类 jQuery 前端开发

上一篇主要学习了一些，简单的Jquery选择器，但是都是开发中比较常用的，这篇主要学习了一些，层次选择器，也是比较简单常用的选择器。
我们来看下，层次选择器都有哪些：

jQuery( "parent > child" )
jQuery( "ancestor descendant" )
jQuery( "prev + next" )
jQuery( "prev ~ siblings" )

1.jQuery( "parent > child" ) 的意思就是 选取parent 节点下的child节点元素注意是直接子元素

<div class="name" >
                     <p>
                        是div的直接子元素1
                    </p>
                <article>
                    <p>
                        不是div的直接子元素2
                    </p>

                </article>
            </div>

完成的例子代码：

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

        <style>
        </style>
    </head>
    <style>
        .name {
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
            padding: 10px;
        }
    </style>

    <body>
        <script>
            $(function() {//当html加载完成的时候指向方法中的代码想当于js的Window.onload=
                //子选择器
                //  $('div > p') 选择所有div元素里面的子元素P 直接子元素
                $("div >p").css("border", "2px solid red");
            });
        </script>
        <div class="name" id="name">
            <p>
                我是第一个p实在div的孩子节点
            </p>
        </div>
        <div class="name" >
            <article>
                <p>
                    不是div的直接子元素1
                </p>
            </article>
        </div>
        <div class="name" >
            <article>
                <p>
                    不是div的直接子元素2
                </p>
            </article>
        </div>
    </body>
</html>

效果图:

jQuery select 级联 jquery层级选择器_html

2.jQuery( "ancestor descendant" ) 选择器的就是选中，ancestor 下边的所有 descendant 元素，可以是直接子元素，也可以是，简介子元素比如：$("div p") 内容是“ 是div的直接子元素1”和“ 不是div的直接子元素2”的p标签都会被选中

<div class="name" >
                     <p>
                        是div的直接子元素1
                    </p>
                <article>
                    <p>
                        不是div的直接子元素2
                    </p>

                </article>
            </div>

可运行代码和效果图如下：、

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

        <style>
        </style>
    </head>
    <style>
        .name {
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
            padding: 10px;
        }
    </style>

    <body>
        <script>
            $(function() {//当html加载完成的时候指向方法中的代码想当于js的Window.onload=
                //子选择器
                //  $('div  p') 选择所有div元素里面的子元素P 
                $("div p").css("border", "2px solid red");

            });
        </script>
        <div class="name" id="name">
            <p>
                我是第一个p实在div的孩子节点
            </p>
        </div>
        <div class="name" >
            <article>
                <p>
                    不是div的直接子元素1
                </p>
            </article>
        </div>
        <div class="name" >
            <article>
                <p>
                    不是div的直接子元素2
                </p>
        </article>
        </div>
    </body>
</html>

jQuery select 级联 jquery层级选择器_jQuery select 级联_02

3.jQuery( "prev + next" ) 是指 prev选择器的next元素被选中，注意，只能是prev相邻的下一个兄弟元素，只能选中1个或者0个，代码和效果图如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
        <style>
        </style>
    </head>
    <style>
        .name {
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
            padding: 10px;
        }
    </style>
    <body>
        <script>
            $(function() {//当html加载完成的时候指向方法中的代码想当于js的Window.onload=
                //子选择器
                //  $('#name+div') 选择所有ID为name的相邻的div元素 背景颜色变蓝色    
                $("#name+div").css("background", "blue");
            });
        </script>
        <div class="name" id="name">
            <p>
                我是第一个p实在div的孩子节点
            </p>
        </div>
        <div class="name" >
            <article>
                <p>
                    不是div的直接子元素1
                </p>
            </article>
        </div>
        <div class="name" >
            <article>
                <p>
                    不是div的直接子元素2
                </p>
            </article>
        </div>

    </body>
</html>

jQuery select 级联 jquery层级选择器_选择器_03

4.jQuery( "prev ~ siblings" ) 汉语意思就是选取prev 后边的所有 siblings 元素，注意就是，所有与prev的同级slibling元素，代码和图如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
        <style>
        </style>
    </head>
    <style>
        .name {
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
            padding: 10px;
        }
    </style>
    <body>
        <script>
            $(function() {//当html加载完成的时候指向方法中的代码想当于js的Window.onload=
                //子选择器
                //  $('#name~div') 选择所有ID为name的同级div元素 背景颜色变蓝色        
                $("#name~div").css("background", "blue");
            });
    </script>
        <div class="name" id="name">
            <p>
                我是第一个p实在div的孩子节点
            </p>
        </div>
        <div class="name" >
            <article>
                <p>
                    不是div的直接子元素1
                </p>
            </article>
        </div>
        <div class="name" >
            <article>
                <p>
                    不是div的直接子元素2
                </p>
            </article>
        </div>
    </body>
</html>

jQuery select 级联 jquery层级选择器_jQuery_04