Home > Article > Web Front-end > What methods does jquery have for accessing nodes?
Node access methods: 1. children(), which can access all direct child elements of the selected element; 2. closest(), which can access the first ancestor element of the selected element; 3. find( ), which can access the descendant elements of the selected element; 4. first(), which can access the first element of the selected element; 5. last(), etc.
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
Methods that jquery can access to nodes
| Method | Description |
|---|---|
| add() | Add elements to the set of matching elements |
| addBack() | Add the previous set of elements to the current set |
| children() | Returns all direct child elements of the selected element |
| closest() | Returns the first ancestor element of the selected element |
| contents() | Returns all direct children of the selected element Elements (containing text and comment nodes) |
| each() | Execute the function |
| end( for each matching element ) | End the latest filtering operation in the current chain, and return the set of matching elements to the previous state |
| eq() | Return Element with the specified index number of the selected element |
| filter() | Reduces the set of matching elements to new elements that match the return value of the selector or matching function |
| find() | Returns the descendant elements of the selected element |
| first() | Returns the selected element Select the first element of the element |
| has() | Returns all elements that have one or more elements inside it |
| is() | Checks the set of matching elements based on the selector/element/jQuery object, and returns true if there is at least one matching element |
| last() | Returns the last element of the selected element |
| map() | Pass each element in the current matching set to the function to generate A new jQuery object that returns the value |
| next() | Returns the next sibling element of the selected element |
| nextAll () | Returns all sibling elements after the selected element |
| nextUntil() | Returns the elements between the two given parameters All sibling elements after each element |
| not() | Remove the element from the set of matching elements |
| offsetParent() | Returns the first positioned parent element |
| parent() | Returns the direct parent element of the selected element |
| parents() | Returns all ancestor elements of the selected element |
| parentsUntil() | Returns between two All ancestor elements between the given parameters |
| prev() | Returns the previous sibling element of the selected element |
| prevAll() | Returns all sibling elements before the selected element |
| prevUntil() | Returns between two given elements All sibling elements before each element between the parameters |
| siblings() | Returns all sibling elements of the selected element |
| slice() | Reduce the set of matching elements to a subset of the specified range |
There are generally seven methods to access and query sibling elements: siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil()
siblings() method, mainly used to obtain all elements at the same level of the specified element
next() method, mainly used to obtain the next sibling of the specified element Element
nextAll() method, mainly used to obtain all elements of the next sibling level of the specified element
nextUntil() method, mainly Used to obtain the next sibling element of the specified element. This sibling element must be the element between the specified element and the element set by the nextUntil() method.
prev() method, mainly Used to obtain the upper-level sibling elements of the specified element
prevAll() method, mainly used to obtain all the sibling elements at the upper level of the specified element
The prevUntil() method is mainly used to obtain the previous sibling element of the specified element. This sibling element must be the element between the specified element and the element set by the prevUntil() method
Example:
siblings() method
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>
$("p").siblings(".selected").css("background", "yellow");
</script>
</body>
</html>
##next() method
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li.third-item').next().css('background-color', 'red'); </script> </body> </html>
prev() method
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prev().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
/*background-color: pink;*/
}
</style>
</head>
<body>
<div>
<span>11</span>
<span>
<ul>
<li class="no1">aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</span>
<span>222</span>
<ul>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ul>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("div").children(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
console.log($("div").children(".no1")[0]); // 打印获取到的dom元素 这时你会发现结果为 undefined
// $("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
/*background-color: pink;*/
}
</style>
</head>
<body>
<div>
<span>11</span>
<span>
<ul>
<li class="no1">aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</span>
<span>222</span>
<ul>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ul>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
// $("div").children(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
// console.log($("div").children(".no1")[0]);
$("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
console.log($("div").find(".no1")[0]);
</script>
</html>Corresponding screenshots:
jQuery video tutorial, web front-end]
The above is the detailed content of What methods does jquery have for accessing nodes?. For more information, please follow other related articles on the PHP Chinese website!