Rumah >hujung hadapan web >tutorial js >jquery常用选择器种类及其使用原理的介绍
jquery常用选择器种类及其使用原理的介绍
- 伊谢尔伦asal
- 2017-06-16 10:23:311674semak imbas
|
jquery选择器、css3选择器各种各样的选择器，作为非常灵活的jquery选择器到底如何使用呢？ 一、对于jQuery选择器基本用法 在CSS3选择器标淮草案定义的选择器语法中，jQuery支持相当完整的一套子集，同时还添加了一些非标准但很有用的伪类。注意:本节讲述的是 jQuery选择器。其中有不少选择器(但不是全部)可以在CSS样式表中使用。选择器语法有三层结构。你肯定已经见过选择器中最简单的形式。”#te st”选取id属性为”test”的元素。”blockquote”选取文档中的所有
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 匹配 :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 匹配元素(jQuery的扩展) :first 匹配列表中的第一个元素。和“:eq(0)”相同(jQuery的扩展) :first-child 匹配的元素是其父节点的第一个子元素。注意:这与“:first”不同 :gt(n) 匹配基于文档顺序、序号从0开始的选中列表中序号大于n的元素( jQuery的扩展) :has(sel) 匹配的元素拥有匹配内嵌选择器sel的子孙元素 :header 匹配所有头元素: :hidden 匹配所有在屏幕上不可见的元素:大体上可以认为这些元素的offsetWidth和offsetHeight为0 :image 匹配元素。注意该过滤器不会匹配 :input 匹配用户输入元素:, |
