码迷，mamicode.com
首页 > Web开发 > 详细

jQuery（九）：节点遍历

时间：2018-10-02 00:51:10      阅读：161      评论：0      收藏：0      [点我收藏+]

标签：技术   sibling   view   上下   enter   iphone   rip   上下文   点击   

一、遍历子元素

children()方法可以用来获取元素的所有子元素，语法如下：

技术分享图片

 示例：

<!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>节点遍历演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
            // 遍历子节点
            var $body=$("body").children();
            // 输出2 只考虑img和ul元素，不考虑ul里面的li元素
            alert("长度:"+$body.length);
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="美梦成真系列抽奖" />
    <ul>
        <li><a href="#">小米的MI 2手机</a></li><span class="hot">火爆销售中</span>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
</body>
</html>

 

效果：

技术分享图片

二、遍历同辈元素

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素，语法如下：

技术分享图片

示例：

<!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>节点遍历演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
            // 遍历子节点
            //var $body=$("body").children();
            // 输出2 只考虑img和ul元素，不考虑ul里面的li元素
            //alert("长度:"+$body.length);

            // 获取同辈节点
            // 第三个li标签的背景色改变
            $("li:eq(1)").next().css("background-color","green");
            // 第一个li标签的背景色改变
            $("li:eq(1)").prev().css("background-color","#F06");
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="美梦成真系列抽奖" />
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
</body>
</html>

 

效果：

技术分享图片

siblings()示例：

<!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>节点遍历演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
            // 遍历子节点
            //var $body=$("body").children();
            // 输出2 只考虑img和ul元素，不考虑ul里面的li元素
            //alert("长度:"+$body.length);

            // 获取同辈节点
            // 第三个li标签的背景色改变
            //$("li:eq(1)").next().css("background-color","green");
            // 第一个li标签的背景色改变
            //$("li:eq(1)").prev().css("background-color","#F06");
            // 除了第二个li标签，其它li标签的背景色都改变
            $("li:eq(1)").siblings().css("background-color","green");
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="美梦成真系列抽奖" />
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
</body>
</html>

 

效果：

技术分享图片

三、遍历前辈元素

jQuery中可以遍历前辈元素，方法如下：

  1. parent()：获取元素的父级元素。
  2. parents()：获取元素的祖先元素。

parent()获取父级元素示例：

<!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>节点遍历演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
            // 遍历子节点
            //var $body=$("body").children();
            // 输出2 只考虑img和ul元素，不考虑ul里面的li元素
            //alert("长度:"+$body.length);

            // 获取同辈节点
            // 第三个li标签的背景色改变
            //$("li:eq(1)").next().css("background-color","green");
            // 第一个li标签的背景色改变
            //$("li:eq(1)").prev().css("background-color","#F06");
            // 除了第二个li标签，其它li标签的背景色都改变
            //$("li:eq(1)").siblings().css("background-color","green");

            // 获取前辈元素
            // 父级ul改变背景色
            $("li:eq(1)").parent().css("background-color","green");
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="美梦成真系列抽奖" />
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
</body>
</html>

 

效果：

技术分享图片

parents()祖先元素示例：

<!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>节点遍历演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
            // 遍历子节点
            //var $body=$("body").children();
            // 输出2 只考虑img和ul元素，不考虑ul里面的li元素
            //alert("长度:"+$body.length);

            // 获取同辈节点
            // 第三个li标签的背景色改变
            //$("li:eq(1)").next().css("background-color","green");
            // 第一个li标签的背景色改变
            //$("li:eq(1)").prev().css("background-color","#F06");
            // 除了第二个li标签，其它li标签的背景色都改变
            //$("li:eq(1)").siblings().css("background-color","green");

            // 获取前辈元素
            // 父级ul改变背景色
            //$("li:eq(1)").parent().css("background-color","green");
            // 祖先级元素 整个body元素改变背景色
            $("li:eq(1)").parents().css("background-color","green");
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="美梦成真系列抽奖" />
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
</body>
</html>

 

效果：

技术分享图片

四、其他方法

1、jQuery遍历-each()

以每一个匹配的元素作为上下文来执行一个函数，例如：

技术分享图片

示例：

<!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>节点遍历其他方法演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
            $("input[type=‘button‘]").click(function(){
                // 遍历每一个li元素，弹出li元素的text值
                $("li").each(function(){
                    alert($(this).text());
                });
            });
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="1" />
    <img src="ad.jpg" alt="2" />
    <img src="ad.jpg" alt="3" />
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
    <input type="button" value="点击按钮" />
</body>
</html>

 

效果：

技术分享图片

示例2：i的含义

<!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>节点遍历其他方法演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
         /*    $("input[type=‘button‘]").click(function(){
                // 遍历每一个li元素，弹出li元素的text值
                $("li").each(function(){
                    alert($(this).text());
                });
            }); */
            // i表示图片的索引值，从0开始
            $("img").each(function(i){
                this.alt="test"+i+".jpg";
                console.log(this.alt);
            });
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="1" />
    <img src="ad.jpg" alt="2" />
    <img src="ad.jpg" alt="3" />
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
    <input type="button" value="点击按钮" />
</body>
</html>

 

效果：

技术分享图片

2、查找方法-find()

搜索所有与指定表达式匹配的元素，例如：

技术分享图片

示例：

<!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>节点遍历其他方法演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
         /*    $("input[type=‘button‘]").click(function(){
                // 遍历每一个li元素，弹出li元素的text值
                $("li").each(function(){
                    alert($(this).text());
                });
            }); */
            // i表示图片的索引值，从0开始
           /*  $("img").each(function(i){
                this.alt="test"+i+".jpg";
                console.log(this.alt);
            }); */

            // 查找方法
            $("li").find("span").css("color","green");
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="1" />
    <img src="ad.jpg" alt="2" />
    <img src="ad.jpg" alt="3" />
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
    <input type="button" value="点击按钮" />
</body>
</html>

 

效果：

技术分享图片

jQuery（九）：节点遍历

标签：技术   sibling   view   上下   enter   iphone   rip   上下文   点击   

原文地址：https://www.cnblogs.com/dotnet261010/p/9736169.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！