jQuery学习四-过滤选择器

一、基本过滤器

过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素，和 CSS 中的伪类的语法类似:使用冒号(:)开头

//第一个元素
$("li:first").css("color,"red");
//索引为偶数的元素
$("li:even").css("color,"red");
//索引为奇数的元素
$('li:odd).css('background', '#ccc');
//指定索引值的元素
$('li:eq(2)).css('background', '#ccc');
//大于索引值的元素
$('li:gt(2)').css('background', '#ccc');
//小于索引值的元素
$('li:lt(2)').css('background', '#ccc');
//页面所有 h1 ~ h6 元素
$(':header').css('background', '#ccc');

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

$("input").get(0).focus();
$(":focus").css("color","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");//同上

二、内容过滤器

内容过滤器的过滤规则主要是包含的子元素或文本内容上。

//选择元素文本节点含有ycku.com文本的元素
$("div:contains('ycku.com')").css("background","#ccc");

//选择空元素
$("div:empty").css("background","#ccc");

//选择子元素含有class是red的元素
$("ul:has(.red)").css("background","#ccc");

//选择非空元素
$(".parent").css("background","#ccc");

jQuery提供了一个has()方法来提高 :has 过滤器的性能

//选择子元素含有class 是red 的元素
$("ul").has(".red").css("background","#ccc");

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

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

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

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

三、可见性过滤器

可见性过滤器根据元素的可见性和不可见性来选择相应的元素。

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

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

四、子元素过滤器

子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。

//每个父元素第一个li元素
$("li:first-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:nth-child(2n)").css("background","#ccc");

五、其他方法

jQuery在选择器和过滤器上，还提供了一些常用的方法，方便我们开发。

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

$(".red").is($("li"));    //true,JQuery对象集合，同上

$(".red").is("li").eq(2); //true,JQuery对象单个，同上

$(".red").is($("li")).get(2);//true，方法，同上

$(".red").is(function(){     //可以自定义各种判断（*****重点掌握*****）
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);前2个和末尾2个被选定。

$("div").contents().size(); //返回子节点（包含文本节点）的数量

$("li").filter(".red").css("background","red"); //选择li的class为red的元素

$("li").filter(" .red , :first , :last ").css("background","red"); //增加了首尾选择

$("li").filter(funciton(){  //******重点掌握*******
return $(this).attr("class")=="red" && $(this).attr("title") == "列表3";
}).css("background","red");