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. VsCode写Python代码！这代码简直和大神一样规范！太漂亮了！

    VsCode写Python代码!这代码简直和大神一样规范!太漂亮了!    转 https://www.jianshu.com/p/636306763d89 VsCode虽然没有Pycharm的功能齐 ...

  2. 详解Django rest_framework实现RESTful API

    这篇文章主要介绍了详解Django rest_framework实现RESTful API,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 一.什么是REST 面向资源是R ...

  3. dtypes.py", line 499 _np_qint8 = np.dtype([("qint8", np.int8, (1,)])

    Traceback (most recent call last): File "<stdin>", line 1, in <module> File &q ...

  4. Python3入门（十三）——常用内置模块之URL模块urlib

    见名知意,一系列用于URL的操作 当然了,主要是用于web爬虫等处理(发送Get/Post请求,处理响应等),暂不展开, 参考:https://www.liaoxuefeng.com/wiki/101 ...

  5. Python高级笔记（六）-- property属性【重要】

    1. property属性 目的:简化逻辑流程 class Goods(object): @property def size(self): return 100 obj = Goods() ret ...

  6. Qt编写自定义控件60-声音波形图

    一.前言 这个控件源自于一个音乐播放器,在写该音乐播放器的时候,需要将音频的数据转换成对应的频谱显示,采用的fmod第三方库来处理(fmod声音系统是为游戏开发者准备的革命性音频引擎,非常强大和牛逼) ...

  7. VSIX 插件

    https://blog.csdn.net/lynchee/article/details/83065608

  8. 【嵌入式硬件Esp32】ESP32 正确下载姿势

    程序的正确下载步骤,以8M flash为例子: 一.硬件连接 ESP32 的运行状态主要由 GPIO0 决定 二.ESP32 Flash 地址配置 ESP32 在编译时,通过 make menucon ...

  9. 微信浏览器内建的WeixinJSBridge 实现“返回”操作

    微信浏览器内建的WeixinJSBridge 实现“返回”操作 WeixinJSBridge.call('closeWindow');

  10. PHP mbstring通过多字节字符串扩展处理中文查找、计算问题

    最近有个需求有到了mbstring相关的函数进行中文处理,如下: mb_strpos mb_strlen 过程中遇到一点比较奇怪的问题,及在本地环境运行没有问题 但我们生产环境是2台服务器,其中一台正 ...