• 猴子也能学会的jQuery第十二期——jQuery遍历（中）

    ​

    ​

    📚系列文章—目录🔥

    猴子也能学会的jQuery第一期——什么是jQuery

    猴子也能学会的jQuery第二期——引入jQuery

    猴子也能学会的jQuery第三期——使用jQuery

    猴子也能学会的jQuery第四期——jQuery选择器大全

    猴子也能学会的jQuery第五期——jQuery样式操作

    猴子也能学会的jQuery第六期——jQuery事件（上）

    猴子也能学会的jQuery第六期——jQuery事件（中）

    猴子也能学会的jQuery第六期——jQuery事件（下）

    猴子也能学会的jQuery第七期——jQuery动画（上）

    猴子也能学会的jQuery第七期——jQuery动画（下）

    猴子也能学会的jQuery第八期——jQuery属性操作

    猴子也能学会的jQuery第九期——jQuery内容操作

    猴子也能学会的jQuery第十期——jQuery元素操作（上）

    猴子也能学会的jQuery第十期——jQuery元素操作（下）

    猴子也能学会的jQuery第十一期——jQuery尺寸和位置操作

    猴子也能学会的jQuery第十二期——jQuery遍历（上）

    猴子也能学会的jQuery第十二期——jQuery遍历（中）

    猴子也能学会的jQuery第十二期——jQuery遍历（下）

    猴子也能学会的jQuery——参考手册

    🔥未完待续...

    文章目录

    📚系列文章—目录🔥

    📌回顾上期

    🎯jQuery同胞

    🧩jQuery siblings()方法

    🧩jQuery next()方法

    🧩jQuery nextAll()方法

    🧩jQuery nextUntil()方法

    🧩前言

    🧩jQuery prev()方法

    🧩jQuery prevAll()方法

    🧩jQuery prevUntil()方法

    🎯jQuery过滤

    🧩jQuery first()方法

    🧩jQuery last()方法

    🧩jQuery eq()方法

    🧩jQuery filter()方法

    🧩jQuery not()方法

    📌回顾上期

    上期讲了jQuery遍历的内容，分为上中下三个部分

    • jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

    🎯jQuery同胞

    • 同胞拥有相同的父元素。​

    • 通过jQuery这些方法可以在 DOM 树中遍历元素的同胞元素。如siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()和prevUntil()等等。

    🧩jQuery siblings()方法

    • siblings() 方法返回被选元素的所有同胞元素。

    • 下面通过代码演示，返回

      的所有同胞元素。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <style>
    6. .siblings *
    7. { 
    8. 	display: block;
    9. 	border: 2px solid lightgrey;
    10. 	color: lightgrey;
    11. 	padding: 5px;
    12. 	margin: 15px;
    13. }
    14. style>
    15. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    16. script>
    17. <script>
    18. $(document).ready(function(){
    19. 	$("h2").siblings().css({"color":"red","border":"2px solid red"});
    20. });
    21. script>
    22. head>
    23. <body class="siblings">
    24.  
    25. <div>div (父元素)
    26.   <p>pp>
    27.   <span>spanspan>
    28.   <h2>h2h2>
    29.   <h3>h3h3>
    30.   <p>pp>
    31. div>
    32.  
    33. body>
    34. html>

    • 同时可以使用可选参数来过滤对同胞元素的搜索。
    • 下面通过代码演示，返回属于

      的同胞元素的所有

      元素。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <style>
    6. .siblings *
    7. { 
    8. 	display: block;
    9. 	border: 2px solid lightgrey;
    10. 	color: lightgrey;
    11. 	padding: 5px;
    12. 	margin: 15px;
    13. }
    14. style>
    15. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    16. script>
    17. <script>
    18. $(document).ready(function(){
    19.   $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
    20. });
    21. script>
    22. head>
    23. <body class="siblings">
    24.  
    25. <div>div (父元素)
    26.   <p>pp>
    27.   <span>spanspan>
    28.   <h2>h2h2>
    29.   <h3>h3h3>
    30.   <p>pp>
    31. div>
    32.  
    33. body>
    34. html>

    🧩jQuery next()方法

    • next() 方法返回被选元素的下一个同胞元素。

    • 该方法只返回一个元素。

    • 下面通过代码演示，返回

      的下一个同胞元素。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <style>
    6. .siblings *
    7. { 
    8. 	display: block;
    9. 	border: 2px solid lightgrey;
    10. 	color: lightgrey;
    11. 	padding: 5px;
    12. 	margin: 15px;
    13. }
    14. style>
    15. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    16. script>
    17. <script>
    18. $(document).ready(function(){
    19. 	$("h2").next().css({"color":"red","border":"2px solid red"});
    20. });
    21. script>
    22. head>
    23. <body class="siblings">
    24.  
    25. <div>div (父元素)
    26.   <p>pp>
    27.   <span>spanspan>
    28.   <h2>h2h2>
    29.   <h3>h3h3>
    30.   <p>pp>
    31. div>
    32.  
    33. body>
    34. html>

    🧩jQuery nextAll()方法

    • nextAll() 方法返回被选元素的所有跟随的同胞元素。

    • 下面通过代码演示，返回

      的所有跟随的同胞元素。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <style>
    6. .siblings *
    7. { 
    8. 	display: block;
    9. 	border: 2px solid lightgrey;
    10. 	color: lightgrey;
    11. 	padding: 5px;
    12. 	margin: 15px;
    13. }
    14. style>
    15. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    16. script>
    17. <script>
    18. $(document).ready(function(){
    19. 	$("h2").nextAll().css({"color":"red","border":"2px solid red"});
    20. });
    21. script>
    22. head>
    23. <body class="siblings">
    24.  
    25. <div>div (父元素)
    26.   <p>pp>
    27.   <span>spanspan>
    28.   <h2>h2h2>
    29.   <h3>h3h3>
    30.   <p>pp>
    31. div>
    32.  
    33. body>
    34. html>

    🧩jQuery nextUntil()方法

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

    • 下面通过代码演示，返回介于

      与

      元素之间的所有同胞元素。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <style>
    6. .siblings *
    7. { 
    8. 	display: block;
    9. 	border: 2px solid lightgrey;
    10. 	color: lightgrey;
    11. 	padding: 5px;
    12. 	margin: 15px;
    13. }
    14. style>
    15. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    16. script>
    17. <script>
    18. $(document).ready(function(){
    19. 	$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
    20. });
    21. script>
    22. head>
    23. <body class="siblings">
    24.  
    25. <div>div (父元素)
    26.   <p>pp>
    27.   <span>spanspan>
    28.   <h2>h2h2>
    29.   <h3>h3h3>
    30.   <h4>h4h4>
    31.   <h5>h5h5>
    32.   <h6>h6h6>
    33.   <p>pp>
    34. div>
    35.  
    36. body>
    37. html>

    🧩前言

    • prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

    🧩jQuery prev()方法

    • prev() 方法返回被选元素的前一个同级元素。

    • 同级元素是共享相同父元素的元素。

    • 该方法只返回一个元素。

    • 下面通过代码演示，返回带有类名 "start" 的每个

    • 元素的前一个同级元素。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <style>
    6. .siblings *{ 
    7. 	display: block;
    8. 	border: 2px solid lightgrey;
    9. 	color: lightgrey;
    10. 	padding: 5px;
    11. 	margin: 15px;
    12. }
    13. style>
    14. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    15. script>
    16. <script>
    17. $(document).ready(function(){
    18. 	$("li.start").prev().css({"color":"red","border":"2px solid red"});
    19. });
    20. script>
    21. head>
    22. <body>
    23.  
    24. <div style="width:500px;" class="siblings">
    25. 	<ul>ul (父节点)  
    26. 		<li>li (兄弟节点)li>
    27. 		<li>li (类名为"start"的li节点的上一个兄弟节点)li>
    28. 		<li class="start">li (类名为"start"的li节点)li>
    29. 		<li>li (兄弟节点)li>
    30. 		<li>li (兄弟节点)li>
    31. 	ul>   
    32. div>
    33.  
    34. body>
    35. html>

    🧩jQuery prevAll()方法

    • prevAll() 方法返回被选元素之前的所有同级元素。

    • 同级元素是共享相同父元素的元素。

    • 下面通过代码演示，返回带有类名 "start" 的每个

    • 元素之前的所有同级元素。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>菜鸟教程(runoob.com)title>
    6. <style>
    7. .siblings *{ 
    8. 	display: block;
    9. 	border: 2px solid lightgrey;
    10. 	color: lightgrey;
    11. 	padding: 5px;
    12. 	margin: 15px;
    13. }
    14. style>
    15. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    16. script>
    17. <script>
    18. $(document).ready(function(){
    19. 	$("li.start").prevAll().css({"color":"red","border":"2px solid red"});
    20. });
    21. script>
    22. head>
    23. <body>
    24.  
    25. <div style="width:500px;" class="siblings">
    26. 	<ul>ul (parent)  
    27. 		<li>li (类名为"start"的li的上一个兄弟节点)li>
    28. 		<li>li (类名为"start"的li的上一个兄弟节点)li>
    29. 		<li>li (类名为"start"的li的上一个兄弟节点)li>
    30. 		<li class="start">li (类名为"start"的li节点)li>
    31. 		<li>li (兄弟节点)li>
    32. 		<li>li (兄弟节点)li>
    33. 	ul>   
    34. div>
    35. <p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。p>
    36.  
    37. body>
    38. html>

    🧩jQuery prevUntil()方法

    • prevUntil() 方法返回 selector 与 stop 之间的每个元素之前的所有同级元素。

    • 同级元素是共享相同父元素的元素。

    • 如果两个参数都为空，该方法将返回元素之前的所有同级元素（与prevALL()方法相同）。

    • 下面通过代码演示，返回在类名为 "start" 和 "stop" 的两个

    • 元素之间的所有同级元素。

    1.  html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <style>
    6. .siblings *{ 
    7. 	display: block;
    8. 	border: 2px solid lightgrey;
    9. 	color: lightgrey;
    10. 	padding: 5px;
    11. 	margin: 15px;
    12. }
    13. style>
    14. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    15. script>
    16. <script>
    17. $(document).ready(function(){
    18. 	$("li.start").prevUntil("li.stop").css({"color":"red","border":"2px solid red"});
    19. });
    20. script>
    21. head>
    22. <body>
    23.  
    24. <div style="width:500px;" class="siblings">
    25. 	<ul>ul (父节点)  
    26. 		<li class="stop">li (类名为"stop"的兄弟节点)li>
    27. 		<li>li (类名为"start"的li节点的上一个兄弟节点)li>
    28. 		<li>li (类名为"start"的li节点的上一个兄弟节点)li>
    29. 		<li>li (类名为"start"的li节点的上一个兄弟节点)li>
    30. 		<li class="start">li (类名为"start"的li节点)li>
    31. 		<li>li (兄弟节点)li>
    32. 		<li>li (兄弟节点)li>
    33. 	ul>   
    34. div>
    35. <p>在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。p>
    36.  
    37. body>
    38. html>

    🎯jQuery过滤

    • 通过jQuery过滤，缩小搜索元素的范围。
    • 三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
    • 其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

    🧩jQuery first()方法

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

    • 下面通过代码演示，选取首个

      元素内部的第一个

      元素。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    6. script>
    7. <script>
    8. $(document).ready(function(){
    9.   $("div p").first().css("background-color","yellow");
    10. });
    11. script>
    12. head>
    13. <body>
    14.  
    15. <h1>欢迎访问我的主页h1>
    16. <div>
    17. 	<p>这是 div 中的一个段落。p>
    18. div>
    19.  
    20. <div>
    21. 	<p>这是另外一个 div 中的一个段落。p>
    22. div>
    23.  
    24. <p>这是一个段落。p>
    25.  
    26. body>
    27. html>

    🧩jQuery last()方法

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

    • 下面通过代码演示，选择最后一个

      元素中的最后一个

      元素。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    6. script>
    7. <script>
    8. $(document).ready(function(){
    9. 	$("div p").last().css("background-color","yellow");
    10. });
    11. script>
    12. head>
    13. <body>
    14.  
    15. <h1>欢迎访问我的主页h1>
    16. <div>
    17. 	<p>这是 div 中的一个段落。p>
    18. div>
    19.  
    20. <div>
    21. 	<p>这是另外一个 div 中的一个段落。p>
    22. div>
    23.  
    24. <p>这是一个段落。p>
    25.  
    26. body>
    27. html>

    🧩jQuery eq()方法

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

    • 索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。

    • 下面通过代码演示，选取第二个

      元素（索引号 1）。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    6. script>
    7. <script>
    8. $(document).ready(function(){
    9.   $("p").eq(1).css("background-color","yellow");
    10. });
    11. script>
    12. head>
    13. <body>
    14.  
    15. <h1>欢迎访问我的主页h1>
    16. <p>百度 (index 0).p>
    17. <p>http://www.baidu.com (index 1)。p>
    18. <p>google (index 2).p>
    19. <p>http://www.google.com (index 3)。p>
    20.  
    21. body>
    22. html>

    🧩jQuery filter()方法

    • filter() 方法允许您规定一个标准。

    • 不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

    • 下面通过代码演示，返回带有类名 "url" 的所有

      元素。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    6. script>
    7. <script>
    8. $(document).ready(function(){
    9.    $("p").filter(".url").css("background-color","yellow");
    10. });
    11. script>
    12. head>
    13. <body>
    14.  
    15. <h1>欢迎访问我的主页h1>
    16. <p>百度 (index 0).p>
    17. <p class="url">http://www.baidu.com (index 1)。p>
    18. <p>google (index 2).p>
    19. <p class="url">http://www.google.com (index 3)。p>
    20.  
    21. body>
    22. html>

    🧩jQuery not()方法

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

    • not() 方法与 filter() 相反。

    • 下面通过代码演示，返回不带有类名 "url" 的所有

      元素。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    6. script>
    7. <script>
    8. $(document).ready(function(){
    9.    $("p").not(".url").css("background-color","yellow");
    10. });
    11. script>
    12. head>
    13. <body>
    14.  
    15. <h1>欢迎访问我的主页h1>
    16. <p>baidu (index 0).p>
    17. <p class="url">http://www.baidu.com (index 1)。p>
    18. <p>google (index 2).p>
    19. <p class="url">http://www.google.com (index 3)。p>
    20.  
    21. body>
    22. html>

     📚持续更新🔥

  • 相关阅读:
    MySQL基础与库的基本操作
    解决MAC M1 Docker Desktop启动一直在starting
    数商云：日化用品行业采购智能管理平台整合供应闭环，实现企业端到端寻源采购
    CSDN每日一练 |『小桥流水人家』『争风吃醋的豚鼠』『寻因找祖』2023-10-17
    项目中升级mysql遇到的若干问题
    常见高频题
    [Vulnhub] lazysysadmin
    【工作总结】工作累死累活，结果越做越差怎么办？
    基于boost库的站内搜索引擎
    Qgis 加载在线地图：如高德、天地图、OSM等
  • 原文地址：https://blog.csdn.net/weixin_53231455/article/details/128106677