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方法
$('ul li a')等价于$(‘ul li’).find(‘a’);

6、子选择器
jQurey为子选择器提供了一个等价的children方法
$('li>a')等价于$(‘li’).children(‘a’);

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

div

1

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;