JQuery中的基本筛选选择器

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

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

注意：

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

下面我们看实例：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><link rel="stylesheet" href="imooc.css" type="text/css"><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</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)</p></div><div class="aaron"><p>:lt(3)</p></div><div class="aaron"><p>:eq(2)</p></div><div class="aaron"></div><div class="aaron"><p>:gt(3)</p></div><div class="aaron"><p>:gt(3)</p></div></div><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><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 选择所有元素去除不匹配给定的选择器的元素//选取所有input中,没有checked属性的p元素，赋予颜色$("input:not(:checked)+p").css("background-color", "#CD00CD");</script>
</body></html>

执行结果如下：

JQuery中的基本筛选选择器相关推荐

jQuery教程08-属性筛选选择器
jQuery选择器之属性筛选选择器属性选择器让你可以基于属性来定位一个元素.可以只指定该元素的某个属性,这样所有使用该属性而不管它的值,这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值 ...
jQuery教程07-内容筛选选择器
jQuery选择器之内容筛选选择器基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上内容过 ...
jQuery教程06-基本筛选选择器
jQuery选择器之基本筛选选择器很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CS ...
JQuery中的事件和选择器
学习jQuery最应该了解的也就是JQuery中的事件和选择器. 那么常见的事件有哪些: 鼠标事件:mousedown鼠标按下,mouseup鼠标松开,mouseenter鼠标进入某个元素 mouse ...
JQuery中的九大选择器及其应用（中）
第四种:内容选择器 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
JQuery中的九大选择器及其应用（上）
第一种:基本选择器 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
JQuery中的九大选择器及其应用（下）
第七种:子元素选择器 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
jQuery教程09-子元素筛选选择器
jQuery选择器之子元素筛选选择器子元素筛选选择器不常使用,其筛选规则比起其它的选择器稍微要复杂点子元素筛选选择器描述表: 注意: :first只匹配一个单独的元素,但是:first-child ...
JQuery中常用的属性选择器
jQuery中使用$()作为选择符极大提高工作效率以及方便快捷;一些常用属性的选择器由以下几种 1) $('#id') id选择器 2) $('.class') css选择器,class类名 3) $ ...

JQuery中的基本筛选选择器

JQuery中的基本筛选选择器相关推荐

最新文章

热门文章