过滤选择器

基本过滤器

$('li:first')             选取第一个元素，返回单个元素

$('li:last')             选取最后一个元素，返回单个元素

$('li:not(.red)')     选取 class 不是 red 的 li 元素，返回集合元素

$('li.even')           选择索引(0 开始)是偶数的所有元素，返回集合元素

$('li:odd')             选择索引(0 开始)是奇数的所有元素，返回集合元素

$('li:eq(2)')           选择索引(0 开始)等于 index 的元素，返回单个元素

$('li:gt(2)')            选择索引(0 开始)大于 index 的元素，返回集合元素

$('li.lt(2)')             选择索引(0 开始)小于 index 的元素，返回集合元素

$(':header')          选择标题元素(h1 ~ h6)，返回集合元素

$(':animated')      选择正在执行动画的元素，返回集合元素

$(':focus')            选择当前被焦点的元素 集合

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

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

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

内容过滤器

$(':contains("ycku.com")')         选取含有"ycku.com"文本的元素，返回元素集合
$(':empty')                                 选取不包含子元素或空文本的元素，返回元素集合
$(':has(.red)')                            选取含有 class 是 red 的元素，返回元素集合
$(':parent')                                选取含有子元素或文本的元素，返回元素集合

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

素集合。

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

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

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

可见性过滤器

$(':hidden')    选取所有不可见元素，返回集合元素

$(':visible')     选取所有可见元素，返回集合元素

例如：

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

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

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

子元素过滤器

$('li:first-child')             获取每个父元素的第一个子元素，返回集合元素
$('li:last-child')             获取每个父元素的最后一个子元素，返回集合元素
$('li:only-child')            获取只有一个子元素的元素，返回集合元素
$('li:nth-child(even)')   获取每个自定义子元素的元素(索引值从 1 开始计算)，返回集合元素

例如：

$('li:first-child').css('background', '#ccc'); //每个父元素第一个 li 元素
$('li:last-child').css('background', '#ccc'); //每个父元素最后一个 li 元素
$('li:only-child').css('background', '#ccc'); //每个父元素只有一个 li 元素
$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数 li 元素
$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数 li 元素
$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第三个 li 元素

其他方法

 $('li').is('.red')                           传递选择器、DOM、jquery 对象或是函数来匹配元素结合，返回集合元素

$('li').eq(2).hasClass('red')        其实就是 is("." + class)，返回集合元素  

$('li').slice(0,2)                           选择从 start 到 end 位置的元素， 如果是负数，则从后开始，返回集合元素

$('li').filter('.red')

$('div').find('p').end()                 获取当前元素前一次状态 集合元素 $('div').contents()获取某元素下面所有元素节点，包括文本节                                                         点，如果是 iframe，则可以查找文本内容，返回集合

例如：

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

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

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

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

5）$('.red').is(function () {

            return $(this).attr('title') == '列表 3';   //可以自定义各种判断

      })); //true，方法，同上

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

7）$('li').slice(0,2).css('color', 'red'); //前三个变成红色

注意：这个参数有多种传法和 JavaScript 的 slice 方法是一样的比如：slice(2)，从第三个开始到最后选定；slice(2,4)，第三和第四被选定；slice(0,-2)，从倒数第三个位置，向前选定所有；slice(2,-2)，前两个和末尾两个未选定。

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

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

10）$('li').filter('.red').css('background','#ccc');  //选择 li 的 class 为 red 的元素

11）$('li').filter('.red, :first, :last').css('background','#ccc'); //增加了首尾选择

12）//特殊要求函数返回

$('li').filter(function () {

        return $(this).attr('class') == 'red' && $(this).attr('title') == '列表 3';

}).css('background', '#ccc');