任務描述
本關任務:jquery 遍歷 dom 元素的過濾方法。效果如下:
相關知識
為了完成本關任務,你需要掌握:1.first()
,2.last()
3.eq()
,4.filter()
,5.not()
。
基本的html結構如下(css已省略):
我是第乙個元素
我是第二個元素
我是第三個元素
我是第四個元素
我是第五個元素
效果圖如下:
first()
如何給div
下的第乙個p
元素設定背景色呢? 這裡用first()
。**如下:
$("div p").first().css("background","orange");
效果如下:
從上面可以看出:first()
方法會返回被選元素的第乙個元素。
還記得學過的過濾選擇器嗎?也是可以實現相同效果的。**如下:
$("div p:first").css("background","orange");
last()
如何給div
下的最後乙個p
元素設定背景色呢? 這裡用last()
。**如下:
$("div p").last().css("background","orange");
效果如下:
從上面可以看出:last()
方法會返回被選元素的最後乙個元素。
用過濾選擇器實現**如下:
$("div p:last").css("background","orange");
eq()
如何給div
下的第三個p
元素設定背景色呢? 這裡用eq()
。**如下:
$("div p").eq(2).css("background","orange");
效果如下:
從上面可以看出:eq()
方法會返回帶有指定索引號的元素。
注意:索引是從0
開始的。
用過濾選擇器實現**如下:
$("div p:eq(2)").css("background","orange");
filter()
如何給div
下class="active"
的p
元素設定背景色呢? 這裡用filter()
。**如下:
$("div p").filter(".active").css("background","orange");
效果如下:
從上面可以看出:filter()
方法會規定乙個標準,匹配的會被返回,不匹配的會被刪除。
用選擇器實現**如下:
$("div p.active").css("background","orange");
not()
如何給div
下沒有class="active"
的p
元素設定背景色呢? 這裡用not()
。**如下:
$("div p").not(".active").css("background","orange");
效果如下:
從上面可以看出:not()
方法會返回不匹配標準的元素,和filter()
相反。
用過濾選擇器實現**如下:
$("div p:not(.active)").css("background","orange");
程式設計要求
格式注意:
效果如下:
我是第乙個元素
我是第二個元素
我是第三個元素
我是第四個元素
我是第五個元素
jQuery 遍歷 過濾
三個最基本的過濾方法是 first last 和 eq 它們允許您基於其在一組元素中的位置來選擇乙個特定的元素。其他過濾方法,比如 filter 和 not 允許您選取匹配或不匹配某項指定標準的元素。first 方法返回被選元素的首個元素。下面的例子選取首個 元素內部的第乙個 元素 document...
jQuery遍歷(過濾)
first 返回被選元素的首個元素 p first css background color yellow last 返回被選元素的最後乙個元素 p last css background color yellow p first css background color yellow 和 p fi...
23 jQuery 遍歷 過濾
縮寫搜尋元素的範圍 三個最基本的過濾方法是 first last 和 eq 它們允許您基於其在一組元素中的位置來選擇乙個特定的元素。其他過濾方法,比如 filter 和 not 允許您選取匹配或不匹配某項指定標準的元素。jquery first 方法 first 方法返回被選元素的首個元素。下面的例...