jquery怎麼查詢所有子元素
- 青灯夜游原創
- 2022-04-15 12:11:249878瀏覽
在jquery中，可以利用find()方法來查詢所有子元素，該方法可以取得指定元素下的所有子集元素，包括子集的子集；該方法需要傳入一個參數來過濾結果，只需要將參數設為“*”即可找到全部子元素，語法“$(指定元素).find("*")”。
本教學操作環境：windows7系統、jquery3.6.1版本、Dell G3電腦。
在jquery中，想要找出子元素有兩種方法：
children()方法：取得該元素下的直接子集元素
find()方法：取得該元素下的所有（包含子集的子集）子集元素
其中，想要查詢所有子元素，就只能使用find()方法。
find() 方法傳回被選元素的後代元素。 （後代是子、孫、曾孫，依此類推。）
DOM 樹：此方法沿著DOM 元素的後代向下遍歷，直至最後一個後代的所有路徑（< ;html>）。
語法：
$(selector).find(filter)
| #描述 | |
|---|---|
|
|
注意：
如需傳回多個後代，請使用逗號分隔每個表達式。
說明：filter參數用於過濾查找結果，只需要將參數設為「*」即可尋找全部子元素。
範例：查詢所有子元素###<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.6.1.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 (父节点)
<ul>ul (指定元素)
<li>li (子节点1)
<span>span (孙节点1)</span>
</li>
<li>li (子节点2)
<span>span (孙节点2)</span>
</li>
<li>li (子节点3)
<span>span (孙节点3)</span>
</li>
</ul>
</div>
<button>选取ul的所有子元素</button>
</body>
</html>############【推薦學習：###jQuery影片教學###、###web前端影片## #】###以上是jquery怎麼查詢所有子元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn