Query 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。

以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。

图示解析:

  • <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
  • <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
  • 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
  • <span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
  • 两个 <li> 元素是同胞(拥有相同的父元素)。
  • 右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
  • <b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。

jQuery 遍历 - 向上遍历DOM

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

例:返回每个 <span> 元素的的直接父元素:

.ancestors *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px; margin: 15px;}
<script>
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script> <body>
<div class="ancestors">
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div> <div style="width:500px;">div (祖父元素)
<p>p (父元素)
<span>span</span>
</p>
</div>
</div>
</body>

结果:有两个元素显示效果,即 li 和 P,文字为红色,红色边框为宽为2px的 实线

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

例:返回所有 <span> 元素的所有祖先:

<script>
$(document).ready(function(){
$("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>

结果:除了本身元素其向上的元素显示效果,即 P、li 、ul、div 、body、html ,文字为红色,红色边框为宽为2px的 实线

(可选)参数:过滤对祖先元素的搜索

例:返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素

<script>
$(document).ready(function(){
$("span").parents("ul").css({"color":"red","border":"2px solid red"});
});
</script>

结果:除了本身元素其向上指定元素显示效果,即 li 、ul ,文字为红色,红色边框为宽为2px的 实线

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

例:返回介于 <span> 与 <div> 元素之间的所有祖先元素:

<script>
$(document).ready(function(){
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>

结果:除了本身元素和结尾的元素,其中间的元素显示效果,即 li 、ul ,文字为红色,红色边框为宽为2px的 实线


jQuery 遍历 - 向下遍历

(1)children() 方法:返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

例:返回每个 <div> 元素的所有直接子元素:

<script>
$(document).ready(function(){
$("div").children().css({"color":"red","border":"2px solid red"});
});
</script> <body>
<div class="descendants" style="width:500px;">div (当前元素)
<p>p (儿子元素)
<span>span (孙子元素)</span>
</p>
<p>p (儿子元素)
<span>span (孙子元素)</span>
</p>
</div>

结果:当前元素向下一级的所有元素显示效果,即所有div下一级的p ,文字为红色,红色边框为宽为2px的 实线

(可选)参数:过滤对子元素的搜索

例:返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素:

<script>
$(document).ready(function(){
$("div").children("p.1").css({"color":"red","border":"2px solid red"});
});
</script> <div class="descendants" style="width:500px;">div (当前元素)
<p class="1">p (儿子元素)
<span>span (孙子元素)</span>
</p>
<p class="2">p (儿子元素)
<span>span (孙子元素)</span>
</p>
</div>

结果:当前元素向下一级的所有(指定类)的元素显示效果:即所有div下一级的p类名为1 ,文字为红色,红色边框为宽为2px的 实线

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

例:返回属于 <div> 后代的所有 <span> 元素:

<script>
$(document).ready(function(){
$("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>

结果:除本身,向下所有为指定的元素显示效果,即span,文字为红色,红色边框为宽为2px的 实线

例:返回 <div> 的所有后代:

<script>
$(document).ready(function(){
$("div").find("*").css({"color":"red","border":"2px solid red"});
});
</script>

结果:除本身,向下所有的元素显示效果,即p、span,文字为红色,红色边框为宽为2px的 实线


jQuery 遍历 - 同级遍历

(1)siblings() 方法:返回被选元素的所有同级元素。

例:返回 <h2> 的所有同级元素:

<script>
$(document).ready(function(){
$("h2").siblings().css({"color":"red","border":"2px solid red"});
});
</script> <body class="siblings">
<div>div (父元素)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>

结果:除本身,同级的所有元素显示效果,即同级的p、span、h3、p,文字为红色,红色边框为宽为2px的 实线

(可选)参数:过滤对同级元素的搜索

例:返回属于 <h2> 的同级元素的所有 <p> 元素

<script>
$(document).ready(function(){
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});
</script>

结果:除本身,同级指定的所有元素效果,即同级的p,文字为红色,红色边框为宽为2px的 实线

(2)next() 方法:返回被选元素的下一个同级元素。——只返回一个元素

例:返回 <h2> 的下一个同胞元素:

<script>
$(document).ready(function(){
$("h2").next().css({"color":"red","border":"2px solid red"});
});
</script>

结果:除本身,同级下一个元素显示效果,即同级的h3,文字为红色,红色边框为宽为2px的 实线

(3)nextAll() 方法:返回被选元素的所有跟随的同级元素。

例:返回 <h2> 的所有跟随的同级元素

<script>
$(document).ready(function(){
$("h2").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>

结果:除本身,向下所有同级元素显示效果,即同级的h3、p,文字为红色,红色边框为宽为2px的 实线

(4)nextUntil() 方法:返回介于两个给定参数之间的所有跟随的同级元素

例:返回介于 <h2> 与 <h6> 元素之间的所有同级元素

<script>
$(document).ready(function(){
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});
</script> <body class="siblings">
<div>div (父元素)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>p</p>
</div>
</body>

结果:除本身和指定同级元素之间的同级元素显示效果,即同级的h3、h4、h5,文字为红色,红色边框为宽为2px的 实线

(5)prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,不过方向相反:——返回前面的同级元素


jQuery 遍历- 过滤

三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素

(1)first() 方法:返回被选元素的首个元素。

例:选取首个 <div> 元素内部的第一个 <p> 元素

<script>
$(document).ready(function(){
$("div p").first().css("background-color","yellow");
});
</script> <body>
<h1>欢迎访问我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>
</div>
<div>
<p>这是另外一个 div 中的一个段落。</p>
</div>
<p>这是一个段落。</p>
</body>

结果:首个选取元素中指定元素的第一个元素显示效果,即第一个div内的第一个p元素,背景为黄色。

(2)last() 方法:返回被选元素的最后一个元素

例:选择最后一个 <div> 元素中的最后一个 <p> 元素:

<script>
$(document).ready(function(){
$("div p").last().css("background-color","yellow");
});
</script>

结果:最后选取元素中指定元素的最后一个元素显示效果,即最后div内的最后为的p的元素,背景为黄色。

(3)eq() 方法:返回被选元素中带有指定索引号的元素。

注:索引号从 0 开始,因此首个元素的索引号是 0 而不是 1

例:选取第二个 <p> 元素(索引号 1):

<script>
$(document).ready(function(){
$("p").eq(1).css("background-color","yellow");
});
</script> <body>
<h1>欢迎访问我的主页</h1>
<p>文本文字 (index 0).</p>
<p>http://www.baidu.com (index 1)。</p>
<p>文本文字 (index 2).</p>
<p>http://www.google.com (index 3)。</p>
</body>

结果:从本身元素索引号为0开始,到指定同级元素索引号为指,即(索引号为1)p的元素,背景为黄色。

其他过滤方法:比如 filter() 和 not() 允许选取匹配或不匹配某项指定标准的元素。

(4)filter() 方法:允许规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

例:返回带有类名 "url" 的所有 <p> 元素

<script>
$(document).ready(function(){
$("p").filter(".url").css("background-color","yellow");
});
</script>

结果:同级带有指定属性的元素显示效果,即带有url属性p元素,背景为黄色。

(5)not() 方法:返回不匹配标准的所有元素。

例:返回不带有类名 "url" 的所有 <p> 元素

<script>
$(document).ready(function(){
$("p").not(".url").css("background-color","yellow");
});
</script>

结果:同级不带指定属性的元素显示效果,即不带url属性的P元素,背景为黄色。

提示:not() 方法与 filter() 相反。

jQuery 学习04——遍历:定义、向上、向下、同级、过滤的更多相关文章

  1. 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

    jQuery 学习8 遍历-父亲兄弟子孙元素   jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素.   什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...

  2. JQuery学习之遍历

    1.祖先:向上遍历DOM树 **parent():返回被选中元素的直接父元素,该方法只会向上一级对DOM树进行遍历 $(document).ready(function(){ $("span ...

  3. AngularJS1.X学习笔记10-自定义指令(下)

    继续继续,学完这个部分就去吃饭.引用自由男人的话作为本文的开始:“默认情况下,链接函数被传入了控制器的作用域,而该控制器管理着的视图包含了指令所应用到的元素”.果然像是绕口令,还是看看你的例子比较好. ...

  4. jquery 学习(三) - 遍历操作

    HTML代码 <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p&g ...

  5. jQuery学习笔记(一)——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

  6. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  7. jquery学习全面总结

    本文仅针对jquery的部分知识点做总结,更为全面的可以去官网看中文文档.可以更为详细的了解jquery及其特性. window.onload 和$(document).ready() 我 windo ...

  8. jQuery学习笔记之概念(1)

    jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...

  9. jQuery学习之开篇

    吐槽 近期比較烦,对于一个前端白痴来说,工作方向突然转向前端这块着实让人蛋疼无比.前段时间简单的学习了下EasyUI,算是对其有一个简单的认知了吧.EasyUI的研究过程中发现,假设没有掌握JS.JQ ...

随机推荐

  1. JAVA-ORM框架整理➣Mybatis操作MySQL

    概述 在Java中,对数据库操作的框架很多,上节概述Hibernate的简单使用,这里简单整理Mybatis的使用.Mybatis也是简单的数据库操作框架,通过IOC方式,获取操作类对象,进行数据的操 ...

  2. 公共语言运行时支持(/clr)

    项目属性 -> 配置属性 -> “常规”里开启“公共语言运行时支持(/clr)

  3. [转]如何将mysql表结构导出成Excel格式的(并带备注)

    方法一: 1.使用一个MySQL管理工具:SQLyog,点击菜单栏“数据库”下拉的最后一项: 导出的格式如下: 2.要想转成Excel格式的只需手动将该表复制到Excel中去. 方法二: 1.以下用的 ...

  4. [转]教你十分钟下载并破解IntelliJ IDEA(2017)

    来源:http://www.itwendao.com/article/detail/400687.html 温馨提示:IntelliJ IDEA(2017)需要安装JDK8以上才能运行 如果你是JDK ...

  5. 总结Flink状态管理和容错机制

    本文来自8月11日在北京举行的 Flink Meetup会议,分享来自于施晓罡,目前在阿里大数据团队部从事Blink方面的研发,现在主要负责Blink状态管理和容错相关技术的研发.   本文主要内容如 ...

  6. 线程、进程、协程 异步io

    https://www.cnblogs.com/wupeiqi/articles/6229292.html

  7. dns-prefetch,新打开页面预抓取

    dns-prefetch 对性能提升有多大 转载2016-04-07 12:57:41 标签:网站推广dns-prefetch对性能提 dns-prefetch, 是DNS预获取,也是网页前端的优化的 ...

  8. day29 网络编程

    网络通信原理: http://www.cnblogs.com/linhaifeng/articles/5937962.html 一.操作系统基础 二.网络通信原理 2.1 互联网的本质就是一系列的网络 ...

  9. hdu5745(dp+bitset)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=5745 C++ bitset的用法:https://www.cnblogs.com/magisk/p/880 ...

  10. POJ 1258 Agri-Net 【Prime】模板题

    题目链接>>> 题目大意:     给你N*N矩阵,表示N个村庄之间的距离.FJ要把N个村庄全都连接起来,求连接的最短距离(即求最小生成树).解析如下: #include <c ...