jQuery之过滤选择器

过滤选择器

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

 

二、内容过滤器

　　内容过滤器的过滤规则主要是包含的子元素或文本内容上。

过滤器名	jQuery语法	说明	返回
:contains(text)	$(':contains("ycku.com")')	选取含有"ycku.com"文本的元素	元素集合
:empty	$(':empty')	选取不包含子元素或空文本的元素	元素集合
:has(selector)	$(':has(.red)')	选取含有class是red的元素	元素集合
:parent	$(':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父元素停止

 

三、可见性过滤器

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

过滤器名	jQuery语法	说明	返回
:hidden	$(':hidden')	选取所有不可见元素	集合元素
:visible	$(':visible')	选取所有可见元素	集合元素

　　$('p:hidden').size();  //元素p隐藏的元素

　　$('p:visible').size();  //元素p显示的元素

 

　　注意：hidden过滤器一般包含的内容为：CSS样式为display:none、input表单类型为type="hidden"和visibility:hidden的元素。

　　

四、子元素过滤器

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

过滤器名	jQuery语法	说明	返回
:first-child	$('li:first-child')	获每个父元素的第一个子元素	集合元素
:last-child	$('li:last-child')	获取每个父元素的最后一个子元素	集合元素
:only-child	$('li:only-child')	获取只有一个子元素的元素	集合元素
:nth-child(odd/even/eq(index))	$('li:nth-child(even)')	获取每个自定义子元素的元素(索引值从 "1" 开始计算)	集合元素

 

五、其他方法

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

方法名	jQuery语法	说明	返回
is(s/o/e/f)	$('li').is('.red')	传递选择器、DOM、jQuery对象	集合元素
hasClass(class)	$('li').hasClass('red')	其实就是is("."+class)	集合元素
end()	$('div').find('p').end()	获取当前元素前一个状态（当前元素的前一个元素）	集合元素
contents()	$('div').contents()	获取某元素下面所有元素节点,包括文本你节点	集合元素

 

　　$('.red').is('li');  //true，选择器，检测class是否为red

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