jQuery學習之 選擇器

2021-06-06 08:00:34 字數 3848 閱讀 5321

常用的css選擇器:標籤選擇器、id選擇器、類選擇器、群組選擇器、後代選擇器、通配選擇器。

標籤選擇器:e

id選擇器:#id

類選擇器:e.classname或是 .classname

群組選擇器:e1,e2,e3

後代選擇器:e f元素e的任意後代元素f

通配選擇器:* 以文件的所有作為選擇符。

為了實現內容和表現想分離的設計原則。html和css分離

css獲取元素的**

.demo, 1000); 

});內容過濾器:

名稱說明

舉例:contains(text)

匹配包含給定文字的元素

查詢所有包含 "john" 的 div 元素:$("div:contains('john')")

:empty

匹配所有不包含子元素或者文字的空元素

查詢所有不包含子元素或者文字的空元素:$("td:empty")

:has(selector)

匹配含有選擇器所匹配的元素的元素

給所有包含 p 元素的 div 元素新增乙個 text 類: $("div:has(p)").addclass("test");

:parent

匹配含有子元素或者文字的元素

查詢所有含有子元素或者文字的 td 元素:$("td:parent")

可見性過濾器  visibility filters

名稱說明

舉例:hidden

匹配所有的不可見元素

注:在1.3.2版本中, hidden匹配自身或者父類在文件中不占用空間的元素.如果使用css visibility屬性讓其不顯示但是佔位,則不輸入hidden.

查詢所有不可見的 tr 元素:$("tr:hidden")

:visible

匹配所有的可見元素

查詢所有可見的 tr 元素:$("tr:visible")

屬性過濾器 attribute filters

名稱說明

舉例[attribute]

匹配包含給定屬性的元素

查詢所有含有 id 屬性的 div 元素: 

$("div[id]")

[attribute=value]

匹配給定的屬性是某個特定值的元素

查詢所有 name 屬性是 newsletter 的 input 元素:

$("input[name='newsletter']").attr("checked", true);

[attribute!=value]

匹配給定的屬性是不包含某個特定值的元素

查詢所有 name 屬性不是 newsletter 的 input 元素: 

$("input[name!='newsletter']").attr("checked", true);

[attribute^=value]

匹配給定的屬性是以某些值開始的元素

$("input[name^='news']")

[attribute$=value]

匹配給定的屬性是以某些值結尾的元素

查詢所有 name 以 'letter' 結尾的 input 元素: 

$("input[name$='letter']")

[attribute*=value]

匹配給定的屬性是以包含某些值的元素

查詢所有 name 包含 'man' 的 input 元素: 

$("input[name*='man']")

[attributefilter1][attributefilter2][attributefiltern]

復合屬性選擇器,需要同時滿足多個條件時使用。

找到所有含有 id 屬性,並且它的 name 屬性是以 man 結尾的: 

$("input[id][name$='man']")

子元素過濾器 child filters

名稱說明

舉例:nth-child(index/even/odd/equation)

匹配其父元素下的第n個子或奇偶元素

':eq(index)' 只匹配乙個元素,而這個將為每乙個父元素匹配子元素。:nth-child從1開始的,而:eq()是從0算起的!

可以使用: 

nth-child(even) 

:nth-child(odd) 

:nth-child(3n) 

:nth-child(2) 

:nth-child(3n+1) 

:nth-child(3n+2)

在每個 ul 查詢第 2 個li: 

$("ul li:nth-child(2)")

:first-child

匹配第乙個子元素

':first' 只匹配乙個元素,而此選擇符將為每個父元素匹配乙個子元素

在每個 ul 中查詢第乙個 li: 

$("ul li:first-child")

:last-child

匹配最後乙個子元素

':last'只匹配乙個元素,而此選擇符將為每個父元素匹配乙個子元素

在每個 ul 中查詢最後乙個 li: 

$("ul li:last-child")

:only-child

如果某個元素是父元素中唯一的子元素,那將會被匹配

如果父元素中含有其他元素,那將不會被匹配。

在 ul 中查詢是唯一子元素的 li: 

$("ul li:only-child")

表單選擇器 forms 

名稱說明

解釋:input

匹配所有 input, textarea, select 和 button 元素

查詢所有的input元素: 

$(":input")

:text

匹配所有的文字框

查詢所有文字框: 

$(":text")

:password

匹配所有密碼框

查詢所有密碼框: 

$(":password")

:radio

匹配所有單選按鈕

查詢所有單選按鈕

:checkbox

匹配所有核取方塊

查詢所有核取方塊: 

$(":checkbox")

:submit

匹配所有提交按鈕

查詢所有提交按鈕: 

$(":submit")

:image

匹配所有影象域

匹配所有影象域: 

$(":image")

:reset

匹配所有重置按鈕

查詢所有重置按鈕: 

$(":reset")

:button

匹配所有按鈕

查詢所有按鈕: 

$(":button")

:file

匹配所有檔案域

查詢所有檔案域: 

$(":file")

表單過濾器 form filters

名稱說明

解釋:enabled

匹配所有可用元素

查詢所有可用的input元素: 

$("input:enabled")

:disabled

匹配所有不可用元素

查詢所有不可用的input元素: 

$("input:disabled")

:checked

匹配所有選中的被選中元素(核取方塊、單選框等,不包括select中的option)

查詢所有選中的核取方塊元素: 

$("input:checked")

:selected

匹配所有選中的option元素

查詢所有選中的選項元素: 

$("select option:selected")

jQuery選擇器之全選擇器( 選擇器)

在css中,經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery,如果要獲取文件中所有的元素,通過document.getelementsbytagname 中傳遞 同樣可以獲取到 不難發現...

jQuery選擇器之全選擇器(選擇器)

jquery選擇器之全選擇器 選擇器 在css中,經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery,如果要獲取文件中所有的元素,通過document.getelementsbytagna...

jquery選擇器之層次選擇器

層次選擇器中包括 1 ancestor descendant 使用 form input 的形式選中form中的所有input元素.即ancestor 祖先 為from,descendant 子孫 為input.例 bgred div 選擇css類為bgred的元素中的搜有元素。2 parent c...