Jquery选择器的层次选择器

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

  1. jQuery( "parent > child" )

  2. jQuery( "ancestor descendant" )

  3. jQuery( "prev + next" )

  4. jQuery( "prev ~ siblings" )

1.jQuery( "parent > child" ) 的意思就是 选取parent 节点下的child节点元素 注意是直接子元素 比如:$(“div >p”) 只有内容为“是div的直接子元素1”被选中。

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

                article>
            div>

完成的例子代码:


<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选择器的层次选择器_第1张图片

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>

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


<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选择器的层次选择器_第2张图片

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


<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选择器的层次选择器_第3张图片

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


<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选择器的层次选择器_第4张图片

总结:以上是所有的层次选择器,都是比较长用的选择器,1和2,3和4比较容易搞不明白,还是得用的熟练的就能很很好的理解了,书读百遍其意自现,加油

你可能感兴趣的:(前段框架Jquery)