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. Leetcode: Longest Common Subsequence

    Given two strings text1 and text2, return the length of their longest common subsequence. A subseque ...

  2. flutter Sliver滑动视图组件

    import 'package:flutter/material.dart'; import './model/post.dart'; class SliverDemo extends Statele ...

  3. Spring cloud微服务安全实战-5-4请求转发及退出

    步骤1234已经完成 下面处理 5678这几步.zuul在转发的时候 把请求头加上 获取订单信息 加一个按钮,登陆成功后,去拿订单的信息. 展示获取到的订单信息 ts代码 ts内定义order对象 定 ...

  4. source insight 使用配置（私人）

    1.输入两个空格,两个空格全消失,前后的字粘在一起显示,不想这样,就取消下图的勾.

  5. k8s记录-kubeadm安装（一）（转载）

    配置 kubeadm 概述 安装 kubernetes 主要是安装它的各个镜像,而 kubeadm 已经为我们集成好了运行 kubernetes 所需的基本镜像.但由于国内的网络原因,在搭建环境时,无 ...

  6. Eclipse下代码字体背景变红/变绿/变黄原因

    如下图所示:不知道怎么,在eclipse IDE手抖按了啥,就成这样了. 后来在stackoverflow提问后,找到了原因.eclipse 有测试代码覆盖率的功能,也就是执行Run——>Cov ...

  7. 单独使用MyBatis的简单示例

    单独使用MyBatis的简单示例:mybaties-config.xml:MyBatis配置文件 <?xml version="1.0" encoding="UTF ...

  8. tensor&ndarray&int、float

    (1)如果tensor只有一个元素,然后转换成int或者float类型的时候直接用int()或者float()就可以了: (2)如果tensor含有多个元素,转换成ndarray时就要用x.detac ...

  9. 【Leetcode_easy】905. Sort Array By Parity

    problem 905. Sort Array By Parity solution1: class Solution { public: vector<int> sortArrayByP ...

  10. 对ThreadLocal的理解

      参考文档:https://www.cnblogs.com/moonandstar08/p/4912673.html   一.定义:线程本地变量,每个线程中的变量相互独立,互不影响. 官方定义: 1 ...