Jquery学习之选择器种类及其原理详解

jquery 选择器、 css3 选择器各种各样的选择器，作为非常灵活的 jquery 选择器到底如何使用呢？本文和大家分享的就是jquery 常用选择器种类及其原理相关内容，希望对大家学习jquery有所帮助。

一、对于jQuery 选择器基本用法

在CSS3 选择器标淮草案定义的选择器语法中， jQuery 支持相当完整的一套子集，同时还添加了一些非标准但很有用的伪类。注意 : 本节讲述的是 jQuery 选择器。其中有不少选择器 ( 但不是全部 ) 可以在 CSS 样式表中使用。选择器语法有三层结构。你肯定已经见过选择器中最简单的形式。” #te st ”选取 id 属性为” test ”的元素。” blockquote ”选取文档中的所有 <blockquote> 元素，而” div.note ” 则选取所有 class 属性为” note ”的 <blockquote> 元素。简单选择器可以组合成“组合选择器”，比如 “ div.note>p ”和“ blockquote i ”，只要用组合字符做分隔符就行。简单选择器和组合选择器还可以分组成逗号分隔的列表。这种选择器组是传递给 $() 函数最常见的形式。在解释组合选择器和选择器组之前，我们必须先了解简单选择器的语法。

1 、简单选择器使用

简单选择器的开头部分( 显式或隐式地 ) 是标签类型声明。例如，如果只对 < Jquery学习之选择器种类及其原理详解

> 元素感兴趣，简单选择器可以用“ P ”开头。如果选取的元素和标签名无关，则可以使用通配符“ * ”号来代替。如果选择器没有以标签名或通配符开头，则隐式含有一个通配符。

标签名或通配符指定了备选文档元素的一个初始集。在简单选择器中，标签类型声明之后的部分由零个或多个过滤器组成。过滤器从左到右应用，和书写顺序一致，其中每一个都会缩小选中元素集。下表列举了jQuery 支持的过滤器。

jQuery 选择过滤器

过滤器含义

#id 匹配 id 属性为 id 的元素。在有效的 }ITML 文档中，永远不会出现多个元素拥有相同的 ID ，因此该过滤器通常作为独立选择器来使用

.class 匹配 class 属性 ( 是一串被解析成用空格分隔的单词列表 ) 含有 class 单词的所有元素

[attr] 匹配拥有 attr 属性 ( 和值无关 ) 的所有元素

[attr=val] 匹配拥有 attr 属性且值为 val 的所有元素

