[JQuery]学习——过滤选择器

第一 基本过滤器：

过滤名	jQuery语法	说明	返回
:first	$('li:first')	选取第一个元素	单个元素
:last	$('li:last')	选取最后一个元素	单个元素
:even	$('li:even')	选取索引(0开始)是偶数的所有元素	集合元素
:not(selector)	$('li:not(.red)')	选取class不是red的li	集合元素
:eq(index)	$('li:eq(2)')	选取索引(0开始)等于2的index元素	单个元素
:gt(index)	$('li gt(2)')	选取索引(0开始)大于index的元素	集合元素
:lt(index)	$('li lt(2)')	选取索引(0开始)小于index的元素	集合元素
:header	$(':header')	选取标题元素，h1-h6	集合元素
:animated	$(':animated')	选择正在执行的动画元素	集合元素
:focuns	$(':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 的元素

第二 内容过滤器

过滤器名	jQuery语法	说明	返回
:contains(text)	$(':contains("ccc")')	选取含有ccc的文本元素	元素集合
: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 父元素停止

三  可见性过滤器

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

第四  子元素选择器

$('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 元素

第五 其它方法

$('.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'; //可以自定义各种判断 必须使用$(this)来表示要判断的元素否则，不管怎么样function里面返回是否是true或false都和调用的元素无关
}));

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

//特殊要求函数返回，强大的function过滤
$('li').filter(function () {
return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3';
}).css('background', '#ccc');