zoukankan      html  css  js  c++  java
  • JQuery 举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历

    转载 http://www.jb51.net/article/88157.htm

    一、jQuery的向下遍历

    <script src="../JS/Extend.js"></script>
     <script src="../JS/my.js"></script>
     <link type="text/css" rel="stylesheet" href="../CSS3/my.css">
     
    </head>
    <body>
    <div id="div1">
     <div id="div2">
      <p id="p1">
       <a>hello world</a>
      </p>
     </div>
    </div>
     
    #div1{
     500px;
     height:200px;
     border:3px solid coral;
    }
     
    #div2{
     400px;
     height:150px;
     margin-top:10px;
     margin-left:10px;
     border: 3px solid coral;
    }
     
    #p1{
     margin-left:10px;
     margin-top:10px;
     150px;
     height:80px;
     border:3px solid coral;
    }

    1.children()方法的元素遍历

    $(document).ready( function (){
     $("#div1").children().css({border:"3px solid black"});
    });

    可以看到此时div1的儿子div2的边框颜色变成了黑色。

    2.find()方法的元素遍历

    $(document).ready( function (){
    
     $("#div1").find("a").css({border:"3px solid grey"});
    });

    可以看到此时div1的重孙子a元素出现了灰色边框。、

    .children()与.find()方法的区别是:children只能对元素的儿子元素进行修改,而find则可以对其所有的子元素进行修改。

    二、jQuery的向上遍历
    顾名思义,向上遍历就是从子集找到父集。

    .parent()
    $(document).ready( function (){
     $("#div2").parent().css({border:"3px solid black"});
     });

    div2的父元素div1边框发生了改变

    .parents()
    $(document).ready( function (){
     $("a").parents().css({border:"3px solid grey"});
    });

    a元素除外,a元素的所有父级元素都发生了改变

    .parentUntil()
    $(document).ready( function (){
      $("a").parentsUntil("#div1").css({border:"3px solid grey"})
    });

    从a元素到div1元素之前的元素边框发生了改变。

    三个方法的区别是,.parent()只能向上遍历一层;.parents()则可以指定父级元素的id进行跨越遍历;.parentUntil()则具有区间性质,将会遍历包含于区间中的所有元素。

    三、遍历 - 同级(兄弟)
    同级元素拥有相同的父级元素。

    在 DOM 树中水平遍历。

    有许多有用的方法让我们在 DOM 树进行水平遍历:

    • siblings()
    • next()
    • nextAll()
    • nextUntil()
    • prev()
    • prevAll()
    • prevUntil()

    1.JQuery siblings()

    siblings() 方法返回被选元素的所有同胞元素。

    <section>
     <h1>文章的<span>标题</span>啦</h1>
     <p>文章的内容内容内容内容内容内容</p>
     <p>结尾部分</p>
    </section>
    $(document).ready(function () {
     // 获取h1标签的所有同级元素
     var elem = $('h1').siblings();
     console.log(elem); // p p 
    });

    2.JQuery next()

    next() 方法返回被选元素的下一个同胞元素

    <section>
     <h1>文章的<span>标题</span>啦</h1>
     <p>文章的内容内容内容内容内容内容</p>
     <p>结尾部分</p>
    </section>
    $(document).ready(function () {
     // 获取h1标签的下一个同级元素
     var elem = $('h1').next();
     console.log(elem); // p
    });

    3.JQuery nextAll()

    nextAll() 方法返回被选元素的所有跟随的同胞元素。

    <section>
     <h1>文章的<span>标题</span>啦</h1>
     <p>文章的内容内容内容内容内容内容</p>
     <p>结尾部分</p>
    </section>
    $(document).ready(function () {
     // 获取p标签的后面的所有同级元素
     var elem = $('p').nextAll();
     console.log(elem); // p
    });

    4.JQuery nextUntil()

    nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

    <section>
     <h1>文章的<span>标题</span>啦</h1>
     <p>文章的内容内容内容内容内容内容</p>
     <p>结尾部分</p>
     <h2>重点注意</h2>
    </section>
    $(document).ready(function () {
     // 获取
     var elem = $('h1').nextUntil('h2');
     console.log(elem); // p p 
    });

    5.JQuery prev() & prevAll() & prevUntil()

    prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同级元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。

    一、jQuery的向下遍历

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <script src="../JS/Extend.js"></script>
     <script src="../JS/my.js"></script>
     <link type="text/css" rel="stylesheet" href="../CSS3/my.css">
     
    </head>
    <body>
    <div id="div1">
     <div id="div2">
      <p id="p1">
       <a>hello world</a>
      </p>
     </div>
    </div>
     
    #div1{
     500px;
     height:200px;
     border:3px solid coral;
    }
     
    #div2{
     400px;
     height:150px;
     margin-top:10px;
     margin-left:10px;
     border: 3px solid coral;
    }
     
    #p1{
     margin-left:10px;
     margin-top:10px;
     150px;
     height:80px;
     border:3px solid coral;
    }

    1.children()方法的元素遍历

    1
    2
    3
    $(document).ready( function (){
     $("#div1").children().css({border:"3px solid black"});
    });

    可以看到此时div1的儿子div2的边框颜色变成了黑色。

    2.find()方法的元素遍历

    1
    2
    3
    $(document).ready( function (){
     $("#div1").find("a").css({border:"3px solid grey"});
    });

    可以看到此时div1的重孙子a元素出现了灰色边框。、

    .children()与.find()方法的区别是:children只能对元素的儿子元素进行修改,而find则可以对其所有的子元素进行修改。

    二、jQuery的向上遍历
    顾名思义,向上遍历就是从子集找到父集。

    1
    2
    3
    4
    .parent()
    $(document).ready( function (){
     $("#div2").parent().css({border:"3px solid black"});
     });

    div2的父元素div1边框发生了改变

    1
    2
    3
    4
    .parents()
    $(document).ready( function (){
     $("a").parents().css({border:"3px solid grey"});
    });

    a元素除外,a元素的所有父级元素都发生了改变

    1
    2
    3
    4
    .parentUntil()
    $(document).ready( function (){
      $("a").parentsUntil("#div1").css({border:"3px solid grey"})
    });

    从a元素到div1元素之前的元素边框发生了改变。

    三个方法的区别是,.parent()只能向上遍历一层;.parents()则可以指定父级元素的id进行跨越遍历;.parentUntil()则具有区间性质,将会遍历包含于区间中的所有元素。

    三、遍历 - 同级(兄弟)
    同级元素拥有相同的父级元素。

    在 DOM 树中水平遍历。

    有许多有用的方法让我们在 DOM 树进行水平遍历:

    • siblings()
    • next()
    • nextAll()
    • nextUntil()
    • prev()
    • prevAll()
    • prevUntil()

    1.JQuery siblings()

    siblings() 方法返回被选元素的所有同胞元素。

    1
    2
    3
    4
    5
    <section>
     <h1>文章的<span>标题</span>啦</h1>
     <p>文章的内容内容内容内容内容内容</p>
     <p>结尾部分</p>
    </section>
    1
    2
    3
    4
    5
    $(document).ready(function () {
     // 获取h1标签的所有同级元素
     var elem = $('h1').siblings();
     console.log(elem); // p p
    });

    2.JQuery next()

    next() 方法返回被选元素的下一个同胞元素

    1
    2
    3
    4
    5
    <section>
     <h1>文章的<span>标题</span>啦</h1>
     <p>文章的内容内容内容内容内容内容</p>
     <p>结尾部分</p>
    </section>
    1
    2
    3
    4
    5
    $(document).ready(function () {
     // 获取h1标签的下一个同级元素
     var elem = $('h1').next();
     console.log(elem); // p
    });

    3.JQuery nextAll()

    nextAll() 方法返回被选元素的所有跟随的同胞元素。

    1
    2
    3
    4
    5
    <section>
     <h1>文章的<span>标题</span>啦</h1>
     <p>文章的内容内容内容内容内容内容</p>
     <p>结尾部分</p>
    </section>
    1
    2
    3
    4
    5
    $(document).ready(function () {
     // 获取p标签的后面的所有同级元素
     var elem = $('p').nextAll();
     console.log(elem); // p
    });

    4.JQuery nextUntil()

    nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

    1
    2
    3
    4
    5
    6
    <section>
     <h1>文章的<span>标题</span>啦</h1>
     <p>文章的内容内容内容内容内容内容</p>
     <p>结尾部分</p>
     <h2>重点注意</h2>
    </section>
    1
    2
    3
    4
    5
    $(document).ready(function () {
     // 获取
     var elem = $('h1').nextUntil('h2');
     console.log(elem); // p p
    });

    5.JQuery prev() & prevAll() & prevUntil()

    prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同级元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。

  • 相关阅读:
    Prometheus09 promtool工具探索
    Prometheus04 prometheus查询语言
    03K8S之service工作方式及使用
    Prometheus08 pushgateway
    prometheus06 grafana可视化
    prometheus05 prometheus使用案例
    Prometheus03 cAdvisorDocker容器监控
    02K8S之自主式Pod
    Prometheus07 blackbox
    javascript实现tab切换效果
  • 原文地址:https://www.cnblogs.com/luoyeyue/p/8053724.html
Copyright © 2011-2022 走看看