[attr!=val] 匹配没有 attr 属性、或 attr 属性的值不为 val 的所有元素 ((jQuery 的扩展 )

[attr^=val] 匹配 attr 属性值以 val 开头的元素

[attr$=val] 匹配 attr 属性值以 val 结尾的元素

[attr*=val] 匹配 attr 属性值含有 val 的元素

[attr~=val] 当其 attr 属性解释为一个由空格分隔的单词列表时，匹配其中包含单词 val 的元素。因此选择器“ div.note ”与“ div [class~=note] ”相同

[attr|=val] 匹配 attr 属性值以 val 开头且其后没有其他字符，或其他字符是以连字符开头的元素

:animated 匹配正在动画中的元素，该动画是由 jQuery 产生的

:button 匹配 <button type= ” button ” > 和 <input type= ” button ” > 元素 (jQuery 的扩展 )

:checkbox 匹配 <input type= ” checkbox ” > 元素 ( jQuery 的扩展 ) ，当显式带有 input 标签前缀” input:checkbox ”时，该过滤器更高效

:checked 匹配选中的 input 元素

:contains(text) 匹配含有指定 text 文本的元素 (jQuery 的扩展 ) 。该过滤器中的圆括号确定了文本的范围—无须添加引号。被过滤的元素的文本是由 textContent 或 innerText 属性来决定的—这是原始文档文本，不带标签和注释

:disabled 匹配禁用的元素

:empty 匹配没有子节点、没有文本内容的元素

:enabled 匹配没有禁用的元素

:eq(n) 匹配基于文档顺序、序号从 0 开始的选中列表中的第 n 个元素 (jQuery 的扩展 )

:even 匹配列表中偶数序号的元素。由于第一个元素的序号是 0 ，因此实际上选中的是第 1 个、第 3 个、第 5 个等元素 (jQuery 的扩展 )

:file 匹配 <input type= ” file ” > 元素 (jQuery 的扩展 )

:first 匹配列表中的第一个元素。和“ :eq(0) ”相同 (jQuery 的扩展 )

:first-child 匹配的元素是其父节点的第一个子元素。注意 : 这与“ :first ”不同

:gt(n) 匹配基于文档顺序、序号从 0 开始的选中列表中序号大于 n 的元素 ( jQuery 的扩展 )

:has(sel) 匹配的元素拥有匹配内嵌选择器 sel 的子孙元素

:header 匹配所有头元素 :<h1>, <h2>, <h3>, <h4>, <h5> 或 <h6> (jQuery 的扩展 )

:hidden 匹配所有在屏幕上不可见的元素 : 大体上可以认为这些元素的 offsetWidth 和 offsetHeight 为 0

:image 匹配 <input type= ” image ” > 元素。注意该过滤器不会匹配 <img> 元素 ( jQuery 的扩展 )

:input 匹配用户输入元素 :<input>, <textarea>, <select> 和 <button>( jQuery 的扩展 )

:last 匹配选中列表中的最后一个元素 (( jQuery 的扩展 )

:last-child 匹配的元素是其父节点的最后一个子元素。注意 : 这与“ :last ”不同

:lt(n) 匹配基于文档顺序、序号从 0 开始的选中列表中序号小于 n 的元素 ( jQuery 的扩展 )

:not(sel) 匹配的元素不匹配内嵌选择器 sel

:nth(n) 与“ :eq(n) ”相同 (jQuery 的扩展 )

:nth-child(n) 匹配的元素是其父节点的第 n 个子元素。。可以是数值、单词 even, 单词 odd 或计算公式。使用“ :nth-child(even) ”来选取那些在其父节点的子元素中排行第 2 或第 4 等序号的元素。使用“ :nth-child(odd) ”来选取那些在其父节点的子元素中排行第 1 、第 3 等序号的元素。

更常见的情况是，n 是 xn 或 x n+y 这种计算公式，其中 x 和 y 是整数， n 是字面量 n 。因此可以用 nth-child(3n+1) 来选取第 1 个、第 4 个、第 7 个等元素。

注意该过滤器的序号是从1 开始的，因此如果一个元素是其父节点的第一个子元素，会认为它是奇数元素，匹配的是 3n+1 ，而不是 3n 。要和“ :even 以及“ Jquery学习之选择器种类及其原理详解

dd ”过滤器区分开来，后者匹配的序号是从 0 开始的。

dd 匹配列表中奇数 ( 从 0 开始 ) 序号的元素。注意序号为 1 和 3 的元素分别是第 2 个和第 4 个匹配元素 ( jQuery 的扩展 )

nly-child 匹配那些是其父节点唯一子节点的元素

:parent 匹配是父节点的元素，这与“ :empty ”相反 (jQuery 的扩展 )

:password 匹配 <input type= ” password ” > 元素 (jQuery 的扩展 )

:radio 匹配 <input type= ” radio ” > 元素 ( j Query 的扩展 )

:reset 匹配 <input type= ” reset ” > 和 <button type= ” reset ” > 元素 (jQuery 的扩展 )

:selected 匹配选中的 <option> 元素。使用“ :checked ”来选取选中的复选框和单选框 (jQuery 的扩展 )

:submit 匹配 <input type= ” submit ” > 和 <button type= ” submit ” > 元素 (jQuery 的扩展 )

:text 匹配 <input type= ” text ” > 元素 (jQuery 的扩展 )

:visible 匹配所有当前可见的元素 : 大体上可以认为这些元素的 offsetWidth 和 offsetHeight 的值不为 0 ，这和“ :hidden ”相反

注意: 表中列举的部分选择器在圆括号中接受参数。例如，下面这个选择器选取的元素在其父节点的子元素中排行第 1 或第 2 等，只要它们含有“ JavaScript ”单词，就不包含元素。

p:nth-child(3n+1): text (JavaScript):not(:has(a))

通常来说，指定标签类型前缀，可以让过滤器的运行更高效。例如，不要简单使用” :radio ”来选取单选框按钮，使用“ input:radio ”会更好。 ID 过滤器是个例外，不添加标签前缀时它会更高效。例如，选择器“ #address ”通常比更明确的“ form#address ”更高效。

2 、组合选择器用法

使用特殊操作符或“组合符”可以将简单选择器组合起来，表达文档树中元素之间的关系。下表列举了 jQuery 支持的组合选择器。这些组合选择器与 CSS3 支持的组合选择器是一样的。

下面是组合选择器的一些例子:

"blockquote i" // 匹配 <blockquote> 里的 <i> 元素

"ol > li" //<1i> 元素是 <of> 的直接子元素

"#output+*" //id="output" 元素后面的兄弟元素

"div.note > h1+p" // 紧跟 <h1> 的 < Jquery学习之选择器种类及其原理详解

> 元素，在 <div class="note"> 里面

注意组合选择器并不限于组合两个选择器: 组合三个甚至更多选择器也是允许的。组合选择器从左到右处理。

3 、选择器组合

传递给$() 函数 ( 或在样式表中使用 ) 的选择器就是选择器组，这是一个逗号分隔的列表，由一个或多个简单选择器或组合选择器构成。选择器组匹配的元素只要匹配该选择器组中的任何一个选择器就行。对我们来说，一个简单选择器也可以认为是一个选择器组。下面是选择器组的一些例子 :

"h1, h2,h3" // 匹配 <h1>, <h2> 和 <h3> 元素

"#p1, #p2, #p3" // 匹配 id 为 p1, p2 或 p3 的元素

"div.note, p.note" // 匹配 class="note" 的 <div> 和 < Jquery学习之选择器种类及其原理详解

> 元素

"body>p,div.note>p" //<body> 和 <div class="note"> 的 < Jquery学习之选择器种类及其原理详解

> 子元素

注意:CSS 和 jQuery 选择器语法允许在简单选择器的某些过滤器中使用圆括号，但并不允许使用圆括号来进行更常见的分组。例如，不能把选择器组或组合选择器放在圆括号中并且当成简单选择器 :

(h1, h2, h3)+p // 非法

h1+p, h2+p, h3+p // 正确的写法

二、怎样选取

除了$() 函数支持的选择器语法， jQuery 还定义了一些选取方法。本章中我们已看到过的大部分 jQuery 方法都是在选中元素上执行某种操作。选取方法不一样 : 它们会修改选中元素集，对其进行提取、扩充或仅作为新选取操作的起点。

本节描述这些选取方法。你会注意到这些选取方法中的多数提供的功能与选择器语法的功能是一样的。

提取选中元素最简单的方式是按位置提取。first() 返回的 jQuery 对象仅包含选中元素中的第一个， last() 返回的 jQuery 对象则只包含最后一个元素。更通用的是， eq() 方法返回物 Query 对象只包含指定序号的单个选中元素。 ( 在 jQuery 1.4 中，负序号也是允许的，会从选区的末尾开始计数。 ) 注意这些方法返回的 jQuery 对象只含有一个元素。这与常见的数组序号是不一样的，数组序号返回的单一元素没有经过 jQuery 包装 :

var paras=$("p");

paras.first() // 仅选取第一个 <p> 元素

paras.last() // 仅选取最后一个 < Jquery学习之选择器种类及其原理详解

paras.eq(1) // 选取第二个 < Jquery学习之选择器种类及其原理详解

paras.eq(-2) // 选取倒数第二个 < Jquery学习之选择器种类及其原理详解

paras[1] // 第二个 < Jquery学习之选择器种类及其原理详解

> 元素自身

通过位置提取选区更通用的方法是slice()o jQuery 的 slice() 方法与 Array.slice() 方法类似 : 前者接受开始和结束序号 ( 负序号会从结尾处计算 ) ，返回的 jQuery 对象包含从开始到结束序号 ( 但不包含结束序号 ) 处的元素集。如果省略结束序号，返回的对象会包含从开始序号起的所有元素 :

$("p").slice(2,5) // 选取第 3 个、第 4 个和第 5 个 < Jquery学习之选择器种类及其原理详解

> 元素

$("div").slice(-3) // 选取最后 3 个 <div> 元素

filter() 是通用的选区过滤方法，有 3 种调用方式 :

传递选择器字符串给filter() ，它会返回一 }jQuery 对象，仅包含也匹配该选择器的选中元素。

传递另一个jQuery 对象给 filter() ，它会返回一个新的 jQuery 对象，该对象包含这两们 Query 对象的交集。也可以传递元素数组甚至单一文档元素给 filter() 。

传递判断函数给filter() ，会为每一个匹配元素调用该函数， filter() 则返回一个 jQuery 对象，仅包含判断函数为 true( 或任意真值 ) 的元素。在调用判断函数时， this 值为当前元素，参数是元素序号。

$("div").filter(".note") // 与 $("div.note") 一样

$("div").filter($(".note")) // 与 $("div.note") 一样

$("div").filter(function(idx){return idx%2 == 0}) // 与 $("div:even") 一样

not() 方法与 filter() 一样，除了含义与 filter() 相反。如果传递选择器字符串给 not() 它会返回一个新的 jQuery 对象，该对象只包含不匹配该选择器的元素。如果传递 jQuery 对象、元素数组或单一元素给 not() ，它会返回除了显式排除的元素之外的所有选中元素。如果传递判断函数给 not() ，该判断函数的调用就与在 filter() 中一样，只是返回的 jQuery 对象仅包含那些使得判断函数返回 false 或其他假值的元素 :

$("div").not("#header, #footer"); // 除了两个特殊元素之外的所有元素

在jQuery 1.4 中，提取选区的另一种方式是 has() 方法。如果传入选择器， has() 会返回一个新的 jQuery 对象，仅包含有子孙元素匹配该选择器的选中元素。如果传入文档元素给 has() ，它会将选中元素集调整为那些是指定元素祖先节点的选中元素 :

$("p").has("a[href]") // 包含链接的段落

add() 方法会扩充选区，而不是对其进行过滤或提取。可以将传给 $() 函数的任何参数 ( 除了函数 ) 照样传给 add() 方法。 add() 方法会返回原来的选中元素，加上传给 $() 函数的那些参数所选中 ( 或创建 ) 的那些元素。 add() 会移除重复元素，并对该组合选区进行排序，以便里面的元素按照文档中的顺序排列 :

// 选取所有 <div> 和所有 < Jquery学习之选择器种类及其原理详解

> 元素的等价方式

$("div, p") // 使用选择器组

$("div").add(p) // 给 add() 传入选择器

$("div").add($("p")) // 给 add() 传入 jQuery 对象

var paras = document.getElementsByTagName("p"); // 类数组对象

$("div").add(paras); // 给 add() 传入元素数组

1 、恢复到之前的选中元素集

为了实现方法的链式调用，很多jQuery 对象的方法最后都会返回调用对象。然而本节讲述的方法都返回新的 jQuery 对象。可以链式调用下去，但必须清晰地意识到，在链式调用的后面所操作的元素集，可能已经不是该链式调用开始时的元素集了。

实际情况还要复杂些。当这里所描述的选取方法在创建或返回一个新的ejQuery 对象时，它们会给该对象添加一个到它派生自的旧 jQuery 对象的内部引用。这会创建一个 jQuery 对象的链式表或栈。 end() 方法用来弹出栈，返回保存的 jQuery 对象。在链式调用中调用 end() 会将匹配元素集还原到之前的状态。考虑以下代码 :

// 寻找所有 <div> 元素，然后在其中寻找 <P> 元素

// 高亮显示 <P> 元素，然后给 <div> 元素添加一个边框

// 首先，不使用链式调用

var divs = $("div");

var paras = div.find("p");

paras.addClass("highlight");

divs.css("border", "solid black 1px");

// 下面展现如何使用链式调用来实现

$("div").find("p").addClass("highlight").end().css("border", "solid black 1px");

// 还可以将操作调换顺序来避免调用 end()

$("div").css("border", "solid block 1px").find("p").addClass("highlight");

如果想手动定义选中元素集，同时保持与end() 方法的兼容，可以将新的元素集作为数组或类数组对象传递给 push5tack() 方法。指定的元素会成为新的选中元素，之前选中的元素集则会压入栈中，之后可以用 end() 方法还原它们 :

var sel = $("div"); // 选取所有 <div> 元素

sel.pushStack(document.getElementsByTagName("p")); // 修改为所有 <P> 元素

sel.end(); // 还原为 <div> 元素

既然我们已经讲解了end() 方法及其使用的选区栈，就有最后一个方法需要讲解。 andSelf() 返回一个新的 jQuery 对象，包含当前的所有选中元素，加上之前的所有选中元素 ( 会去除重复的 ) 。 andSelf() 和 add() 方法一样，或许“ addPrev ”是一个更具描述性的名字。作为例子，考虑上面代码的下述变化 : 高亮显示 <P> 元素及其父节点中的 <div> 元素，然后给这些 <div> 元素添加边框 :

$("div").find("p").andSelf(). // 寻找 <div 》中的 <P> ，合并起来

addClass("highlight"). // 都高亮

end().end(). // 弹出栈两次，返回 $("div")

css("border", "solid black 1px"); // 给 divs 添加边框

2. 将选中元素集用做上下文

上面描述的filter(). add() 、和 not() 方法会在各自的选中元素集上执行交集、并集和差集运算。 jQuery 还定义一些其他选取方法可将当前选中元素集作为上下文来使用。对选中的每一个元素，这些方法会使用该选中元素作为上下文或起始点来得到新的选中元素集，然后返回一个新的 jQuery 对象，包含所有新的选中元素的并集。与 add() 方法类似，会移除重复元素并进行排序，以便元素会按照在文档中出现的顺序排列好。

该类别选取方法中最通用的是find() 。它会在每一个当前选中元素的子孙元素中寻找与指定选择器字符串匹配的元素，然后它返回一个新的 jQuery 对象来代表所匹配的子孙元素集。注意这些新选中的元素不会并入已存在的选中元素集中。同时注意 find() 和 filter() 不同， filter() 不会选中新元素，只是简单地将当前选中的元素集进行缩减 :

$("div").find("p") // 在中查找元素，与 $("div p") 相同

该类别中的其他方法返回新的jQuery 对象，代表当前选中元素集中每一个元素的子元素、兄弟元素或父元素。大部分都接受可选的选择器字符串作为参数。不传入选择器时，它们会返回所有子元素、兄弟元素或父元素。传入选择器时，它们会过滤元素集，仅返回匹配的。

children() 方法返回每一个选中元素的直接子元素，可以用可选的选择器参数进行过滤 :

// 寻找 id 为 "header" 和 "footer" 元素的子节点元素中的所有 <span> 元素

// 与 $("#header>span, #footer>span") 相同

$("#header, #footer").children("span")

contents() 方法与 children() 方法类似，不同的是它会返回每一个元素的所有子节点，包括文本节点。如果选中元素集中有 <iframe> 元素， contents() 还会返回该 <iframe> 内容的文档对象。注意 contents() 不接受可选的选择器字符串参数—因为它返回的文档节点不完全是元素，而选择器字符串仅用来描述元素节点。

next() 和 prev() 方法返回每一个选中元素的下一个和上一个兄弟元素 ( 如果有的话 ) 。如果传入了选择器，会只选中匹配该选择器的兄弟元素 :

$("h1").next("p") // 与 $("h1+p") 相同

$("h1").prev() //<h1> 元素前面的兄弟元素

nextAll() 和 prevAll() 返回每一个选中元素前面或后面的所有兄弟元素 ( 如果有的话 ) 。 siblings() 方法则返回每一个选中元素的所有兄弟元素 ( 选中元素本身不是自己的兄弟元素 ) 。如果给这些方法传人选择器，则只会返回匹配的兄弟元素 :

$("#footer").nextAll("p") // 紧跟 #footer 元素的所有 <P> 兄弟元素

$("#footer").prevAll() //#footer 元素前面的所有兄弟元素

从jQuery 1.4 开始， nextUntil() 和 prevUntil() 方法接受一个选择器参数，会选取选中元素后面或前面的所有兄弟元素，直到找到某个匹配该选择器的兄弟元素为止。如果省略该选择器，这两个方法的作用就和不带选择器的 nextAll() 和 prevAll() 一样。

parent() 方法返回每一个选中元素的父节点 :

$("li").parent() // 列表元素的父节点，比如 <u1> 和 <ol> 元素

parents() 方法返回每一个选中元素的祖先节点 ( 向上直到元素 ) 。 parent() 和 parents() 都接受一个可选的选择器字符串参数 :

$("a[href]").parents("p") // 含有链接的 <P> 元素

parentsUntil() 返回每一个选中元素的祖先元素，直到出现匹配指定选择器的第一个祖先元素。 closest() 方法必须传人一个选择器字符串，会返回每一个选中元素的祖先元素中匹配该选择器的最近一个祖先元素 ( 如果有的话 ) 。对该方法而言，元素被认为是自身的祖先元素。在 jQuery 1.4 中，还可以给 closest() 传入一个祖先元素作为第二个参数，用来阻止 jQuery 往上查找时超越该指定元素 :

$("a[href]").closest("div") // 包含链接的最里层 <div>

$("a[href]").parentsUntil(":not(div)") // 所有包裹 <a> 的 <div> 元素

来源：极客头条

Jquery学习之选择器种类及其原理详解

热门帖子

Swift 教程

最新帖子

Xcode 9.4下载