jquery如何實(shí)現(xiàn)元素遍歷

發(fā)布時(shí)間：2022-05-30 15:05:22 來源：億速云閱讀：193 作者：iii 欄目：web開發(fā)

這篇文章主要講解了“jquery如何實(shí)現(xiàn)元素遍歷”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“jquery如何實(shí)現(xiàn)元素遍歷”吧！

實(shí)現(xiàn)元素遍歷的方法：1、children()，可返回被選元素的所有直接子元素；2、closest()，可返回被選元素的第一個祖先元素；3、each()，為每個匹配元素執(zhí)行函數(shù)；4、filter()，可過濾指定元素；5、nextAll()等。

本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。

jquery提供了多種遍歷元素的方法

方法	描述
add()	把元素添加到匹配元素的集合中
addBack()	把之前的元素集添加到當(dāng)前集合中
children()	返回被選元素的所有直接子元素
closest()	返回被選元素的第一個祖先元素
contents()	返回被選元素的所有直接子元素（包含文本和注釋節(jié)點(diǎn)）
each()	為每個匹配元素執(zhí)行函數(shù)
end()	結(jié)束當(dāng)前鏈中最近的一次篩選操作，并把匹配元素集合返回到前一次的狀態(tài)
eq()	返回帶有被選元素的指定索引號的元素
filter()	把匹配元素集合縮減為匹配選擇器或匹配函數(shù)返回值的新元素
find()	返回被選元素的后代元素
first()	返回被選元素的第一個元素
has()	返回?fù)碛幸粋€或多個元素在其內(nèi)的所有元素
is()	根據(jù)選擇器/元素/jQuery 對象檢查匹配元素集合，如果存在至少一個匹配元素，則返回 true
last()	返回被選元素的最后一個元素
map()	把當(dāng)前匹配集合中的每個元素傳遞給函數(shù)，產(chǎn)生包含返回值的新 jQuery 對象
next()	返回被選元素的后一個同級元素
nextAll()	返回被選元素之后的所有同級元素
nextUntil()	返回介于兩個給定參數(shù)之間的每個元素之后的所有同級元素
not()	從匹配元素集合中移除元素
offsetParent()	返回第一個定位的父元素
parent()	返回被選元素的直接父元素
parents()	返回被選元素的所有祖先元素
parentsUntil()	返回介于兩個給定參數(shù)之間的所有祖先元素
prev()	返回被選元素的前一個同級元素
prevAll()	返回被選元素之前的所有同級元素
prevUntil()	返回介于兩個給定參數(shù)之間的每個元素之前的所有同級元素
siblings()	返回被選元素的所有同級元素
slice()	把匹配元素集合縮減為指定范圍的子集

其中，用于遍歷子元素的有兩個：

children()方法：獲取該元素下的直接子集元素
find()方法：獲取該元素下的所有（包括子集的子集）子集元素

區(qū)別：

children() 方法返回返回被選元素的所有直接子元素（直接子元素，只找兒子不要孫子（：也就是說不會遞歸去遍歷）

find()方法獲得當(dāng)前元素集合中每個元素的后代（注意find（）方法，必須傳參數(shù)，否者無效）

示例：查詢所有子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			div * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>

		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("ul").find("*").css({
						"color": "red",
						"border": "2px solid red"
					});
				});
			});
		</script>
	</head>

	<body class="ancestors">
		<div style="width:500px;">div (父節(jié)點(diǎn))
			<ul>ul (指定元素)
				<li>li (子節(jié)點(diǎn)1)
					<span>span (孫節(jié)點(diǎn)1)</span>
				</li>
				<li>li (子節(jié)點(diǎn)2)
					<span>span (孫節(jié)點(diǎn)2)</span>
				</li>
				<li>li (子節(jié)點(diǎn)3)
					<span>span (孫節(jié)點(diǎn)3)</span>
				</li>
			</ul>
		</div>
		<button>選取ul的所有子元素</button>
	</body>

</html>

jquery如何實(shí)現(xiàn)元素遍歷

