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

很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器

1、筛选选择器

筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头，通过一个列表，看看基本筛选器的描述：

2、注意事项：

:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引
gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始

3、示例代码：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>基本筛选选择器</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script><style>.left {width: auto;height: 120px;}.left div {width: 70px;height: 70px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}.bottom {width: 800px;}.bottom div,.bottom span {display: block;width: 80px;height: 80px;margin: 5px;background: #bbffaa;float: left;font-size: 14px;}.bottom .small {width: 60px;height: 25px;font-size: 12px;background: #fab;}</style>
</head>
<body><h2>基本筛选器</h2><h3>:first/:last/:even/:odd</h3><div class="left"><div class="div"><p>div:first</p><p>:even</p></div><div class="div"><p>:odd</p></div><div class="div"><p>:even</p></div><div class="div"><p>:odd</p></div><div class="div"><p>:even</p></div><div class="div"><p>div:last</p><p>:odd</p></div></div><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><h3>:eq/:gt/:lt</h3><div class="left"><div class="aaron"><p>:lt(3) and :eq(0)</p></div><div class="aaron"><p>:lt(3) and :eq(1)</p></div><div class="aaron"><p>:lt(3) and :eq(2)</p></div><div class="aaron"><p>:eq(3)</p></div><div class="aaron"><p>:gt(3) and :eq(4)</p></div><div class="aaron"><p>:gt(3) and :eq(5)</p></div></div><script type="text/javascript">//:eq//选择单个$('.aaron:eq(2)').css("border", "3px groove blue");</script><script type="text/javascript">//:gt 选择匹配集合中所有索引值大于给定index参数的元素$('.aaron:eq(3)').css("border", "3px groove green");</script><script type="text/javascript">//:gt 选择匹配集合中所有索引值大于给定index参数的元素$('.aaron:gt(3)').css("border", "3px groove red");</script><script type="text/javascript">//:lt 选择匹配集合中所有索引值小于给定index参数的元素//与:gt相反$('.aaron:lt(3)').css("color", "red");</script><h3>:not</h3><div class="left"><div><input type="checkbox" name="a" /><p>Aaron</p></div><div><input type="checkbox" name="b" /><p>数据</p></div><div><input type="checkbox" name="c" checked="checked" /><p>其他</p></div></div><script type="text/javascript">//:not 选择所有元素去除不匹配给定的选择器的元素//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色$('input:not(:checked) + p').css("background-color", "#CD00CD");</script>
</body></html>

jQuery教程06-基本筛选选择器相关推荐

jQuery教程08-属性筛选选择器
jQuery选择器之属性筛选选择器属性选择器让你可以基于属性来定位一个元素.可以只指定该元素的某个属性,这样所有使用该属性而不管它的值,这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值 ...
jQuery教程07-内容筛选选择器
jQuery选择器之内容筛选选择器基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上内容过 ...
jQuery教程09-子元素筛选选择器
jQuery选择器之子元素筛选选择器子元素筛选选择器不常使用,其筛选规则比起其它的选择器稍微要复杂点子元素筛选选择器描述表: 注意: :first只匹配一个单独的元素,但是:first-child ...
JQuery中的基本筛选选择器
很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQuery自己为了开 ...
jQuery教程10-表单元素选择器
无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery中专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素. 表单选择器的具体方法描述: 注意: 除了input筛 ...
【jQuery 教程系列第 10 篇】jQuery 中的过滤选择器（基本筛选器）
这是[jQuery 教程系列第 10 篇],如果觉得有用的话,欢迎关注专栏. jQuery 中除了一些基本选择器 ,也有一些过滤选择器,本篇博客仅挑选其中的几个简单说明一下,其它的大家可以点击 jQ ...
JQuery选择器——基本筛选选择器和内容筛选选择器
基本筛选选择器和内容筛选选择器 1 基本筛选选择器能更快捷的找到所需的DOM元素 2 基本筛选选择器的描述 $(":first") 匹配第一个元素 $(&qu ...
jQuery的筛选选择器
基本筛选选择器很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器
jQuery简介: jQuery是一个高效.精简并且功能丰富的javascript库,它提供的API简单易学,且兼容众多浏览器,极大地简化了javascript代码开发,包含内容:HTML 元素选取. ...

jQuery教程06-基本筛选选择器

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

1、筛选选择器

2、注意事项：

3、示例代码：

jQuery教程06-基本筛选选择器相关推荐

最新文章

热门文章