站長(zhǎng)資訊網(wǎng)
find的意思為查找，是jQuery內(nèi)置的一個(gè)用于遍歷獲得當(dāng)前元素集合中每個(gè)元素的后代節(jié)點(diǎn)的函數(shù)；語法“指定元素對(duì)象.find(selector)”，參數(shù)“selector”包含了供匹配當(dāng)前元素集合的選擇器表達(dá)式，用于過濾返回的后代節(jié)點(diǎn)。
本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6版本、Dell G3電腦。
find的意思為查找，是jQuery內(nèi)置的一個(gè)用于遍歷獲得當(dāng)前元素集合中每個(gè)元素的后代節(jié)點(diǎn)的函數(shù)。
簡(jiǎn)單來說，find()方法可以獲取該元素下的所有（包括子集的子集）子集元素，即可以獲取全部子元素。
-
find() 方法返回被選元素的后代元素。（后代是子、孫、曾孫，依此類推。）
-
DOM 樹：該方法沿著 DOM 元素的后代向下遍歷，直至最后一個(gè)后代的所有路徑（<html>）。
如果想要獲取全部符合條件的子元素，則通過選擇器來篩選。
find的語法
$(selector).find(filter)
| 參數(shù) | 描述 |
|---|---|
| filter | 必需。過濾搜索后代條件的選擇器表達(dá)式、元素或 jQuery 對(duì)象。
注意：如需返回多個(gè)后代，請(qǐng)使用逗號(hào)分隔每個(gè)表達(dá)式。 |
注意：
-
filter 參數(shù)在 find() 方法中是必需的，這與其他樹遍歷方法不同。
-
如需返回所有的后代元素，請(qǐng)使用 "*" 選擇器。
詳細(xì)說明
如果給定一個(gè)表示 DOM 元素集合的 jQuery 對(duì)象，.find() 方法允許我們?cè)?DOM 樹中搜索這些元素的后代，并用匹配元素來構(gòu)造一個(gè)新的 jQuery 對(duì)象。.find() 與 .children() 方法類似，不同的是后者僅沿著 DOM 樹向下遍歷單一層級(jí)。
.find() 方法第一個(gè)明顯特征是，其接受的選擇器表達(dá)式與我們向 $() 函數(shù)傳遞的表達(dá)式的類型相同。將通過測(cè)試這些元素是否匹配該表達(dá)式來對(duì)元素進(jìn)行過濾。
示例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 (曾祖先節(jié)點(diǎn)) <div style="width:500px;">div (祖先節(jié)點(diǎn)) <ul>ul (直接父節(jié)點(diǎn)) <li>li (子節(jié)點(diǎn)) <span>span (孫節(jié)點(diǎn))</span> </li> </ul> </div> </body> </html>
示例2：獲取第一個(gè)子元素
<!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的第一個(gè)子元素</button> </body> </html>
【推薦學(xué)習(xí)：jQuery視頻教程、web前端視頻】
