频道栏目
首页 > 资讯 > JavaScript > 正文

jQuery选择器之基本筛选选择器

17-05-25        来源:[db:作者]  
收藏   我要投稿

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





<script src="../../jquery/1.9.1/jquery.js"></script>

基本筛选器

:first/:last/:even/:odd

div:first

:even

:odd

:even

:odd

:even

div:last

:odd

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

这里写图片描述

相关TAG标签
上一篇:jQuery鼠标事件
下一篇:创建ocfs2集群和增加节点
相关文章
图文推荐

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

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