jQuery遍歷 過濾

2021-09-03 01:26:18 字數 2320 閱讀 6023

任務描述

本關任務: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()

如何給divclass="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 方法返回被選元素的首個元素。下面的例...