Rumah > Artikel > hujung hadapan web > jquery常用选择器种类及其使用原理的介绍

jquery常用选择器种类及其使用原理的介绍

伊谢尔伦asal: 2017-06-16 10:23:311655semak imbas

jquery选择器、css3选择器各种各样的选择器，作为非常灵活的jquery选择器到底如何使用呢？

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

在CSS3选择器标淮草案定义的选择器语法中，jQuery支持相当完整的一套子集，同时还添加了一些非标准但很有用的伪类。注意:本节讲述的是 jQuery选择器。其中有不少选择器(但不是全部)可以在CSS样式表中使用。选择器语法有三层结构。你肯定已经见过选择器中最简单的形式。”#te st”选取id属性为”test”的元素。”blockquote”选取文档中的所有

元素，而”p.note” 则选取所有class属性为”note”的
元素。简单选择器可以组合成“组合选择器”，比如 “p.note>p”和“blockquote i”，只要用组合字符做分隔符就行。简单选择器和组合选择器还可以分组成逗号分隔的列表。这种选择器组是传递给$()函数最常见的形式。在解释组合选择器和选择器组之前，我们必须先了解简单选择器的语法。

1、简单选择器使用

简单选择器的开头部分(显式或隐式地)是标签类型声明。例如，如果只对
元素感兴趣，简单选择器可以用“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的元素。因此选择器“p.note”与“p [class~=note]”相同

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

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

:button 匹配

jquery常用选择器种类及其使用原理的介绍

,

,

,

,

或