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
}