Jquery traverses a small set of methods for nodes

  • 2020-03-30 01:26:32
  • OfStack

.add() adds an element to the collection of matching elements.
.andself () adds the previous set of elements in the stack to the current collection.
.children() gets all the children of each element in the matching set of elements.
. The closest () from the beginning of the element itself, step by step to the superior elements match, and returns the first to the ancestors of the matched elements.
.contents() gets the child elements of each element in the set of matched elements, including the text and comment nodes.
.each() iterates over the jQuery object, executing the function for each matched element.
.end() ends the most recent filter operation in the current chain and returns the collection of matched elements to the previous state.
.eq() reduces the collection of matching elements to a new element at the specified index.
.filter() reduces the collection of matching elements to a new element that is returned by a matching selector or a matching function.
.find() gets the descendants of each element in the current set of matched elements, filtered by a selector.
.first() reduces the set of matching elements to the first element in the set.
.has() reduces the set of matching elements to a set containing the descendants of a particular element.
.is() checks the current set of matched elements against the selector and returns true if at least one matching element exists.
.last() reduces the set of matching elements to the last element in the set.
.map() passes each element in the current match set to the function, producing a new jQuery object with the return value.
.next() gets the sibling element next to each element in the set of matched elements.
.nextall () gets all the peer elements after each element in the matching set, filtered (optional) by a selector.
.nextuntil () gets all the peer elements after each element until an element matching the selector is encountered.
.not() removes an element from the set of matched elements.
.offsetparent () gets the first parent element to locate.
.parent() gets the parent of each element in the current set of matched elements, filtered (optionally) by a selector.
.parents() gets the ancestor elements of each element in the current set of matched elements, filtered (optional) by a selector.
ParentsUntil () gets the ancestor element of each element in the current set of matched elements until an element matching the selector is encountered.
.prev() gets the preceding sibling of each element in the set of matched elements, filtered (optional) by a selector.
.prevall () gets all the sibling elements before each element in the matching set, filtered (optional) by the selector.
.prevuntil () gets all the peer elements before each element until it encounters an element that matches the selector.
.siblings() gets the siblings of all the elements in the set of matched elements and is filtered (optionally) by a selector.
.slice() reduces the collection of matching elements to a subset of the specified range.

The test code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=GBK"> 
<link rel="stylesheet" type="text/css" href="table.css"> 
<title></title> 
<script src="../jquery-1.7.2.js" type="text/javascript"></script> 
<style type="text/css"> 
</style> 
<script type="text/javascript"> 
$(function() 
{ 
//Next () finds the next adjacent node next("#x") finds the next adjacent node with id x
$("#d4").next().css("background-color","red"); 
//All nodes after nextAll(). All div tags after nextAll("div")
$("#d4").nextAll().css("background-color","red"); 
//Previous adjacent node
$("#d4").prev().css("background-color","red"); 
//All of the previous nodes
$("#d4").prevAll().css("background-color","red"); 
//Find all sibling nodes
$("#d4").siblings().css("background-color","red"); 
//Find the node and the node after it, and end() returns the state before the last jQuery object was corrupted
$("#d4").nextAll().css("background-color","red").end().css("background-color","red"); 
$("#d4").nextAll().andSelf().css("background-color","red"); 
$("#d4").nextAll().andSelf().end().css("background-color","red"); 
}); 
</script> 
</head> 
<body> 
<div>11111111</div> 
<div>22222222</div> 
<div>33333333</div> 
<div id="d4">44444444</div> 
<p>55555555</p> 
<div>66666666</div> 
<div>77777777</div> 
<div>88888888</div> 
<div>99999999</div> 
</body> 
</html> 

You can test it, it's very helpful for learning.


Related articles: