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. Sword zlog日志库使用

    配置文件*.conf 配置文件具体内容如下: [global] #改变量可以不写,默认是true,如果使用设置为true时,Zlog就会严格检查所用格式和规则,否则,忽略所用格式和规则. strict ...

  2. Qt编写自定义控件72-提示进度条

    一.前言 我们在很多的安装包中,在安装过程中,经常可以在底部看到一个漂亮的进度条,上面悬浮着显示对应的进度,然后底部进度多种颜色渐变展示,Qt自带的进度条或者操作系统的进度条样式,不够炫,这次索性直接 ...

  3. 123457123456#2#----com.ppGame.XueYingYu76--前拼后广--儿童英语_pp

    com.ppGame.XueYingYu76--前拼后广--儿童英语_pp

  4. oracle存储过程(带参数的存储过程)

    带参数的存储过程 举例:为指定的员工涨100元的工资,打印涨前和涨后的工资 如果带参,需要指定是输入参数还是输出参数 create or replace procedure raisesalary(e ...

  5. doris: shell invoke .sql script for doris and passing values for parameters in sql script.

    1. background in most cases, we want to execute sql script  in doris  routinely. using azkaban, to l ...

  6. Day1作业2：多层菜单查询

    流程图: code: #!/usr/bin/env python # encoding: utf-8 # Auther:ccorz Mail:ccniubi@163.com Blog:http://w ...

  7. DBGridEh中根据单价和数量如何计算金额？

    单价和数量输入完后,在数量单元格往任何方向移动(上下左右),金额都能自动计算.如何实现? 不要在UI元素的事件中计算字段,你可以在单价字段和数量字段的OnChange事件中进行计算.假设数据集名称为D ...

  8. SPSS 2019年10月24日 今日学习总结

    2019年10月24日今日课上内容1.SPSS掌握基于键值的一对多合并2.掌握重构数据3.掌握汇总功能 内容: 1.基于键值的一对多合并 合并文件 添加变量 合并方法:基于键值的一对多合并 变量 2. ...

  9. 关于mathtype6.9在office2010中出现The MathType can not be found的问题

    本文问题解决方法参考:https://blog.csdn.net/yiran103/article/details/41694843 自从重装了系统,安装mathtype总是提示The MathTyp ...

  10. composer安装扩展包异常

    我是tp5.1下,用composer安装扩展包,在命令行运行,无任何不反应,不下载也不报错,这时,我们先ctrl+c退出执行的命令,然后在tp5.1根目录下,找到composer.json文件,并用编 ...