基本过滤器
$('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');