jQuery里find是什么意思

          來源:php中文網 | 2023-02-10 13:00:41 |

          本教程操作環境: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前端視頻】

          以上就是jQuery里find是什么意思的詳細內容,更多請關注php中文網其它相關文章!

          關鍵詞: jquery

          亚洲AV成人片无码网站| 国产aⅴ无码专区亚洲av麻豆| 亚洲av高清在线观看一区二区| 亚洲一级毛片免费看| 综合自拍亚洲综合图不卡区| 亚洲高清在线播放| 亚洲AV乱码一区二区三区林ゆな| 国产成A人亚洲精V品无码| 亚洲欧洲美洲无码精品VA| 亚洲国产精品VA在线观看麻豆| 国产亚洲精品免费视频播放| 亚洲一区二区视频在线观看| 亚洲成年人啊啊aa在线观看| 少妇亚洲免费精品| 亚洲性久久久影院| 色噜噜亚洲精品中文字幕| 国产亚洲精品AA片在线观看不加载 | 亚洲风情亚Aⅴ在线发布| 亚洲人成电影网站色| 亚洲hairy多毛pics大全| 国产精品亚洲综合天堂夜夜| 国产亚洲男人的天堂在线观看 | 亚洲?V无码乱码国产精品| 亚洲成人影院在线观看| 区三区激情福利综合中文字幕在线一区亚洲视频1| 丁香亚洲综合五月天婷婷| 久久久久亚洲av毛片大| 国产亚洲3p无码一区二区| 亚洲成年轻人电影网站www| 91亚洲va在线天线va天堂va国产 | 亚洲午夜在线一区| 亚洲狠狠成人综合网| 亚洲国产精品精华液| 另类图片亚洲校园小说区| 美腿丝袜亚洲综合| 亚洲av不卡一区二区三区| 亚洲国产精品成人久久久| 99久久国产亚洲综合精品| 国产精品亚洲专区无码牛牛| 精品国产日韩亚洲一区| 亚洲va无码手机在线电影|