站長資訊網(wǎng)
在jquery中，可以使用find()方法來查詢所有后代節(jié)點(diǎn)。find()方法可以返回指定元素下的所有后代元素（包括子、孫、曾孫，依此類推），語法“$(selector).find(filter)”；參數(shù)“filter”用于過濾搜索后代，縮小返回值的范圍，想要返回所有的后代節(jié)點(diǎn)，需將filter值設(shè)置為“*”。
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6.1版本、Dell G3電腦。
find() 方法返回被選元素的所有后代元素。（后代是子、孫、曾孫，依此類推。）
-
DOM 樹：該方法沿著 DOM 元素的后代向下遍歷，直至最后一個后代的所有路徑（<html>）。
語法：
$(selector).find(filter)
| 參數(shù) | 描述 |
|---|---|
| filter | 必需。過濾搜索后代條件的選擇器表達(dá)式、元素或 jQuery 對象。
注意：如需返回多個后代，請使用逗號分隔每個表達(dá)式。 |
注意：filter 參數(shù)在 find() 方法中是必需的，可縮小返回值的范圍；而如需返回所有的后代元素，則 filter設(shè)置為"*" 選擇器。
示例：使用 "*" 選擇器返回 <html> 的所有后代元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-3.6.1.min.js"></script> <script> $(document).ready(function() { $("html").find("*").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>span (曾孫節(jié)點(diǎn))<span>span (曾曾孫節(jié)點(diǎn))</span></span></span> </li> <li>li (子節(jié)點(diǎn)) <span>span (孫節(jié)點(diǎn))</span> </li> </ul> </div> </body> </html>
示例：返回 <ul> 后代中的所有 <span> 元素
$(document).ready(function(){ $("ul").find("span").css({"color":"red","border":"2px solid red"}); });
【推薦學(xué)習(xí)：jQuery視頻教程、web前端視頻】
