jQuery选择器

标签选择器
$('p').css('color','red');

类选择器
$('.one').css('color','blue');

id选择器
$('#for').css('color','orange');

 

属性选择器 带有size属性的
$('[size]').css('border','1px solid red');

属性值等于多少的
$('[size=20]').css('color','red');

属性值中开头包含beijing的
$('[address^=beijing]').css('color','red');
属性值结尾有com的
$('[value$=com]').css('color','red');
属性值不包含shanhai的
$('[address!=shanghai]').css('color','red');
属性之中有class属性属性值中还有t
$('[class*=t]').css('color','red');

并且关系属性选择器  同时符合这几种属性的

$('[attr=value],[attr1=value1],[attr2=value2],[attr3=value3]');

属性中包含这个标签的
$('div span').css('color','red');

属性的向下兄弟标签(多个)
$('div~span').css('color','red');

$('div').nextAll('span').css('background', 'lightgray');

 

属性向下查找兄弟标签(一个)
$('div+span').css('color','red');

$('div').next('span').css('font-size', '50px');

 

获取ID为one的多有的同辈元素为div的(不论前后)
$(#one).suiblings('div')

 

获取ID为one元素的前面紧邻的同辈div元素
$(#one).prev('div')

属性的子标签 直接子节点,不嵌套任何标签的子节点
$('div>span').css('color','red');

 

div下的所有span  a标签中的span也包含在内(不是直接子节点)

$('div span').css('color','pink') 

 

//属性中第一个 最后一个 指定第几个:eq()
$('li:first').css('color','red');
$('li:last').css('color','red');
$('li:eq(3)').css('color','red');

 

 

//属性中gt大于 lt小于 混合使用会清0
//:gt() great than 大于指定下标的元素 不包含
//:lt() less than
$('li:gt(4)').css('color','red');
$('li:lt(1)').css('color','red');
$('li:gt(2):lt(3)').css('color','red');

//even偶数 odd奇数 下标从0开始
$('li:even').css('color','red');
$('li:odd').css('color','yellow');

//:header 选择页面上的所有标题标签 h系列
$(':header.h').css('color','red');

在li中除啦class是one的所有的元素
$('li:not(.one)')

 

属性中包含这个值得 :contains
$('span:contains(老树)').css('color','yellow');

:has(tag) 节点内部包含tag标签的标签
$('div span').css('color','yellow');
$('div:has(span)').css('color','yellow');

获取作为父节点的div里的子标签
$('div:parent').css('color','red');

//获取空的标签:empty
$('*:empty').css('border','1px solid red');

 

 

多选框选择器

类名为hobby的多选框中  下标为0的value

$('.hobby:checked')[0].value

 

群组选择器