原文地址：https://www.ruofeiblog.com/article/jQuery-selector
基本过滤器
所有过滤器都是以冒号开头的，如:odd
//选择第一个li,并为这个li添加一个css
$("li:first").css("color","red");
//选择第一个ul里的最后一个li,并为这个li添加一个css
$("ul:first li:last").css("color","red");
//选择没有class为red的li
$("li:not(.red)").css("color","red");
//选择偶数的li
$("li:even").css("color","red");
//选择奇数的li
$("li:odd").css("color","red");
//从头开始选择第3个li(0开始计算)
$("li:eq(2)").css("color","red");
//从末尾开始选择倒数第2个li(-1开始计算)
$("li:eq(-2)").css("color","red");
//从头开始选择大于3的li(0开始计算)
$("li:gt(2)").css("color","red");
//从末尾开始选择大于2的li(-1开始计算)
$("li:gt(-3)").css("color","red");
//从头开始选择小于3的li(0开始计算)
$("li:lt(2)").css("color","red");
//从末尾开始选择小于2的li(-1开始计算)
$("li:lt[-3]").css("color","red");
//选择标题元素（h1-h6）
//相当于$("*:header");全局的所有标题元素
$(":header");
//选择#header下的所有标题元素
$("#header :header");
//选择当前被焦点的元素
$("input:focus").css("background","blue");
//加载页面的时候默认让第一个input获取焦点
$("input").get(0).focus();
//获取到焦点的input加上css
$("input:focus").css("color","red");
:focus一般用在表单上比较多
jQ还对上面的这些过滤器提供了相应的jQ方法，性能和效率有所提升。
jQ过滤器的方法有：
//选择第[n]+1个元素
.eq();
//选择第一个元素
.first();
//选择最后一个元素
.last();
//选择不是XX的元素
.not();
内容过滤器
//选择包含xxx文本的div
$("div:contains('xxx')").css("color","red");
//选择没有子元素或空文本的div，并使用text()方法给他插入子元素
$("div:empty").text("我是新插入的文本")
//选择含有子元素或文本的元素
$("div:parent").css("color","red");
//选择子元素中含有指定class、标签的元素
$("div:has(.red)").css("color","red");
以上内容过滤器jQ提供了相应的方法：
//选择子元素中含有指定class、标签的元素的方法
$("div").has(".red").css("color","red");
//选择class为red元素的父元素
$("li[class=red]").parent().css("color","red");
//选择class为red元素的祖先节点
$("li[class=red]").parents().css("color","red");
//选择class为red元素的祖先节点 遇到body时停止
$("li[class=red]").parentsUntil("body").css("color","red");
可见性过滤器
:hidden过滤器一般包含的内容是：
css样式display:none、input表单类型为type="hidden"和visibility:hidden的元素。
//选择所有隐藏的内容
$(":hidden");
//选择隐藏的p标签,返回多个值
$("p:hidden");
//选择显示的p标签，返回多个值
$("p:visible");
子元素过滤器
//选择每个ul中的第一个子元素，返回多个值
$("ul:first-child");
//选择每个ul中的最后一个子元素，返回多个值
$("ul:last-child");
//选择只有一个子元素的元素，返回多个值
$("ul:only-child");
//选择某个元素的自定义条件的元素（索引值从1开始），返回多个值
$("li:nth-child(even)").css("color","red"); //偶数
$("li:nth-child(odd)").css("color","red"); //奇数
$("li:nth-child(3)").css("color","red"); //第三个
$("li:nth-child(2n)").css("color","red"); //第2的倍数
$("li:nth-child(2n+1)").css("color","red"); //第2的倍数+1
其他过滤器
.is()
//判断red类是否为li，返回布尔值
$(".red").is("li");
$(".red").is("li");
//判断red类是否为第三个li
$(".red").is($("p").eq(2));
//还可以执行匿名函数
$(".red").is(function(){
xxxx
});
//如：
<p class="red" title="aa">xxxxxx</p>
<script type="text/javascript">
alert($(".red").is(function(){
return $(this).attr("title")=="aa"; //判断red类的title是不是等于aa，返回布尔值
}));
</script>
