在jQuery中,通過選擇器來選取元素是一項非常基礎也是非常重要的技能。而其中的一個子選擇器children(),主要用來選取某一目標元素的下一層子元素。
$(selector).children(filter);
其中需要注意的是,children()只會選取目標元素的直接子元素,而不會向下選取子元素的子元素。舉個例子,比如下面這段HTML代碼:
<div id="parent"> <div class="child"> <div class="grandson"></div> </div> <div class="child"></div> </div>
那么如果我們使用以下代碼:
$("#parent").children(".child")
那么結果將會是:
<div class="child"></div> <div class="child"></div>
而如果我們使用以下代碼:
$("#parent").children(".grandson")
那么結果將會是空的,因為".grandson"并不是"#parent"的直接子元素。
除此之外,children()也支持篩選器的功能,可以實現更精細的選擇。例如,如果我們想要選取所有class為"child"的直接子元素中,具有"data-type"屬性的子元素,可以使用以下代碼:
$("#parent").children(".child[data-type]")
總之,children()是一項非常實用的選擇器,尤其在操作DOM元素的時候可以起到很大的作用。使用它的時候需要注意它只會選取直接子元素,而且也支持篩選器的功能。
上一篇css帶圖片的卡片