What methods does jquery have for accessing nodes?-Front-end Q&A-php.cn

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.

What methods does jquery have for accessing nodes?

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>

Copy after login

What methods does jquery have for accessing nodes?

##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>
			$(&#39;li.third-item&#39;).next().css(&#39;background-color&#39;, &#39;red&#39;);
		</script>

	</body>
</html>

Copy after login

What methods does jquery have for accessing nodes?

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>

Copy after login

What methods does jquery have for accessing nodes?

There are two ways to access and query child elements :find() and children()

children() method: Get the direct subset elements under this element
find() method : Get all subset elements under the element (including subsets of subsets)

<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:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	console.log($("div").children(".no1")[0]); // 打印获取到的dom元素 这时你会发现结果为 undefined 
 
	// $("div").find(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
</script>
</html>

Copy after login

What methods does jquery have for accessing nodes?

At this time, we will open the comment on find

<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:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	// console.log($("div").children(".no1")[0]);
 
 
	$("div").find(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	console.log($("div").find(".no1")[0]);
</script>
</html>

Copy after login

Corresponding screenshots:

What methods does jquery have for accessing nodes?

[Recommended learning:

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!