選擇器用法

2021-07-22 09:14:30 字數 1730 閱讀 7585

選擇器

#idelement

.class

selertor1,selector2 (逗號)

ancestor descendant (祖先元素的所有後代元素)

parent > child (父元素的所有子元素)

prev + next(所有緊接在prev元素後面的next元素)

prev ~ siblings(匹配prev元素後面的所有與prev同輩的siblings元素)

:first

:last

:not(selector)     $("input":not(:checked)")

:even(匹配所有索引值為偶數的元素,從0開始)

:odd(匹配所有索引值為奇數的元素,從0開始)

:eq()(匹配乙個給定索引值的元素)

:gt()(匹配所有大於給定索引值的元素)

:lt()(匹配所有小於給定索引值的元素)

:header()(匹配所有標題元素)

:animated()(匹配所有正在執行動畫效果的元素)

:focus()(觸發每乙個匹配元素的focus事件,設定焦點)

:contains(text)(匹配包涵給定文字的元素)

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

:has(selector)(匹配含有選擇器所匹配的元素的元素)

:parent(元素或文字的父元素)

:hidden (type:hidden display:none)

:visible(所有可見元素)

[attribute](屬性)

[attribute=value](單引號可選,在有中括號時必須加上)

[attribute!=value](不含指定屬性 屬性值不等指定元素)

[attribute^=value](匹配給定的屬性是以某些值開始的元素)

[attribute$=value](匹配給定的屬性是以某些值結尾的元素)

[attribute*=value](匹配給定的屬性是以包含某些值的元素)

[selertor1][selector2](復合屬性選擇器,需要同時滿足多個條件時使用)

:nth-child(':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))

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

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

:only-child(如果某個元素是父元素中唯一的子元素,那將會被匹配)

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

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden

:enabled

:disabled

:checked

:selected

jquery選擇器用法

1.基本選擇器 2.層次選擇器 2.1.sela selb 派生選擇器 父子關係 div span 在 div內部獲得全部 span 標籤,無需考慮層次 2.2.sela selb 子元素選擇器 父子關係 div span 在 div的內部獲得子級 span標籤 2.3.sela selb 兄弟關係...

jquery選擇器用法總結

jquery最核心的是查詢功能,下面對jquery選擇器總結一下 版本是1.9 一 基礎選擇器 1 號選擇器,獲取所有元素。例 2 class選擇器。例 classname 3 id選擇器。例 id 4 多個選擇器的集合。例 div,span,p,classname,id 二 層級選擇器 1 根據父...

選擇器用法規範

選擇器符號 在css中前面加 並填寫id名稱 在css中前面加.並填寫class名稱 在css中填寫元素與屬性,例如 title a href a href title img alt 在css中填寫id class 元素,再填寫偽類,列如 a hover 在css中填寫元素 在css中填寫id c...