jQuery的过滤选择器

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

一.基本过滤器

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

$(‘li:first‘)：选取第一个元素单个元素

$(‘li:last‘)：选取最后一个元素单个元素

$(‘li:not(.red)‘)：选取class不是red的li元素集合元素

$(‘li.even‘)：选择索引(0开始)是偶数的所有元素集合元素

$(‘li:odd‘)：选择索引(0开始)是奇数的所有元素集合元素

$(‘li:eq(2)‘)：选择索引(0开始)等于2的元素单个元素，为负数时为倒数第2个

$(‘li:gt(2)‘)：选择索引(0开始)大于2的元素集合元素，为负数时为从倒数第2个开始到末尾

$(‘li.lt(2)‘)：选择索引(0开始)小于2的元素集合元素，为负数时为从倒数第2个开始到第一个

$(‘li:header‘)：选择li下面的标题元素(li后面有一个空格，把li换成h3则只选择h3标签)，h1~h6集合元素

$(‘li:animated‘)：选择正在执行动画的元素集合元素

$(‘li:focus‘)：选择当前被焦点的元素集合元素，必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或者Tab键盘敲击激活的。

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

二.内容过滤器：内容过滤器的过滤规则主要是包含的子元素或文本内容上。得到的是该父元素的DOM。

$(‘div:contains("ycku.com")‘)：选取含有"ycku.com"文本的元素

$(‘div:empty‘)：选取不包含子元素且空文本的元素

$(‘div:has(.red)‘)：选取含有 class 是red 的元素

$(‘div:parent‘)：选取含有子元素或文本的元素

jQuery 提供了一个has()方法来提高:has过滤器的性能：

$(‘ul‘).has(‘.red‘).css(‘background‘, ‘#ccc‘); //选择子元素含有class是red的元素

jQuery 提供了一个名称和:parent 相似的方法， 但这个方法并不是选取含有子元素或文本的元素，而是获取当前元素的父元素，返回的是元素集合。

$(‘li‘).parent().css(‘background‘, ‘#ccc‘); //选择当前元素的父元素

$(‘li‘).parents().css(‘background‘, ‘#ccc‘); //选择当前元素的父元素及祖先元素

$(‘li‘).parentsUntil(‘div‘).css(‘background‘, ‘#ccc‘); //选择当前元素遇到 div 父元素停止

三.可见性过滤器：可见性过滤器根据元素的可见性和不可见性来选择相应的元素。

$(‘div:hidden‘)：选取所有不可见的div元素

$(‘div:visible‘)：选取所有可见的div元素

四.子元素过滤器：子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。

$(‘li:first-child‘)：获取每个父元素的第一个子元素

$(‘li:last-child‘)：获取每个父元素的最后一个子元素

$(‘li:only-child‘)：获取只有一个子元素的元素

$(‘li:nth-child(odd/even/index)‘)：获取每个父元素的自定义子(奇数/偶数/下标为index)的子元素(索引值从1 开始计算)

$(‘li:nth-child(3n)‘);获取所有li的每个父元素下面的索引为3的倍数的li元素

五.其他方法

jQuery 在选择器和过滤器上，还提供了一些常用的方法，方便我们开发时灵活使用。

$(‘.red‘).is(‘li‘) 传递选择器、DOM、jquery对象或是函数来匹配元素结合,返回bool值，该例中为判断class为red的元素是否为li标签

$(‘li‘).eq(2).hasClass(‘red‘)其实就是 is("." + class)，这里不需要class前面的"."

$(‘li‘).slice(0,2)选择从start 到end(不提供为到末尾)位置的元素，如果是负数，则从后开始

$(‘li‘).filter(‘.red‘)，一种灵活的选择器，类似于is的方法

$(‘div‘).find(‘p‘).end()获取当前元素上一个节点，一般为end()的.号前的节点

$(‘div‘).contents()获取某元素下面所有元素节点，包括文本节点，如果是 iframe，则可以查找文本内容

$(‘.red‘).is(‘li‘); //true，检测class为red的元素是否为li标签

$(‘.red‘).is($(‘li‘)); //true，jQuery 对象集合，同上

$(‘.red‘).is($(‘li‘).eq(2)); //true，jQuery 对象单个，同上

$(‘.red‘).is($(‘li‘).get(2)); //true，DOM 对象，同上

$(‘.red‘).is(function () {return $(this).attr(‘title‘) == ‘列表3‘;}); //可以自定义各种判断，该例中判断title属性是否为"列表3"，必须使用$(this)来表示要判断的元素

$(‘li‘).eq(2).hasClass(‘red‘); //和 is 一样，只不过只能传递 class

$("div").find("p").end().get(0); //返回 div 的原生DOM

$(‘div‘).contents().size(); //返回子节点(包括文本)数量

filter()方法的用法：

$(‘li‘).filter(‘.red‘); //选择 li 的class 为 red的元素

$(‘li‘).filter(‘.red, :first, :last‘).css(‘background‘,‘#ccc‘); //增加了首尾选择，多个选择条件用逗号隔开

//特殊要求函数返回

$(‘li‘).filter(function () {return $(this).attr(‘class‘) == ‘red‘ && $(this).attr(‘title‘) == ‘列表 3‘;}).css(‘background‘, ‘#ccc‘);