常用的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...