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>

blob.png

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>

blob.png

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的

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会编程的阿强

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值