JQuery过滤选择器

1. 基本过滤器

$("li:first").css("background", "red");  //选择第一个

$("li:last").css("background", "red");  //选择最后一个

$("li:not(.red)").css("background", "red");  //选择不带.red类的li

$("li:even").css("background", "red");  //偶数的li

$("li:odd").css("background", "red");  //奇数的li

$("li:eq(2)").css("background", "red");  //选择第3个li

$("li:eq(-2)").css("background", "red");  //倒数第二个li

$("li:gt(2)").css("background", "red");  //索引大于2的li

$("li:lt(2)").css("background", "red");  //索引小于2的

$("div :header").css("background", "red");  //选择h1到h6

$("input:focus").css("background", "red");  //选择光标停留的元素

$("li").first();  //同上

$("li").last();  //同上

$("li").not(".red");  //同上

$("li").eq(2);  //同上

2. 内容过滤器

$("div:contains('ycku')");   //选择包含ycku文本节点的div

$("div:empy");   //选择不包含子节点或文本节点为空的div

$("ul:has(.red)");   //选择带.red类的子元素的父元素

$("ul:has(.red)");   //选择带.red类的子元素的父元素

$("div:parent");  //选择含有子元素或文本的div

$("ul").has(".red"); //同上

$("ul").parents();  //返回所有的祖先节点

$("li").parentUtil("body"); //遇到body停止

3. 可见性过滤器

$("div:hidden");  //选择隐藏的div

$("div:visible");  //选择显示的div

4. 子元素过滤器

$("li:first-child");  //获取每个父元素第一个子元素为li的li元素

$("li:last-child");  //获取每个父元素最后一个子元素为li的li元素

$("li:only-child");  //获取父元素仅有一个li的li元素

$("li:nth-child(even)");   偶数li元素

$("li:nth-child("odd")");   奇数li元素

$("li:nth-child(1)");  第一个li元素

$("li:nth-child(3n)");  每间隔3个li元素

$("li:nth-child(3n+1)");  每间隔3个li元素

$(".red").is("li");  //判断选定元素是否为li

$(".red").is($("li"))

$(".red").is(function() {

return $(this).attr("title") == "列表3";

])

$("li").eq(2).hasClass("red");  //是否含有red类

$("li").slice(1, 2).css("color", "red");  //第一li被设置为红色

$("li").slice(2).css("color", "red");  //第二个位置往后的li被设置为红色

$("#box").find("p").end();  //表示前一个节点#box

$("#box").contents();  //选择所有子元素，包含文本元素

$("li").filter(".red");  //包含red类的li元素

$("li").filter(function() {

return $(this).attr("class")  == "red";

})