jquery有哪些節點存取的方法-前端問答-PHP中文網

首頁

web前端

前端問答

jquery有哪些節點存取的方法

青灯夜游

Apr 28, 2022 pm 02:29 PM

jquery

節點存取的方法：1、children()，可存取被選元素的所有直接子元素；2、closest()，可存取被選元素的第一個祖先元素；3、find( )，可存取被選元素的後代元素；4、first()，存取被選元素的第一個元素；5、last()等。

jquery有哪些節點存取的方法

本教學操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。

jquery可對節點進行存取的方法

##傳回介於兩個給定參數之間的每個元素之前的所有同級元素siblings()傳回被選元素的所有同級元素#slice()把符合元素集合縮減為指定範圍的子集#

其中，存取並查詢同級元素一般有七個方法：siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()

siblings()方法，主要用於獲得指定元素的同級所有元素
#next()方法，主要用於獲得指定元素的下一個同級元素
nextAll()方法，主要用於獲得指定元素的下一個同級的所有元素
nextUntil()方法，主要用來取得指定元素的下一個同級元素，這個同級元素必須為指定元素與nextUntil()方法設定元素之間的元素
prev()方法，主要用於獲得指定元素的上一級同級元素
prevAll()方法，主要用於獲得指定元素上一級所有的同級元素
#prevUntil()方法，主要用來取得指定元素的上一個同級元素，這個同級元素必須為指定元素與prevUntil()方法設定元素之間的元素

範例：

siblings()方法

<!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>

jquery有哪些節點存取的方法

##next()方法

<!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>

jquery有哪些節點存取的方法

prev()方法#

<!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>

jquery有哪些節點存取的方法

存取並查詢子元素有兩種方法：find() 和children()

children()方法：取得該元素下的直接子集元素

<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>

jquery有哪些節點存取的方法此時我們再把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>

對應截圖：

jquery有哪些節點存取的方法【推薦學習：

jQuery影片教學

、web前端】

方法	描述
add()	把元素加入到符合元素的集合中
addBack()	把先前的元素集加入到目前集合
children()	#回傳被選元素的所有直接子元素
closest()	傳回被選元素的第一個祖先元素
#contents()	傳回所選取元素的所有直接子元素（包含文字和註解節點）
each()	為每個匹配元素執行函數
end( )	結束目前鏈中最近的一次篩選操作，並把匹配元素集合回到前一次的狀態
eq()	傳回帶有被選元素的指定索引號碼的元素
filter()	將匹配元素集合縮減為匹配選擇器或匹配函數傳回值的新元素
find()	傳回被選元素的子代元素
first()	回傳被選元素的第一個元素
has()	傳回擁有一個或多個元素在其內的所有元素
#is()	根據選擇器/元素/jQuery 物件檢查匹配元素集合，如果存在至少一個匹配元素，則傳回true
last()	傳回被選元素的最後一個元素
map()	把目前符合集合中的每個元素傳遞給函數，產生包含傳回值的新jQuery 物件
next()	#回傳被選元素的後一個同級元素
nextAll ()	傳回被選元素之後的所有同級元素
nextUntil()	傳回介於兩個給定參數之間的每個元素之後的所有同級元素
not()	從匹配元素集合中移除元素
offsetParent()	傳回第一個定位的父元素
#parent()	傳回被選元素的直接父元素
parents()	傳回所有被選元素的祖先元素
parentsUntil()	回傳介於兩個給定參數之間的所有祖先元素
prev()	傳回被選元素的前一個同級元素
#prevAll()	傳回被選元素之前的所有同級元素
#prevUntil()