李炎恢jQuery笔记4过滤选择器

明返回
: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') 选择当前被焦点的元素集合元素
$('li:first').css('background', '#ccc'); //第一个元素
$('li:last).css('background', '#ccc'); //最后一个元素
$('li:not(.red)).css('background', '#ccc'); //非class 为red 的元素
$('li:even').css('background', '#ccc'); //索引为偶数的元素
$('li:odd).css('background', '#ccc'); //索引为奇数的元素
$('li:eq(2)).css('background', '#ccc'); //指定索引值的元素
$('li:gt(2)').css('background', '#ccc'); //大于索引值的元素
$('li:lt(2)').css('background', '#ccc'); //小于索引值的元素
$(':header').css('background', '#ccc'); //页面所有h1 ~ h6 元素
注意：:focus 过滤器，必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。
而不是鼠标点击或者Tab 键盘敲击激活的。
$('input').get(0).focus(); //先初始化激活一个元素焦点
$(':focus').css('background', 'red'); //被焦点的元素
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') 选取含有子元素或文本的元素元素集合
//选择元素文本节点含有ycku.com 文本的元素
$('div:contains("ycku.com")').css('background', '#ccc');
$('div:empty').css('background', '#ccc'); //选择空元素
$('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class 是red 的元素
$(':parent').css('background', '#ccc'); //选择非空元素
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(od
d/even/eq(in
dex))
$('li:nth-child(ev
en)')
获取每个自定义子元素的元素(索引
值从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 元素
五．其他方法
jQuery 在选择器和过滤器上，还提供了一些常用的方法，方便我们开发时灵活使用。
方法名jQuery 语法说明返回
is(s/o/e/f) $('li').is('.red') 传递选择器、DOM、jquery 对象集合元素
或是函数来匹配元素结合
hasClass(class)
$('li').eq(2).hasCl
ass('red')
其实就是is("." + class) 集合元素
slice(start, end) $('li').slice(0,2)
选择从start 到end 位置的元素，
如果是负数，则从后开始
集合元素
filter(s/o/e/f) $('li').filter('.red')
end()
$('div').find('p').e
nd()
获取当前元素前一次状态集合元素
contents() $('div').contents()
获取某元素下面所有元素节点，
包括文本节点，如果是iframe，
则可以查找文本内容
集合元素
$('.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');