jQuery中常用選擇器(下)

內容選擇過濾器

//1.查找含有指定內容的元素:contains(text)
 console.log($('#app li:contains(列表)')) //jQuery.fn.init(3) [li.item1, li.item2, li.item3, prevObject: jQuery.fn.init(1)]
//2.匹配所有不包含⼦元素或者⽂本的空元素:empty
 console.log($('#app span:empty')) //jQuery.fn.init [span.span1, prevObject: jQuery.fn.init(1)]
//3.含有選擇器所匹配的元素:has(selector)
 console.log($('#app li:has(h4)').addClass('a')) //jQuery.fn.init [li.item4.a, prevObject: jQuery.fn.init(1)]
//4.選取所有不可⻅的元素
 console.log($('#app span:hidden')) //jQuery.fn.init [span.span1, prevObject: jQuery.fn.init(1)]
//5.選取所有可⻅的元素
 console.log($('#app span:visible')) //jQuery.fn.init [span.span2, prevObject: jQuery.fn.init(1)]

屬性過濾選擇器

//直接選擇某屬性[attribute]
console.log($('#app ul li[id]')) //jQuery.fn.init [li#item5, prevObject: jQuery.fn.init(1)]
//屬性的值爲 value的元素 [attribute]
console.log($('#app span[class=span1]')) //jQuery.fn.init [span.span1, prevObject: jQuery.fn.init(1)]
//屬性的值不爲 value的元素 [attribute!=value]
console.log($('#app span[class!=span1]')) //jQuery.fn.init [span.span2, prevObject: jQuery.fn.init(1)]
//屬性的值以value開始的元素 [attribute^=value]
console.log($('#app span[class^=span]')) //jQuery.fn.init(2) [span.span1, span.span2, prevObject: jQuery.fn.init(1)]

⼦元素過濾選擇器

 //選取每個⽗元素下的第 index 個⼦元素或者奇偶元素（index 從 1開始）集合元素
 console.log($('#app ul li:nth-child(1)')) //jQuery.fn.init [li.item1, prevObject: jQuery.fn.init(1)]
 //選取每個⽗元素下的第一個元素:first-child
 console.log($('#app ul li:first-child')) //jQuery.fn.init [li.item1, prevObject: jQuery.fn.init(1)]
 //選取每個⽗元素下的最後一個元素:last-child
 console.log($('#app ul li:last-child')) //jQuery.fn.init [li#item5, prevObject: jQuery.fn.init(1)]
 //如果某個元素是它⽗元素中唯⼀的⼦元素，則會被匹配:only-child
 console.log($('#app ul li:only-child')) //jQuery.fn.init [prevObject: jQuery.fn.init(1)]

表單過濾選擇器

 //:enabled選取所有可用的元素
 console.log($('input:enabled')) //jQuery.fn.init(4) [input.user, input.pwd, input.sex, input.sex, prevObject: jQuery.fn.init(1)]
 //:disabled選取所有不可用的元素
 console.log($('input:disabled')) //jQuery.fn.init [prevObject: jQuery.fn.init(1)]
 //:checked 選取所有被選中元素（複選框、單選框）
 console.log($('input:checked')) //jQuery.fn.init(2) [input.sex, input, prevObject: jQuery.fn.init(1)]
 //:selected 選取所有被選中元素（下拉列表）
 console.log($('option:selected')) //jQuery.fn.init [option.java, prevObject: jQuery.fn.init(1)]

表單選擇器

//選取所有的 <input><textarea> <select><button>
$('input')
$('textarea')
$('select')
$('button')
//選擇所有單⾏⽂本框:text
console.log($('input:text'))
//選擇所有單⾏⽂本框:password
console.log($('input:password'))
//選擇所有的單選框:radio
console.log($('input:radio'))
//選擇所有的多選框:checkbox
console.log($('input:checkbox'))
//選擇所有的提交按鈕:submit
console.log($('input:submit'))
//選擇所有的圖像按鈕:image
console.log($('input:image'))
//選擇所有的重置按鈕:reset
console.log($('input:reset'))
//選擇所有的按鈕:button
console.log($('input:button'))
//選擇所有的上傳域:file
console.log($('input:file'))
//選擇所有的不可⻅元素:hidden
console.log($('input:hidden'))

jQuery選擇器的機制

• 如果元素不存在時，JS 不會保存阻塞其他代碼的運
  ⾏。
• $(#ID) 或者其他選擇器獲取的永遠是對象，即使⽹⻚
  上沒有此元素。使⽤ jQuery 檢查某個元素是否存在要
  不能使⽤,⽽是根據元素是否有⻓度判斷

//錯誤示範
if($('#app')){
 //dosomething
}
//正確示範
if($('#app').length>0 ){
 //dosomething
}else{
 //拋錯
}
//or 轉化爲 DOM 元素來判斷
if($('#app')[0]){
 //dosomething
}