【網站建設】jQuery支持的CSS選擇器有哪些?

2016-07-04 1559 3 編輯:深色多郎 來源:深色多郎博客

jQuery支持大多數CSS3.0中的選擇器,并自定義了一些選擇器,包括以下幾類。

1.基本選擇器

基本選擇器包括標記選擇器、類選擇器、ID選擇器、通配符、交集選擇器、并集選擇器。寫法就是把原來的CSS選擇器寫在$("")內,如$("p")、$(".cl")、 $("#one")、$("*")、$("p.c1")、$("hl,#one")。

如果選擇器選擇的結果是元素的集合,則可以用eq(n)來選擇集合中的第n+l個元素。

2.位置選擇器

位置選擇器包括后代選擇器、子選擇器、相鄰選擇器、弟妹選擇器。

其中,弟妹選擇器如$("hl~p")是jQuery新增的,用于選擇hl元素后面的所有同輩P元素,而相鄰選擇器如$("hl+P)只能選擇緊鄰在hl元素后面的一個同輩P元素。這是它們的區別。另外,jQuery中的方法siblings()與前后位置無關,只要是同輩元素就可以選取。

提示:jQuery中沒有動態偽類選擇器(如E:hover),因為它提供了hover()方法模擬該功能。

3、過濾選擇器

使用jQuery基本選擇器后,返回的jQuery對象通常會包含一組DOM元素。但在實際中,往往還需要根據特定的條件從獲取的元素集合中篩選出一部分DOM元素,在這種情況下,可以在基本選擇器的基礎上添加過濾選擇器來完成篩選任務。根據具體情況,在過濾選擇器中可以使用元素的索引值、內容、屬性、子元素位置、表單域屬性以及可見性等作為篩選條件。

1.位置過濾選擇器

jQuery支持的CSS 3位置選擇器可以看成是CSS偽對象選擇器的一種擴展,如它也有:first-child這樣的選擇器,但能選擇的某個位置上的元素更多了。

(1)下面是幾個位置過濾選擇器的示例。

①改變第一個div元素的背景色為#bbffaa。

②改變id不為one的所有P元素的對齊屬性為居中對齊。

③改變索引值為偶數的tr元素的背景色為#bbffaa。

④改變索引值為大于3且為奇數的p元素的文本顏色為紅色。

⑤選取表格中除第一行和最后一行外的所有行,并設置背景顏色。

⑥選取input元素中的所有非radio元素。

⑦選中頁面中除第一個p元素外的所有P元素。

注意:not(filter)的參數filter只能是位置選擇器或過濾選擇器,而不能是基本選擇器。

(2)有了位置選擇器,使制作表格的隔行變色效果變得非常簡單,只需要一行代碼就能實現,下面是實現表格隔行變色的代碼。

2.內容過濾選擇器

內容過濾選擇器的過濾規則主要體現在它所包含的子元素和文本內容上。

下面是一些jQuery內容過濾選擇器用法的示例。

(1)改變含有文本“不”的#test元素的背景色為#bfa。

(2)改變不包含子元素(或者文本元素)的div空元素的背景色為#bfa。

(3)改變含有class為mini元素的P元素的背景色為#bfa。

(4)改變含有子元素(或者文本元素)的div元素的背景色為#bfa。

包含選擇器"E:has(F)",它和后代選擇器“E F"的區別是后代選擇器選中的是后面一個元素F,而包含選擇器選中的是前面這個元素E。

3.屬性過濾選擇器

在HTML文檔中,元素的開始標記中通常包含多個屬性,在CSS或jQuery中,除了使用id和class屬性作為選擇器外,還可以根據各種屬性對由選擇器查詢得到的元素進行過濾。屬性選擇器用于選中具有某個屬性或屬性的屬性值匹配給定值的元素集合。屬性選擇器包含在方括號內,而不是以冒號開頭。

下面是屬性選擇器的一些應用舉例。

1)含有屬性title的P元素:

2)屬性title值等于"test"的div元素:

3)屬性title值不等于"test"的div元素(沒有屬性title的也將被選中):

4)屬性title值以"te"開始的div元素:

5)屬性title值含有"es"的div元素:

6)屬性class值包含單詞"lone"的p元素:

7)含有id屬性且name屬性以"es"結尾的input元素:

4.表單域屬性過濾選擇器

表單域過濾選擇器是jQuery自定義的,不是CSS 3中的選擇器,它用來處理更復雜的選擇。

說明:hidden選擇器可選中兩種元素:一種是CSS屬性設置為display: none或visibility:hidden的元素,另一種是表單中的文本隱藏域(<input type="hidden"/>)元素。

有時希望判斷用戶當前選中的復選框和單選按鈕,這可以通過:checked選擇器判斷,而不能通過checked屬性的值來判斷,那樣只能獲得初始狀態下的選中情況,而不是當前的選擇情況。如果要判斷用戶在列表框中選中哪幾項,則可通過:selected選擇器得到。


本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