频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
jQuery选择器之基本筛选选择器
2017-05-25 10:01:00         来源:Little_Frog_Prince的博客  
收藏   我要投稿

jQuery选择器之基本筛选选择器。很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范,而是jQuery自己为了开发者的便利延展出来的选择器。
筛选选择器的用法与CSS中的伪元素相似,选择器用冒号“:”开头,通过一个列表,看看基本筛选器的描述:
这里写图片描述





<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

基本筛选器

:first/:last/:even/:odd

p:first

:even

:odd

:even

:odd

:even

p:last

:odd

<script type="text/javascript"> //找到第一个p $(".p:first").css("color", "#CD00CD"); </script><script type="text/javascript"> //找到最后一个p $(".p:last").css("color", "#CD00CD"); </script><script type="text/javascript"> //:even 选择所引值为偶数的元素,从 0 开始计数 $(".p:even").css("border", "3px groove red"); </script><script type="text/javascript"> //:odd 选择所引值为奇数的元素,从 0 开始计数 $(".p:odd").css("border", "3px groove blue"); </script>

:eq/:gt/:lt

:lt(3)

:lt(3)

:eq(2)

 

:gt(3)

:gt(3)

<script type="text/javascript"> //:eq //选择单个 $(".aaron:eq(2)").css("border", "3px groove blue"); </script><script type="text/javascript"> //:gt 选择匹配集合中所有索引值大于给定index参数的元素 $(".aaron:gt(3)").css("border", "3px groove blue"); </script><script type="text/javascript"> //:lt 选择匹配集合中所有索引值小于给定index参数的元素 //与:gt相反 $(".aaron:lt(2)").css("color", "#CD00CD"); </script>

:not

Aaron

慕课

其他

<script type="text/javascript"> //:not 选择所有元素去除不匹配给定的选择器的元素 //选中所有紧接着没有checked属性的input元素后的p元素,赋予颜色 $("input:not(:checked) + p").css("background-color", "#CD00CD"); </script>

这里写图片描述

点击复制链接 与好友分享!回本站首页
上一篇:js闭包
下一篇:jQuery鼠标事件
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站