25-过滤选择器（伪类选择器）

一、常规基本过滤器

1. $("li:first").css()选取第一个li  $("li").first().css()
   

2. $("li:last").css()选取最后一个li $("li").last().css()

3. $("li:not(.red)").css()选取所有li中class!="red"的 $("li").not(.red).css()

4. $("li:even").css()选取所有偶数行

5. $("li:odd").css()选取所有奇数行

6. $("li:eq(2)").css()   $("li").eq(2).css() 选取第三个，从0开始（从上到下）$("li:eq(-2)")css()选取倒数第2个，从-1开始

7. $("li:gt(2)").css()大于第三个的

8. $("li:lt(2)").css()小于第三个的

9. $(":header").css()选取标题元素，h1~h6

10. $(":animated").css()选取正在执行的动画元素

11. $(":focus").css("background","red")选取被焦点的元素

12. $("input").get(0).focus();设置第一个input被焦点。

二、内容过滤器

1. $("div:contains('aa@qq.com')").css();选取div中包含aa@qq.com的元素。

 $("p:contains('消失')").css('color','red');
 <p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>也要点击我哦。</p>

2.$("div:empty").css()选取不包含子元素或空文本元素

3. $("ul:has(.red)").css('color','red');选取子元素包含.read类的父元素

$("ul").has(.red).css('color','red');

<ul>
 <li>a</li>
 <li>b</li>
 <li class="red">c</li>
</ul>
<ul>
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>

4.$("div:parent").css("background","red")

<div>
a
</div>
<div>
 <a href="#">a</a>
</div>
<div></div>

选择div下包含子元素或文本的元素，<div></div>中不能换行。

5.$("li").parent()获取li的父节点

  $("li").parents().css()获取li的所有父节点,会给ul,body,html加 样式

  $("li").parentsUntil('html').css()获取直到html父节点，也就是body加样式。

6、hidden/visible

1. $("div:hidden").show(1000);将隐藏的div在1秒钟显示出来。

2. $("div:visible").hide()讲显示的div隐藏。

三、子元素过滤器

1. $("ul:first-child") 获取每一个父元素的第一个子元素

2. $("ul:last-child") 获取每一个父元素的最后一个子元素

3. $("ul:only-child") 获取只有一个子元素的元素

4. $("ul:nth-child(even/odd/3/3n/3n+1)")

四、其他选择器

1. $('.red'）.is('li');判断.red是否是li

2. $("#div"）.hasClass('red')判断是否包含

3$("div").since(0,4).css()选取第0-4的