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. Docs-.NET-C#-指南-语言参考-预处理器指令：#pragma checksum（C# 参考）

    ylbtech-Docs-.NET-C#-指南-语言参考-预处理器指令:#pragma checksum(C# 参考) 1.返回顶部 1. #pragma checksum(C# 参考) 2015/0 ...

  2. [转][osg]探究osg中的程序设计模式【目录】

    作者:3wwang 原文接连:http://www.3wwang.cn/html/article_104.html 前序 探究osg中的程序设计模式---开篇 探究osg中的程序设计模式---创造性模 ...

  3. 单例模式以及Python实现

    单例模式以及Python实现 单例模式 单例模式就是确保一个类只有一个实例.当你希望整个系统中,某个类只有一个实例时,单例模式就派上了用场.比如,某个服务器的配置信息存在在一个文件中,客户端通过App ...

  4. netty5客户端监测服务端断连后重连

    服务端挂了或者主动拒绝客户端的连接后,客户端不死心,每15秒重连试试,3次都不行就算了.修改下之前的客户端引导类(NettyClient,参见netty5心跳与业务消息分发实例),新增两个成员变量,在 ...

  5. 用KNN实现iris的4分类问题&测试精度

    import matplotlib.pyplot as plt from scipy import sparse import numpy as np import matplotlib as mt ...

  6. Spring MVC 数据模型与视图

      从控制器获取数据后,会装载数据到数据模型和视图中,然后将视图名称转发到视图解析器中,通过解析器解析后得到最终视图,最后将数据模型渲染到视图中,展示最终的结果给用户. 用ModelAndView来定 ...

  7. 原生JavaScript常用本地浏览器存储方法三(UserData IE Only)

    UserData的应用范围 serData是微软为IE专门在系统中开辟的一块存储空间,所以说只支持Windows+IE的组合,实际测试在2000(IE5.5).XP(IE6.IE7),Vista(IE ...

  8. SQL在线自助查询

    数据的日常查询统计分析是高频的需求,然而生产数据库由于安全.管理等方面的要求,仅仅对部分人员开发,例如DBA,总监等, 其他人员都要通过DBA才能查询数据,十分不便. 为了让DBA免于日常繁琐的工作, ...

  9. Error:(18, 51) java: -source 1.5 中不支持 diamond 运算符 (请使用 -source 7 或更高版本以启用 diamond 运算符)

    问题:主要是因为jdk版本不一样 解决: 方法一:List<String> list=new ArrayList<Stirng>(); 方法二:重新安装jdk8的版本(安装和配 ...

  10. 6、2、2 存到redis 中的验证码

    还没有用到rabittmq @RequestMapping("/getYZM/{phone}") public Object getYZM(@PathVariable String ...