jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

　　图示解释：

　　举例：

　　jQuery parent() 方法

　　parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <style>

 .ancestors *{

     display: block;

     border: 2px solid lightgrey;

     color: lightgrey;

     padding: 5px;

     margin: 15px;

 }

 </style>

 <script src="jquery-1.12.0.min.js">

    </script>

     <script>

     $(document).ready(function(){

        $("li").parent().css({

                "color":"red",

                 "border":"1px solid green"

        })

     });

     </script>

 </head>

 <body>

 <div class="ancestors">

   <div style="width:500px;">div (曾祖父元素)

     <ul>ul (祖父元素,li的父元素)

       <li>li (父元素)

         <span>span</span>

       </li>

     </ul>

     </div>

     <div style="width:500px;">div (祖父元素)

     <p>p (父元素)

          <span>span</span>

       </p>

   </div>

 </div>

 </body>

 </html>

　　jQuery parents() 方法

　　parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <style>

 .ancestors *

 {

     display: block;

     border: 2px solid lightgrey;

     color: lightgrey;

     padding: 5px;

     margin: 15px;

 }

 </style>

 <script src="jquery-1.12.0.min.js">

    </script>

     <script>

     $(document).ready(function(){

        $("li").parents('div').css({

                "color":"red",

                 "border":"1px solid green"

        })

     });

     </script>

 </head>

 <body>

 <div class="ancestors">

   <div style="width:500px;">div (曾祖父元素)

     <ul>ul (祖父元素,li的父元素)

       <li>li (父元素)

         <span>span</span>

       </li>

     </ul>

     </div>

     <div style="width:500px;">div (祖父元素)

     <p>p (父元素)

          <span>span</span>

       </p>

   </div>

 </div>

 </body>

 </html>

　　jQuery parentsUntil() 方法

　　parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <style>

 .ancestors *

 {

     display: block;

     border: 2px solid lightgrey;

     color: lightgrey;

     padding: 5px;

     margin: 15px;

 }

 </style>

 <script>

         $(document).ready(function(){

           $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

         });

 </script>

 </head>

 <body class="ancestors"> body (曾曾祖父元素)

   <div style="width:500px;">div (曾祖父元素)

     <ul>ul (祖父元素)

       <li>li (父元素)

         <span>span</span>

       </li>

     </ul>

   </div>

 </body>

 </html>

　　jQuery children() 方法

　　children() 方法返回被选元素的所有直接子元素。

　　该方法只会向下一级对 DOM 树进行遍历。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <style>

 .ancestors *

 {

     display: block;

     border: 2px solid lightgrey;

     color: lightgrey;

     padding: 5px;

     margin: 15px;

 }

 </style>

   <script src="jquery-1.12.0.min.js"></script>

 <script>

         $(document).ready(function(){

           $("li").children().css({"color":"red","border":"2px solid red"});

         });

 </script>

 </head>

 <body class="ancestors"> body (曾曾祖父元素)

   <div style="width:500px;">div (曾祖父元素)

     <ul>ul (祖父元素)

       <li>li (父元素)

         <span>span</span>

       </li>

     </ul>

   </div>

 </body>

 </html>

　　Query find() 方法

　　find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

.ancestors *

{

    display: block;

    border: 2px solid lightgrey;

    color: lightgrey;

    padding: 5px;

    margin: 15px;

}

</style>

  <script src="jquery-1.12.0.min.js"></script>

<script>

        $(document).ready(function(){

          $("div").find('li').css({"color":"red","border":"2px solid red"});

        });

</script>

</head>

<body class="ancestors"> body (曾曾祖父元素)

  <div style="width:500px;">div (曾祖父元素)

    <ul>ul (祖父元素)

      <li>li (父元素)

        <span>span</span>

      </li>

    </ul>

  </div>

</body>

</html>

jQuery遍历(1)的更多相关文章

  1. 【转】 jquery遍历json数组方法

    $(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...

  2. jQuery 遍历函数

    转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...

  3. Jquery遍历选中的input标签

    $("input[name='chkAgent']:[checked]").each(function () { alert($(this).attr("value&qu ...

  4. jquery遍历

    http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和 ...

  5. jQuery 遍历(上)

    目录: 一:定义二:遍历 DOM三:jQuery 参考手册 - 遍历 定义:什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找" ...

  6. jquery 遍历 数组1

    使用了jquery有段时间了,整理下jquery中的遍历问题. 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tr ...

  7. JQuery：JQuery遍历详解

    JQuery:遍历一.什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个 ...

  8. jquery遍历对象,数组,集合

    1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTM ...

  9. jQuery 遍历函数(w3school)

    jQuery 遍历函数包括了用于筛选.查找和串联元素的方法.   函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .childr ...

  10. Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数

    JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数                             ...

随机推荐

  1. 如何禁用Chrome浏览器的Flash

    使用Chrome浏览器时,经常会因为Flash而导致CPU占用过多,系统变慢.如果你常访问的网站很少用到的Flash或者页面上的Flash不是网站的核心功能,那么建议禁用Flash.禁用Flash的步 ...

  2. git git push某一次的commit记录

    $ git push <remote name> <commit hash>:<remote branch name> # Example:$ git push o ...

  3. 重启WMS服务

    一.重启API服务 查看进程ps ef|grep java 进入目录 cd /usr/local/tomcat-api/bin ./shutdown.sh ps –ef|grep 查看服务是否真的停止 ...

  4. IoAllocateMdl，MmProbeAndLockPages的用法

    转载地址:https://blog.csdn.net/wdykanq/article/details/7752909 IoAllocateMdl,MmProbeAndLockPages的用法 第一,M ...

  5. 报错：MetaException(message:Version information not found in metastore. )

    报错背景: CDH安装完成hive后启动失败. 报错现象: [main]: Metastore Thrift Server threw an exception... MetaException(me ...

  6. mybatis 级联

    级联是一个数据库实体的概念.一对多的级联,一对多的级联,在MyBatis中还有一种被称为鉴别器的级联,它是一种可以选择具体实现类的级联. 级联不是必须的,级联的好处是获取关联数据十分便捷,但是级联过多 ...

  7. array_map array_walk

    $config = [ => [], => [], => [] ]; array_map(function($key) use ($config){ print_r($key); d ...

  8. pca数学原理（转）

    PCA的数学原理 前言 数据的向量表示及降维问题 向量的表示及基变换 内积与投影 基 基变换的矩阵表示 协方差矩阵及优化目标 方差 协方差 协方差矩阵 协方差矩阵对角化 算法及实例 PCA算法 实例 ...

  9. 比较oracle表字段是否一致

    SELECT M.OWNER ,M.TABLE_NAME ,M.COLUMN_ID ,M.COLUMN_NAME ,M.DATA_TYPE ,M.DATA_LENGTH ,N.OWNER ,N.TAB ...

  10. 14点睛Spring4.1-脚本编程

    转发:https://www.iteye.com/blog/wiselyman-2212678 14.1 Scripting脚本编程 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源 ...