您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2014年08月18日 13:26

原创 jQuery 选择器一览表

42 次浏览 读完需要≈ 42 分钟

内容目录

本文是jQuery选择器的参考手册,主要总结归纳所有的jQuery选择器。

jQuery 选择器

以下选择器的棕色部分,表示该部分需要根据实际需要进行设置。这些部分可能是一个选择器、序号、索引或者其他符合要求的表达式(表格中s1s2sN中的蓝色s2也是如此,这里标注为蓝色,以便于与两侧的s1sN进行区分)。

选择器 起始版本 实例 选取
基本选择器——根据多个选择器的组合筛选元素
s1,s2,sN 1.0 $("p,div,#abc") 所有的p元素、div元素和id="abc"的元素
s1s2sN 1.0 $(":radio[name=uid]:checked") 所有被选中的name="uid"的radio元素
ancestor escendant 1.0 $("p span") <p>标签内的所有<span>元素
parent > child 1.0 $("p > span") 所有作为<p>标签的直接子元素的<span>元素
prev + next 1.0 $("label + input") 所有紧跟在<label>元素后面的那个同辈<input>元素
prev ~ sibings 1.0 $("tr#L2 ~ tr") 在id="L2"的<tr>元素之后的所有同辈<tr>元素
基本选择器——根据id、class类名、标签名等筛选元素
* 1.0 $("*") 所有元素
#id 1.0 $("#abc") id="abc"的元素
.className 1.0 $(".post") 所有包含类名"post"的元素
tagName 1.0 $("p") 所有<p>元素
伪类选择器——根据元素在匹配到的所有元素中的特定次序筛选元素
:first 1.0
$("p:first") 第一个<p>标签
:last 1.0 $("p:last") 最后一个<p>标签
:even 1.0 $("tr:even") 所有偶数<tr>标签
:odd 1.0 $("tr:odd") 所有奇数<tr>标签
:eq(index) 1.0
$("li:eq(3)") 第4个li标签(index从0开始算起)
:gt(index) 1.0 $("li:gt(2)") 所有index大于2的li标签(第4、5、6……个li标签)
:lt(index) 1.0 $("li:lt(2)") 所有index小于2的li标签(第1、2个li标签)
伪类选择器——根据元素在父元素的子元素中的特定次序筛选元素
:first-child 1.1.4 $("span:first-child") 所有作为父元素的第一个子元素的<span>元素
:last-child 1.1.4 $("span:last-child") 所有作为父元素的最后一个子元素的<span>元素
:only-child 1.1.4 $("span:only-child") 所有作为父元素的唯一子元素的<span>元素
:nth-child(n) 1.1.4 $("li:nth-child(2)") 所有作为父元素的第2个子元素的<li>标签(n从1开始算起)
:nth-last-child(n) 1.9 $("li:nth-last-child(2)") 所有作为父元素的倒数第2个子元素的<li>标签
:first-of-type 1.9 $("p:first-of-type") 所有作为父元素的第一个<p>类型的子元素
:last-of-type 1.9 $("p:last-of-type") 所有作为父元素的最后一个<p>类型的子元素
:only-of-type 1.9 $("p:only-of-type") 所有作为父元素的唯一一个<p>类型的子元素
:nth-of-type(n) 1.9 $("li:nth-of-type(2)") 所有作为父元素的第2个<li>类型的子元素(n从1开始算起)
:nth-last-of-type(n) 1.9 $("li:nth-last-child(2)") 所有作为父元素的倒数第2个<li>类型的子元素
伪类选择器——根据包含、排除、可见、动画或其他关系筛选元素
:has(selector) 1.1.4 $("ul:has(li.abc)") 所有包含类名为"abc"的<li>标签的<ul>元素
:not(selector) 1.0 $("input:not(:text)") 所有不是文本框的<input>元素
:contains(text) 1.1.4 $(":contains(abc)") 所有包含文本"abc"的元素
:parent 1.0 $(":parent") 所有包含子元素或文本内容(哪怕是空格或换行)的元素
:empty 1.0 $(":empty") 所有没有子元素和文本内容(哪怕是空格或换行)的元素
:visible 1.0 $(":visible") 所有可见的元素
:hidden 1.0 $(":hidden") 所有不可见的元素(包括type="hidden"的<input>元素)
:header 1.2 $(":header") 所有标题标签:h1 ~ h6
:animated 1.2 $(":animated") 所有正在执行动画效果的元素
:focus 1.6 $(":focus") 当前获得焦点的元素
:root 1.9 $(":root") 当前文档的根元素(<html>元素)
:target 1.9 $(":target") id属性等于当前页面URI中的hash码值的元素
:lang(language) 1.9 $(":lang(en)") 所有lang属性以"en"为前缀的元素
属性相关选择器
[attribute] 1.0 $("[href]") 所有带有href属性的元素
[attribute=value] 1.0 $("[name=uid]") 所有name="uid"的元素
[attribute!=value] 1.0 $("[name!=uid]") 所有name属性的值不等于"uid"的元素
[attribute^=value] 1.0 $("[name^=uid]") 所有name属性的值以"uid"开头的元素
[attribute$=value] 1.0 $("[src$='.gif']") 所有src属性以".gif"结尾的元素
[attribute|=value] 1.0 $("[name|=uid]") name属性的值等于"uid",或以"uid-"开头的所有元素
[attribute~=value] 1.0 $("[name~='uid']") name属性的值包含给定的单词"uid"的所有元素("uid"与其他词以空格分隔)
[attribute*=value] 1.0 $("[name*=uid]") 所有name属性的值包含"uid"的元素
伪类选择器——表单相关
:input 1.0 $(":input") 所有input、select、textarea和button标签
:text 1.0 $(":text") 所有type="text"的<input>元素
:password 1.0 $(":password") 所有type="password"的<input>元素
:radio 1.0 $(":radio") 所有type="radio"的<input>元素
:checkbox 1.0 $(":checkbox") 所有type="checkbox"的<input>元素
:submit 1.0 $(":submit") 所有type="submit"的<input>和<button>元素
:reset 1.0 $(":reset") 所有type="reset"的<input>元素和<button>元素
:button 1.0 $(":button") 所有<button>标签(不区分type)和type="button"的<input>元素
:image 1.0 $(":image") 所有type="image"的<input>元素
:file 1.0 $(":file") 所有type="file"的<input>元素
伪类选择器——表单状态相关(表单控件是指input、select、textarea、button、option元素)
:enabled 1.0 $(":enabled") 所有可用(没有disabled属性)的表单控件元素
:disabled 1.0 $(":disabled") 所有禁用(带有disabled属性)的表单控件元素
:selected 1.0 $(":selected") 所有被选中的<option>元素
:checked 1.0 $(":checked") 所有被选中的radio、checkbox和<option>元素
  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论

打开导航菜单