过滤选择器
1.基本选择器
2.内容选择器
3.可见性选择器
4.子元素过滤器
过滤选择器简称:过滤器。它其实也是一种选择器,而这种选择器类似于CSS3(http://t.mb5u.com/css3/)里的伪类,可以让不支持CSS3的
浏览器也能支持。和常规的选择器一样,jQuery为了更方便开发者使用,提供了很多独有的过滤器。
一、基本过滤器
过滤器主要通过特定的过滤规则来筛选所需的DOM元素,和CSS中的伪类的语法类似:使用冒号(:)开头。
过滤器名 | jQuery语法 | 说明 | 返回 |
:first | $(‘li :first‘) | 选取第一个元素 | 单个元素 |
:last | $(‘li :last‘) | 选取最后一个元素 | 单个元素 |
:not(selecter) | $(‘li :not(.red)‘) | 选取class不是red的li元素 | 集合元素 |
:even | $(‘li :even‘) | 选择索引(0 开始)是偶数的所有元素 | 集合元素 |
:odd | $(‘li :odd‘) | 选择索引(0 开始)是奇数的所有元素 | 集合元素 |
:eq(index) | $(‘li :eq(2)‘) | 选择索引(0 开始)等于index的元素 | 单个元素 |
:gt(index) | $(‘li :gt(2)‘) | 选择索引(0 开始)大于index的元素 | 集合元素 |
:lt(index) | $(‘li :lt(2)‘) | 选择索引(0 开始)小于index的元素 | 集合元素 |
:header | $(‘li :header‘) | 选择标题元素,h1~h6 | 集合元素 |
:animated | $(‘li :animated‘) | 选择正在执行动画的元素 | 集合元素 |
:focus | $(‘li :focus‘) | 选择当前被焦点的元素 | 集合元素 |
jQuery为最常用的过滤器提供了专用的方法,以达到提高性能和效率的作用:
$(‘li‘).eq(2).css(‘background‘,‘#ccc‘); //元素li的第三个元素,负数从后开始
$(‘li‘).first().css(‘background‘,‘#ccc‘); //元素li的第一个元素
$(‘li‘).last().css(‘background‘,‘#ccc‘); //元素li的最后一个元素
$(‘li‘).not(.red).css(‘background‘,‘#ccc‘); //元素li不含class为red的元素
注意::first、:last和first()、last()这两组过滤器和方法在出现相同元素的时候,first会实现第一个父元素的第一个子元素,last会实现最后一个父元素的最后一个子元素,所以,如果需要明确是哪个父元素,需要指明:
$(‘#box li:last‘).css(‘background‘,‘#ccc‘); //#box元素的最后一个li
//或
$(‘#box li‘).last().css(‘background‘,‘#ccc‘) //同上