jquery常用的选择器整理

jquery:

基本的选择器：

$('#id').css('color','blue');//根据id属性为id，设置css样式颜色设置成蓝色

$('h2').css('background-color','pink');

$('input').css('width','500px');

$('.apple').css('background-color','lightgreen');//class属性值查找

$('*').css('background-color','gray');//通配符

$('h2,#usertel,#userqq').css('color','lightblue');//联合选择器

层次选择器：

$('div span');//在div内部获得span节点，不考虑层次,只获得div内第一个span节点，，注意不考虑层次

$('div > span')//在div内部获得子元素span节点

$('div+span')//在div后边获得紧紧挨着的第一个兄弟关系的span节点，获得的是span节点

$('div~span')//在div后边后边获得全部兄弟关系的span节点

并且选择器：

$('li').css('color','red');

$('li:first');//:first第一个 :last 最后一个

$('li:eq(3)').css('color','red')//eq(下标索引号码) 获得节点的下标索引值与给定索引值相等

gt(索引号) great than 节点索引值，大于某个范围

lt(索引值) less than 节点索引值，小于某个范围

$('li:gt(5)').css('background-color','pink');

$('li:lt(5)').css('background-color','orange');

:even 匹配到下标索引值为偶数的节点

:odd 匹配到下标索引值为奇数的节点

$('li:odd').css('background-color','lightblue');

$('li:even').css('background-color','lightgreen');

:not(selector选择器) 去除某个节点

$('li:not(#yun)').css('color','blue');

$(':header').css('background-color','yello');//:header 是一个选择器可以单独使用，选择所有的H标签

并且选择器的注意：

1、并且选择器可以单独使用$(':header.pear').css('color','red');//找出H标签，并且class属性为pear的标签

2、$('li:gt(1):lt(3)') 各种选择器都可以构造“并且”关系

3、并且关系的选择器可以使用多个，每个选择器使用前，已经获得节点的下标要“归位”（归零），这点是什么意思？

20150816-jQuery-07-并且选择器(复杂用法)

4、多个并且关系的选择器，没有前后顺序要求，但是要避免产生歧义

$('li.pear').css('background-color','orange');

内容过滤选择器：

1、 :contains(内容)

包含内容选择器，获得的节点内部必须包含指定的内容

$('div:contains(beijing)')

I like beijing

//标签不构成影响

xiaoming like shanghai

2、:empty

获得空元素（内部没有任何元素/文本（空））节点对象

$('div:empty')

I like beijing

hgello

//选中的是这个

3、:has(选择器)

节点内部必须包含指定选择器对应的元素

$('div:has(#apple)');

apple

//选中的是这个

4、 :parent

寻找的节点必须作为父元素节点存在

$('div:parent')

//选中这个

//选中这个

sun

//选中这个

小东西：console.log($('div:parent'));

表单域选中选择器：

复选框、单选框、下拉框选中

//获得被选中的复选框： :checked

console.log($('.hby:checked'));

//获得被选中的单选框 :checked

console.log($('.sx:checked'));

//获得被选中的下拉列表 :selected

console.log($('option:selected'));

属性操作：获得属性值、修改属性值、删除属性值

$().attr(属性名称); //获得属性信息值 console.log($('input:first')).attr('type');

$().attr(属性名称，值); //设置属性的信息 $('input:first').attr('class','roange'); jquery是不让修改type属性的