{HTML5}过滤选择器-第四节-上

​过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似与 CSS3 (http://t.mb5u.com/css3/)里的伪类，可以让不支持 CSS3 的低版本浏览器也能支持。和常规选择器一样，jQuery 为了更方便开发者使用，提供了很多独有的过滤器。

一．基本过滤器

过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素，和 CSS 中的伪类的语法类似：使用冒号(:)开头。

$('li:first').css('background','#ccc');        //第一个元素

$('li:last).css('background','#ccc');           //最后一个元素

$('li:not(.red)).css('background','#ccc');     //非 class 为 red的元素

$('li:even').css('background','#ccc');         //索引为偶数的元素

$('li:odd).css('background', '#ccc');       //索引为奇数的元素

$('li:eq(2)).css('background', '#ccc');        //指定索引值的元素

$('li:gt(2)').css('background','#ccc');          //大于索引值的元素

$('li:lt(2)').css('background', '#ccc');       //小于索引值的元素

$(':header').css('background', '#ccc');       //页面所有h1 ~ h6元素

注意：:focus过滤器，必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。 而不是鼠标点击或者Tab键盘敲击激活的。

$('input').get(0).focus();                     //先初始化激活一个元素焦点

$(':focus').css('background','red');         //被焦点的元素 

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');    //同上