jquery的常用选择器

jquery的常用选择器  

基本选择器——

$('#id名')根据给定的id来匹配到元素

$('.class名')根据给定的class来匹配到元素

$('element')根据给定的标签名来匹配到元素

$('*')匹配所有元素

$('#id,.class名,element')匹配到页面中多个选择器

写法示例

$(document).ready(function(){
  $('#box').css('background','red')
  $('.box').css('background','blue')
$('span').css('font-size','30px')
$('*').css('font-family','宋体')
$('#box,.box,span').css('color','pink')

层级选择器（相当于父类和子类的元素关系）——

给定的父级元素下匹配所有的子元素：$('父级元素 > 子级元素')

给定的祖先元素下匹配所有的后代元素：$('祖先元素  后代元素')

匹配紧跟在prev元素后面的next元素：$('prev + next')(同级的元素)

匹配prev元素后面所有的siblings元素：$('prev ~ siblings')

$('ul>li').css('list-style','none')
$('ul li').css('list-style','none')
$('input+button').css('height','50px')
$('label~input').css('background','pink')

顺序选择器——

1、顺序

$(':first') 第一个元素

$(':last')  最后一个元素

2、比较(x的顺序是从0开始)

$(':gt(x)')表示大于值x的元素

$(':lt(x)')表示小于值x的元素

$(':eq(x)')表示等于值x的元素

3、奇偶数

$(':odd')奇数顺序

$(':even')偶数顺序

4、非

$(':not(selector)')匹配不是selector的所有元素

$(document).ready(function(){
$('p:first').css('color','red')
$('p:last').css('color','blue')
$('p:gt(1)').css('font-size','30px')
$('p:lt(2)').css('color','red')
$('p:eq(1)').css('color','red')
$('p:odd').css('background','#ccc')
$('p:even').css('background','pink')
$('p:not(#box)').css('background','red')

内容选择器——

$(':contains(text)') 匹配包含给定文本（text）的元素

$(':has(selector)')匹配包含特定选择器元素的元素

$(':empty')匹配不含有内容的元素（即 不包含子元素或者文本的空元素）

$(':parent')匹配含有子元素或者文本的元素

$('div:contains(jun)').css('background','blue')
$('div:has(span)').css('color','red')
$('div:empty').css('background','red')
$('div:parent').css('background','red')

属性选择器——

$('[attribute=value]')匹配给定属性是某个特定值的元素

$('[attribute！=value]')匹配所有不含有指定值的属性，或者说是属性不等于特定值的元素

$('[attribute ^= value]')匹配给定属性是以某些值开始的元素

$('[attribute $= value]')匹配给定属性是以某些值结尾的元素

$('[attribute *= value]')匹配给定属性包含某些值的元素

$('attrSel[1] attrSel[1] attrSel[1]')复合选择器，需要同时满足多个条件时使用

$('input[type]').css('background','pink')
$('input[type=button]').css('background','blue')
$('input[type!=text]').css('background','red')
$('input[type ^=t ]').css('background','red')
$('input[type $=n ]').css('background','red')
$('input[type *=o ]').css('background','blue')
$('input[id][name*=n]').css('background','red')

表单选择器——

$(':enabled')所有激活的input元素（可以使用的input元素）

$(':disabled')所有禁用的input元素（不可以使用的input元素）

$(':selected')所有被选取的元素，针对于select元素

$(':checked')所有被选中的input元素

$(':enabled').css('background','pink')
$(':disabled').css('background','red')
$(':selected').css('color','blue')
$(':checked').parent().css('color','red')

总结：选择器较多，较难记忆，特此记录。