遍歷同級元素的方法有7種：

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

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如何實(shí)現(xiàn)元素遍歷

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

	</body>
</html>

jquery如何實(shí)現(xiàn)元素遍歷

nextAll()方法

<!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').nextAll().css('background-color', 'red');
		</script>

	</body>
</html>

jquery如何實(shí)現(xiàn)元素遍歷

nextUntil()方法

<!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").nextUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父節(jié)點(diǎn))
				<li>li (兄弟節(jié)點(diǎn))</li>
				<li>li (兄弟節(jié)點(diǎn))</li>
				<li class="start">li (類名為"start"的兄弟節(jié)點(diǎn))</li>
				<li>li (類名為"start"的li節(jié)點(diǎn)的下一個兄弟節(jié)點(diǎn))</li>
				<li>li (類名為"start"的li節(jié)點(diǎn)的下一個兄弟節(jié)點(diǎn))</li>
				<li>li (類名為"start"的li節(jié)點(diǎn)的下一個兄弟節(jié)點(diǎn))</li>
				<li class="stop">li (類名為"stop"的兄弟節(jié)點(diǎn))</li>
			</ul>
		</div>
		<p>在這個例子中,我們返回在類名為“star”和類名為“stop”的 li元素之間的所有下一個兄弟元素。</p>

	</body>
</html>

jquery如何實(shí)現(xiàn)元素遍歷

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 (父節(jié)點(diǎn))
				<li>li (兄弟節(jié)點(diǎn))</li>
				<li>li (類名為"start"的li節(jié)點(diǎn)的上一個兄弟節(jié)點(diǎn))</li>
				<li class="start">li (類名為"start"的li節(jié)點(diǎn))</li>
				<li>li (兄弟節(jié)點(diǎn))</li>
				<li>li (兄弟節(jié)點(diǎn))</li>
			</ul>
		</div>

	</body>
</html>

jquery如何實(shí)現(xiàn)元素遍歷

prevAll()方法

<!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").prevAll().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (parent)
				<li>li (類名為"start"的li的上一個兄弟節(jié)點(diǎn))</li>
				<li>li (類名為"start"的li的上一個兄弟節(jié)點(diǎn))</li>
				<li>li (類名為"start"的li的上一個兄弟節(jié)點(diǎn))</li>
				<li class="start">li (類名為"start"的li節(jié)點(diǎn))</li>
				<li>li (兄弟節(jié)點(diǎn))</li>
				<li>li (兄弟節(jié)點(diǎn))</li>
			</ul>
		</div>
		<p>在這個例子中,我們返回類名稱為“star”的li元素之前的所有兄弟元素。</p>

	</body>
</html>

jquery如何實(shí)現(xiàn)元素遍歷

prevUntil()方法

<!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").prevUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父節(jié)點(diǎn))
				<li class="stop">li (類名為"stop"的兄弟節(jié)點(diǎn))</li>
				<li>li (類名為"start"的li節(jié)點(diǎn)的上一個兄弟節(jié)點(diǎn))</li>
				<li>li (類名為"start"的li節(jié)點(diǎn)的上一個兄弟節(jié)點(diǎn))</li>
				<li>li (類名為"start"的li節(jié)點(diǎn)的上一個兄弟節(jié)點(diǎn))</li>
				<li class="start">li (類名為"start"的li節(jié)點(diǎn))</li>
				<li>li (兄弟節(jié)點(diǎn))</li>
				<li>li (兄弟節(jié)點(diǎn))</li>
			</ul>
		</div>
		<p>在這個例子中,我們返回在類名為“star”和“stop”的li元素之間的所有上一個兄弟元素,。</p>

	</body>
</html>

jquery如何實(shí)現(xiàn)元素遍歷

感謝各位的閱讀，以上就是“jquery如何實(shí)現(xiàn)元素遍歷”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對jquery如何實(shí)現(xiàn)元素遍歷這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

jquery如何實(shí)現(xiàn)元素遍歷

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