📌  相关文章
📜  jQuery-DOM遍历

📅  最后修改于: 2020-10-23 08:15:36             🧑  作者: Mango

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

按索引查找元素

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

现场演示
The JQuery Example
   
    
   
      

         
    
            
  • list item 1
    • 
            
  • list item 2
    • 
            
  • list item 3
    • 
            
  • list item 4
    • 
            
  • list item 5
    • 
            
  • list item 6
    •

这将产生以下结果-

  • 每个列表上方都有自己的索引，可以使用eq（index）方法直接定位，如下例所示。

  • 每个子元素的索引都从零开始，因此，将使用$（“ li”）。eq（1）来访问列表项2 。

例

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

现场演示
The JQuery Example
      
        
      
        
      
   
    
   
      

         
    
            
  • list item 1
    • 
            
  • list item 2
    • 
            
  • list item 3
    • 
            
  • list item 4
    • 
            
  • list item 5
    • 
            
  • list item 6
    •

这将产生以下结果-

过滤出元素

filter（selector）方法可用于从匹配的元素集中滤除与指定选择器不匹配的所有元素。选择器可以使用任何选择语法编写。

例

以下是一个简单的示例，该示例将颜色应用于与中产阶级相关的列表-

现场演示
The JQuery Example
      
        
      
        
      
   
    
   
      

         
    
            
  • list item 1
    • 
            
  • list item 2
    • 
            
  • list item 3
    • 
            
  • list item 4
    • 
            
  • list item 5
    • 
            
  • list item 6
    •

这将产生以下结果-

定位后代元素

find（选择器）方法可用于查找特定类型元素的所有后代元素。选择器可以使用任何选择语法编写。

例

以下是一个示例，该示例选择了不同

元素内所有可用的元素-

现场演示
The JQuery Example
      
        
      
        
      
   
    
   
      
This is 1st paragraph and THIS IS RED

      
This is 2nd paragraph and THIS IS ALSO RED

这将产生以下结果-

jQuery DOM过滤器方法

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

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

Reduce the set of matched elements to a single element.
2 filter( selector )

Removes all elements from the set of matched elements that do not match the specified selector(s).
3 filter( fn )

Removes all elements from the set of matched elements that do not match the specified function.
4 is( selector )

Checks the current selection against an expression and returns true, if at least one element of the selection fits the given selector.
5 map( callback )

Translate a set of elements in the jQuery object into another set of values in a jQuery array (which may, or may not contain elements).
6 not( selector )

Removes elements matching the specified selector from the set of matched elements.
7 slice( start, [end] )

Selects a subset of the matched elements.

JQuery DOM遍历方法

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

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

Adds more elements, matched by the given selector, to the set of matched elements.
2 andSelf( )

Add the previous selection to the current selection.
3 children( [selector])

Get a set of elements containing all of the unique immediate children of each of the matched set of elements.
4 closest( selector )

Get a set of elements containing the closest parent element that matches the specified selector, the starting element included.
5 contents( )

Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.
6 end( )

Revert the most recent ‘destructive’ operation, changing the set of matched elements to its previous state.
7 find( selector )

Searches for descendant elements that match the specified selectors.
8 next( [selector] )

Get a set of elements containing the unique next siblings of each of the given set of elements.
9 nextAll( [selector] )

Find all sibling elements after the current element.
10 offsetParent( )

Returns a jQuery collection with the positioned parent of the first matched element.
11 parent( [selector] )

Get the direct parent of an element. If called on a set of elements, parent returns a set of their unique direct parent elements.
12 parents( [selector] )

Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).
13 prev( [selector] )

Get a set of elements containing the unique previous siblings of each of the matched set of elements.
14 prevAll( [selector] )

Find all sibling elements in front of the current element.
15 siblings( [selector] )

Get a set of elements containing all of the unique siblings of each of the matched set of elements.