1.* :所有元素選擇器(某層次下所有標籤)
2..:類
3.#:id選擇器
4., : 並列選擇器(對分隔的元素均進行選取)
5.空格: 後代選擇器(可後代的後代,多層選擇)
6.> :子元素選擇器.它與後代選擇器不同之處是,子元素選擇器只對子元素生效,而不會影響其它後代元素.(只能是一層)
7.+ :相鄰兄弟元素(只能選取乙個)
是屬性的標誌。只顧其名不顧其值。
1.簡易屬性匹配
基本語法:
element[attr]。
例:h1[class]
這些h1標籤都會受影響。
2.精確值匹配 「=」
具體屬性值的匹配。例如:input[type=」radio」][name=」***」]
3.部分屬性值匹配 「~=」
例如:div[class~=」warning」] 可以讓div字型變紅色
錯誤提示,紅色顯示!
jquery選擇器是建立在css選擇器的基礎上的。
1、基本選擇器
1.* :所有元素選擇器(某層次下所有標籤)
2..: 類
3.#: id選擇器
4., : 並列選擇器(對分隔的元素均進行選取)
5.空格: 後代選擇器(可後代的後代,多層選擇)
6.> : 子元素選擇器.它與後代選擇器不同之處是,子元素選擇器 只對子元素生效,而不會影響其它後代元素.(只能是一層)
7.+ :相鄰兄弟元素(只能選取乙個)
2、濾鏡選擇器
1):first :第乙個
2):last :最後乙個
3):even :偶數
4):odd :奇數
5):hidden :隱藏的
6):visible :顯示的
7):eq(index) :序數等於index的元素
8):gt(index) :序數大於index的元素
9):lt(index) :序數小於index的元素
10) :not :不滿足選擇條件的元素
對表單操作的
11) :enabled:可用的
12) :disabled:禁用的
13) :checked:選中的
14) :selected:選擇的
層次選擇器 .
15) .next() 下乙個同級元素
16) .nextall()下面所有的同級元素
17) .prev() 上乙個
18) .prevall() 上面所有同級元素
19).siblings()
所有同級元素
(同胞、相鄰元素)
20) .parent()父級元素
21) .children 子級元素
22) .find() 查尋所有後代元素
23)this
.prevall().children(
":first"
); //同級上面第乙個元素
24)return
this
.prevall().children(
":last"
); //同級上面最後乙個元素
選擇器例項選取*
$("*")
所有元素
#id
$("#lastname")
id="lastname" 的元素
.class
$(".intro")
所有 class="intro" 的元素
element
$("p")
所有 元素
.class.class
$(".intro.demo")
所有 class="intro" 且 class="demo" 的元素
:first
$("p:first")
第乙個 元素
:last
$("p:last")
最後乙個 元素
:even
$("tr:even")
所有偶數 元素
:odd
$("tr:odd")
所有奇數 元素
:eq(index)
$("ul li:eq(3)")
列表中的第四個元素(index 從 0 開始)
:gt(no)
$("ul li:gt(3)")
列出 index 大於 3 的元素
:lt(no)
$("ul li:lt(3)")
列出 index 小於 3 的元素
:not(selector)
$("input:not(:empty)")
所有不為空的 input 元素
:header
$(":header")
所有標題元素 -
:animated
所有動畫元素
:contains(text)
$(":contains('w3school')")
包含指定字串的所有元素
:empty
$(":empty")
無子(元素)節點的所有元素
:hidden
$("p:hidden")
所有隱藏的 元素
:visible
$("table:visible")
所有可見的**
s1,s2,s3
$("th,td,.intro")
所有帶有匹配選擇的元素
[attribute]
$("[href]")
所有帶有 href 屬性的元素
[attribute=value]
$("[href='#']")
所有 href 屬性的值等於 "#" 的元素
[attribute!=value]
$("[href!='#']")
所有 href 屬性的值不等於 "#" 的元素
所有 href 屬性的值包含以 ".jpg" 結尾的元素
:input
$(":input")
所有 元素
:text
$(":text")
所有 type="text" 的 元素
:password
$(":password")
所有 type="password" 的 元素
:radio
$(":radio")
所有 type="radio" 的 元素
:checkbox
$(":checkbox")
所有 type="checkbox" 的 元素
:submit
$(":submit")
所有 type="submit" 的 元素
:reset
$(":reset")
所有 type="reset" 的 元素
:button
$(":button")
所有 type="button" 的 元素
:image
$(":image")
所有 type="image" 的 元素
:file
$(":file")
所有 type="file" 的 元素
:enabled
$(":enabled")
所有啟用的 input 元素
:disabled
$(":disabled")
所有禁用的 input 元素
:selected
$(":selected")
所有被選取的 input 元素
:checked
$(":checked")
所有被選中的 input 元素
jQuery選擇器總結
父元素中所有的子元素,不包括後代元 父元素 子元素 選擇某元素的緊挨著的元素 如果不存在則什麼都不選擇 某元素 需要查詢的元素 層次選擇器4 個 選擇父元素中的某些元素 父元素 子元素 選擇選擇兄弟元素 可以間隔其他元素 某元素 需要查詢的元素 簡單選擇器10 個 簡單選擇器的特點是有個 first...
Jquery選擇器總結
jquery中的選擇器通用的格式為 selector 這裡的selector總的來說可以按照幾種類別進行選擇 1 按照元素的名稱選 這時直接寫元素的名稱即可,此時返回的是所有該名稱元素的集合。如 a 選擇所有的元素,是個集合陣列 p 選擇所有的元素 2 按照元素的id屬性選擇 這時selector的...
jQuery選擇器總結
jquery 的選擇器可謂之強大無比,這裡簡單地總結一下常用的元素查詢方法 myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用my...