jQuery笔记4 过滤器的使用方法

原文地址：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>