站長資訊網
find的意思為查找，是jQuery內置的一個用于遍歷獲得當前元素集合中每個元素的后代節點的函數；語法“指定元素對象.find(selector)”，參數“selector”包含了供匹配當前元素集合的選擇器表達式，用于過濾返回的后代節點。
本教程操作環境：windows7系統、jquery3.6版本、Dell G3電腦。
find的意思為查找，是jQuery內置的一個用于遍歷獲得當前元素集合中每個元素的后代節點的函數。
簡單來說，find()方法可以獲取該元素下的所有（包括子集的子集）子集元素，即可以獲取全部子元素。
-
find() 方法返回被選元素的后代元素。（后代是子、孫、曾孫，依此類推。）
-
DOM 樹：該方法沿著 DOM 元素的后代向下遍歷，直至最后一個后代的所有路徑（<html>）。
如果想要獲取全部符合條件的子元素，則通過選擇器來篩選。
find的語法
$(selector).find(filter)
| 參數 | 描述 |
|---|---|
| filter | 必需。過濾搜索后代條件的選擇器表達式、元素或 jQuery 對象。
注意：如需返回多個后代，請使用逗號分隔每個表達式。 |
注意：
-
filter 參數在 find() 方法中是必需的，這與其他樹遍歷方法不同。
-
如需返回所有的后代元素，請使用 "*" 選擇器。
詳細說明
如果給定一個表示 DOM 元素集合的 jQuery 對象，.find() 方法允許我們在 DOM 樹中搜索這些元素的后代，并用匹配元素來構造一個新的 jQuery 對象。.find() 與 .children() 方法類似，不同的是后者僅沿著 DOM 樹向下遍歷單一層級。
.find() 方法第一個明顯特征是，其接受的選擇器表達式與我們向 $() 函數傳遞的表達式的類型相同。將通過測試這些元素是否匹配該表達式來對元素進行過濾。
示例1
返回 <ul> 后代中所有的 <span> 元素：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/jquery-3.6.3.min.js"></script> <script> $(document).ready(function() { $("ul").find("span").css({ "color": "red", "border": "2px solid red" }); }); </script> <style> .ancestors *{ display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> </head> <body class="ancestors">body (曾祖先節點) <div style="width:500px;">div (祖先節點) <ul>ul (直接父節點) <li>li (子節點) <span>span (孫節點)</span> </li> </ul> </div> </body> </html>
示例2：獲取第一個子元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-3.6.0.min.js"></script> <script> $(function() { $("button").click(function() { $("ul").find(":first-child").css("color", "red"); }) }) </script> </head> <body> <ul style="border: 1px solid red;"> <li>香蕉</li> <li>蘋果</li> <li>梨子</li> <li>橘子</li> </ul> <button>父元素ul的第一個子元素</button> </body> </html>
【推薦學習：jQuery視頻教程、web前端視頻】
