jQuery过滤器
基本过滤器
过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素，和 CSS 中的伪类的语法类似：使用冒号(:)开头。
过滤器名 jQuery 语法 说明 返回
- :first $(‘li:first’) 选取第一个元素 单个元素
- :last $(‘li:last’) 选取最后一个元素 单个元素
- :not(selector) $(‘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 $(’:header’) 选择标题元素，h1 ~ h6 集合元素
- :animated $(’:animated’) 选择正在执行动画的元素 集合元素
- :focus $(’:focus’) 选择当前被焦点的元素 集合元素
内容过滤器
内容过滤器的过滤规则主要是包含的子元素或文本内容上。
过滤器名 jQuery 语法 说明 返回
- :contains(text) $(’:contains(“baidu.com”)’) 选取含有"baidu.com"文本的元素 元素集合
- :empty $(’:empty’) 选取不包含子元素或空文本的元素 元素集合
- :has(selector) $(’:has(.red)’) 选取含有 class 是 red 的元素 元素集合
- :parent $(’:parent’) 选取含有子元素或文本的元素 元素集合
可见性过滤器
过滤器名 jQuery 语法 说明 返回
- :hidden $(’:hidden’) 选取所有不可见元素 集合元素
- :visible $(’:visible’) 选取所有可见元素 集合元素
注意：如果父容器设置了display:none; 子元素页可以通过 ：hidden 过滤出来。
子元素过滤器
过滤器名 jQuery 语法 说明 返回
- :first-child $(‘li:first-child’) 获取每个父元素的第一个子元素 集合元素
- :last-child $(‘li:last-child’) 获取每个父元素的最后一个子元素 集合元素
- :only-child $(‘li:only-child’) 获取只有一个子元素的元素 集合元素
- :nth-child(od $(‘li:nth-child(even)’) 获取每个自定义子元素的元素(索引值从 1 开始计算) #### 集合元素
d/even/eq(index)) - $(‘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 元素
其他方法
jQuery 在选择器和过滤器上，还提供了一些常用的方法，方便我们开发时灵活使用。
提示：is() 和 hasClass()是我们在工作中比较常用的内容。
提示：slice() –》 end数值不包括在内。
$('.red').is('li');//true，选择器，检测 class 为是否为 red
$('.red').is($('li'));//true，jQuery 对象集合，同上
$('.red').is($('li').eq(2));//true，jQuery 对象单个，同上
$('.red').is($('li').get(2));//true，DOM 对象，同上
$('.red').is(function () {//true，方法，同上
return $(this).attr('title') == '列表 3';//可以自定义各种判断
}));
$('li').eq(2).hasClass('red');//和 is 一样，只不过只能传递 class
$('li').slice(0,2).css('color', 'red');//前三个变成红色
注意：这个参数有多种传法和 JavaScript 的 slice 方法是一样的比如：slice(2)，从第三个开始到最后选定；slice(2,4)，第三和第四被选定；slice(0,-2)，从倒数第三个位置，向前选定所有；slice(2,-2)，前两个和末尾两个未选定。
$("div").find("p").end().get(0); //返回 div 的原生 DOM
$('div').contents().size(); //返回子节点(包括文本)数量
$('li').filter('.red').css('background','#ccc'); //选择 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');