一、遍历子元素

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（九）：节点遍历的更多相关文章

  1. jquery 源码解析 节点遍历

    jquery遍历,用于根据其相对于其他元素的关系来查找或选取html元素,以某项选择开始,并沿着这个选择移动,知道移动被称为对dom进行遍历 ☑ <div> 元素是 <ul> ...

  2. Jquery节点遍历

    jquery 节点遍历 <html> <head> <title></title> <script src="Jquery/jquery ...

  3. jQuery 源码分析(十九) DOM遍历模块详解

    jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...

  4. jQuery 参考手册 - 遍历

    jQuery 参考手册 - 遍历 jQuery Ajax jQuery 数据 jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数描述 .add()将元素添加到匹 ...

  5. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  6. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  7. 原生js使用forEach()与jquery使用each遍历数组，return false 的区别

    原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...

  8. Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  9. jQuery包裹节点用法完整示例

    本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...

随机推荐

  1. 双系统(win8.1+ubuntu14.04)删除win下分区导致grub rescue解决方案

    几个grub rescue下的命令的含义: set 设置环境变量 ls 查看设备 insmod 加载模块 root 指定用于启动系统的分区 prefix 设定grub启动路径 操作流程: 1.  先使 ...

  2. django-salmonella的使用

    一.django-salmonella介绍 它是一个Django管理员raw_id_fields小部件替换,用于处理更改时显示对象的字符串值,并且可以通过模板覆盖. 二.安装 1.下载 $ pip i ...

  3. 在ubuntu16安装supervisor 并 启动 .net core.

    1. 安装supervisor apt-get install supervisor 2.新建supervisor配置文件.使用以下命令在linux 命令行 echo_supervisord_conf ...

  4. SonarQube学习入门指南

    1. 什么是SonarQube? SonarQube 官网:https://www.sonarqube.org/ SonarQube®是一种自动代码审查工具,用于检测代码中的错误,漏洞和代码异味.它可 ...

  5. Win8/Win10下程序经常无响应的解决办法

    如果你使用Win8/Win10系统时经常出现程序无响应的问题不仿试下如下解决办法. 表现症状: 任何程序都有可能出现无响应(记事本.Visual Studio.QQ.视频播放器等) 一旦一个程序出现未 ...

  6. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  7. c#多线程 Invoke方法的使用

    在多线程编程中,我们经常要在工作线程中去更新界面显示,而在多线程中直接调用界面控件的方法是错误的做法,Invoke 和 BeginInvoke 就是为了解决这个问题而出现的,使你在多线程中安全的更新界 ...

  8. ImportError: cannot import name 'main'的解决办法

    一.现象 使用pip出现如下提示: Traceback (most recent call last): File "/usr/bin/pip3", line 9, in < ...

  9. HBase最佳实践-用好你的操作系统

    终于又切回HBase模式了,之前一段时间因为工作的原因了解接触了一段时间大数据生态的很多其他组件(诸如Parquet.Carbondata.Hive.SparkSQL.TPC-DS/TPC-H等),虽 ...

  10. Tcpdump 的用法

    1.抓取回环网口的包:tcpdump -i lo 2.防止包截断:tcpdump -s0 3.以数字显示主机及端口:tcpdump -n 第一种是关于类型的关键字,主要包括host,net,port, ...