jQuery - 遍历操作

首页 / jQuery入门教程 / jQuery - 遍历操作

jQuery是一个非常强大的工具,它提供了各种DOM遍历方法来帮助无涯教程随机选择文档中的元素以及采用顺序方法.大多数DOM遍历方法都不会修改jQuery对象,而是用于根据给定条件从文档中过滤掉元素.

索引查找元素

考虑具有以下HTML内容的简单文档-

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

这将产生以下输出-

list item 6

以下是一个将颜色添加到第二个列表项的简单示例.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

这将产生以下输出-

list item 6

过滤元素

filter(selector)方法可用于从匹配的元素集中过滤出与指定选择器不匹配的所有元素. selector可以使用任何选择器语法编写.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

这将产生以下输出-

list item 6

查找子元素

find(selector)方法可用于定位特定类型元素的所有后代元素. selector可以使用任何选择器语法编写.

以下是一个示例,该示例选择了不同<p>元素内所有可用的<span>元素-

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

这将产生以下输出-

This is 1st paragraph and THIS IS RED

This is 2nd paragraph and THIS IS ALSO RED

DOM筛选器方法

下表列出了有用的方法,可用于从DOM元素列表中过滤掉各种元素-

链接:https://www.learnfk.comhttps://www.learnfk.com/jquery/jquery-traversing.html

来源:LearnFk无涯教程网

Sr.No.Method & Remark
1 eq( index )

将匹配元素集减少为一个元素.

2 filter( selector )

从匹配的元素集中删除与指定selector不匹配的所有元素.

无涯教程网

3 filter( fn )

从匹配的元素集中删除与指定函数不匹配的所有元素.

4 is( selector )

如果选择的至少一个元素适合给定的选择器,则根据表达式检查当前选择并返回true.

5 map( callback )

将jQuery对象中的一组元素转换为jQuery数组中的另一组值(可能包含元素,也可能不包含元素).

6 not( selector )

从匹配的元素集中删除与指定选择器匹配的元素.

7 slice( start, [end] )

选择匹配元素的子集.

DOM遍历方法

下表列出了其他有用的方法,可用于在DOM中定位各种元素-

Sr.No.Methods & Remark
1 add( selector )

将更多与给定选择器匹配的元素添加到匹配的元素集中.

2 andSelf( )

将先前选择添加到当前选择.

3 children( [selector])

获取一组元素,其中包含每个匹配元素集的所有唯一直接子代.

4 closest( selector )

获取一组包含与指定选择器匹配的最接近父元素的元素,包括起始元素.

5 contents( )

如果元素是iframe,则找到匹配的元素(包括文本节点)或内容文档中的所有子节点.

6 end( )

将匹配元素的集合更改为先前的状态.

7 find( selector )

搜索与指定选择器匹配的子代元素.

8 next( [selector] )

获取一组元素,其中包含每个给定元素集的唯一下一个同级.

9 nextAll( [selector] )

在当前元素之后找到所有同级元素.

10 offsetParent( )

返回带有第一个匹配元素的父元素的jQuery集合.

11 parent( [selector] )

获取元素的直接父级.如果在一组元素上调用,parent返回一组唯一的直接父元素.

12 parents( [selector] )

获取包含匹配的元素集的唯一祖先的元素集(根元素除外).

13 prev( [selector] )

获取一组元素,其中包含每个匹配元素集的唯一先前同级.

14 prevAll( [selector] )

查找当前元素前面的所有同级元素.

15 siblings( [selector] )

获取包含每个匹配元素集的所有唯一同胞的元素集.

这一章《jQuery - 遍历操作》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持,感谢!😊

好记忆不如烂笔头。留下你的足迹吧 :)

猜你喜欢

成为AI产品经理 -〔刘海丰〕

说透区块链 -〔自游〕

零基础入门Spark -〔吴磊〕

PyTorch深度学习实战 -〔方远〕

确定ajax调用是否由于不安全的响应或连接被拒绝而失败

在 jQuery 中构建 html 元素的最清晰方法

将十六进制转换为 RGBA

如何在 jQuery Select 器中定义 css :hover 状态?

获取 html 元素的 onclick 事件的 data-* 属性

如何使用jQuery触发类更改事件?

视频教程

jQuery-21-第一组函数 更多视频教程 »