jQuery选择器学习小结

常规选择器：

1、子代选择器：>

1

2

3

4

5

6

(function(){(‘#divid > p’).css(‘color’,’red’);

});

result:只有123会变成红色；

2、局部全局变量：

(function(){(‘#divid *’).css(‘color’,’red’);

});

只作用于这个选择器下面的全部项；

3、在id和类选择器前加上前缀；

1

2

3

4

加上前缀以表示区别；

4、多class选择器；

1

(function(){(‘.box.pox’).css(‘color’,’red’);

});

用于精确选择（注意和群组选择器的区别）；

5、后代选择器

jQurey为后代选择器提供了一个等价的find方法

(′ullia′)等价于(‘ul li’).find(‘a’);

6、子选择器

jQurey为子选择器提供了一个等价的children方法

(′li>a′)等价于(‘li’).children(‘a’);

7.next选择器(同级的下一个p节点)与nextAll选择器（同级往下的所有

p节点）

div1

2
//只能用在下一个节点是p的情况，如果下一个不是p则没有效果
3

(function(){(‘#divid + p’).css(‘color’,’red’);

//$(‘#divid’).next(‘p’).css(‘color’,’red’);

});

result: 2 turn to red;

(function(){(‘#divid ~ p’).css(‘color’,’red’);

//$(‘#divid’).nextAll(‘p’).css(‘color’,’red’);

});

result: 2，3 turn to red;//下一个节点不是p也没有关系；

8、使用jQurey提供的方法可以加快运算速度，方法里面不传递参数默认为*；

$(‘#divid’).nextAll( ).css(‘color’,’red’);//同级的往后所有的变红色，一般不建议使用，不好掌控且会造成资源浪费；

9、prev,prevAll用法参照next，nextAll；

10、siblings:上下同级所有；

nextUntil(‘p’)：向下遇到p停止选中；

prevUntil(‘p’)：向上遇到p停止选中；

属性选择器

过滤选择器

1、eq =>equal;

2、gt =>great than;

3、lt =>less than;