1. 程式人生 > >jQuery九類選擇器

jQuery九類選擇器

jQuery九類選擇器

jQuery選擇器基本選擇器
#id/標簽名/樣式名/選擇器A,選擇器B           

jQuery層次選擇器

*form input:查詢form下所有input元素,含有後代關系
form>input:查詢form下所有input元素,有有父子關系,沒有後代關系
form+input:查詢與form同級的第一個input元素,是兄弟關系
form~input:查詢與form同級的所有input元素,是兄弟關系

jQuery增強型基本選擇器

:first:查詢第一個元素
:last:查詢最後個元素
:checked:查詢選中的復選框
:not(:checked):查詢未選中的復選框
:even:偶數
:odd:奇數
:eq():索引從0開始
:gt():大於索引號
:lt():小於索引號
:header:查詢所有<h1/2/3/4/5/6>標簽
 .css("key","value")為查詢到的所有標簽添加CSS樣式

jQuery內容選擇器

:contains(‘john‘):表示包含指定字符串的標簽,字符串大小寫敏感
:empty:表示查詢空標簽的元素
:has(‘p‘):表示查詢有子元素的元素
 .addClass("樣式名"):為查詢到的所有標簽添加樣式
:parent:表示查詢非空標簽

jQuery可見性選擇器
:hidden:表示查詢所有隱蔽的標簽
:visible:表示查詢所有顯示的標簽
或:not(:hidden)

jQuery屬性選擇器

div[id]:表示查詢含有id屬性的div元素
input[name=‘newsletter‘]:表示查詢含有name屬性,且其值是"newsletter"的input元素
input[name!=‘newsletter:表示查詢含有name屬性,且其值不是"newsletter"的input元素
input[name^=‘newsletter:表示查詢含有name屬性,且其值以"news"開頭的input元素
"input[name$=‘letter‘:表示查詢含有name屬性,且其值以"letter"結尾的input元素
input[name*=‘news‘]::表示查詢含有name屬性,且其包含"news"的input元素
input[id][name$=‘letter‘]:表示查詢含有id屬性,且含有name屬性,其值以"letter"字符串結束的input元素  

jQuery子元素選擇器

:first-child:表示查詢第一個子元素
:last-child:表示查詢最後一個子元素
:only-child:表示查詢只有一個子元素的元素
:nth-child(編號從1開始),表示查詢指定編號的元素  

jQuery表單選擇器

:input:查找所有input元素的個數,註:包含所有input,textarea,select和button元素
:text
:password
:radio
:checkbox
:file
:submit
:reset
:image
:file

表單對象屬性

:enabled:表示查詢可用的元素
:disabled:表示查詢不可用的元素
:checked:表示查詢選中的復選/單選框的元素
:selected:表示查詢選中的下拉框元素

jQuery九類選擇器