jQuery九類選擇器
阿新 • • 發佈:2018-05-06
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九類選擇器