JQuery选择器
Posted 舒山
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery选择器相关的知识，希望对你有一定的参考价值。
选择器总结：
核心选择器（应用最广泛的选择器）
| * |
选择所有元素 |
| 元素 |
选择特定类型的元素 |
| .类名 |
选择具有特定class的元素 |
| 元素.类名 |
选择具有特定class的某类元素 |
| #id |
选择具有特定id属性值的元素 |
属性选择器（根据元素的属性来选择元素）
| [attr] |
选取定义了attr属性的元素，即使这个属性没有值 |
| [attr="val"] |
选取attr属性值等于字符串val的元素 |
| [attr^="val"] |
选取attr值以val开头的元素 |
| [attr$="val"] |
选取attr值以val结尾的元素 |
| [attr*="val"] |
选取attr值包含val的元素 |
| [attr~="val"] |
选取attr属性其中一个值是字符串val的元素 |
| [attr|="val"] |
选取attr属性等于字符串val，或属性值为连字符分割的值列表且第一个值为val的元素，如attr="val-aaa-bbb" |
| [selector1][selector2][selector3]... |
复合属性选择器，需要同时满足多个条件使用，属性选择器可以配合其他选择器使用 |
关系选择器
| <selector1> <selector2> |
在给定的祖先元素下匹配所有的后代元素 |
| <selector1>><selector2> |
在给定的父元素下匹配所有的子元素 |
| <selector1>+<selector2> |
匹配所有紧接在<selector1>元素右面的<selector2> |
| <selector1>~<selector2> |
匹配<selector1>元素的所有同辈<selector2>元素 |
伪元素和伪类选择器
| :checked |
用于表单，匹配所有被选中元素（单选、复选框等，不包括select元素的option元素） |
| :disabled |
用于表单，匹配所有不可用元素 |
| :enabled |
用于表单，匹配所有可用元素 |
| :focus |
主要用于表单，选取得到焦点的元素 |
| :required |
用于表单，选取具有required属性的元素 |
| :optional |
用于表单，选取缺少required属性的元素 |
| :empty |
匹配所有既不包含子元素也不包含文本的空元素 |
| :first-child |
选取第一个子元素 |
| :last-child |
选取最后一个子元素 |
| :nth-child(n) |
选取元素的第n个子元素（从1开始），n可为even或odd |
| :nth-last-child(n) |
选取元素的倒数第n个子元素 |
| :nth-of-type(n) |
选取同属于一个父元素之下，并且标签名相同的元素中的第n个 |
| :nth-last-of-type(n) |
选取同属于一个父元素之下，并且标签名相同的元素中的倒数第n个 |
| :only-child |
如果某个元素是父元素中唯一的子元素，将会被匹配 |
| :only-of-type |
选择所有没有兄弟元素的元素 |
| :root |
选取文档的根元素，在html文档中即是<html>元素 |
联合选择器和反选择器
| <selector1>,<selector2>,<selector3>…… |
匹配各个选择器的交集元素 |
| :not(selector) |
匹配不符合选择器要求的元素 |
jQuery扩充的选择器
| :animated |
匹配所有正在执行动画效果的元素 |
| :contains(text) |
如果元素内或者后代元素内包含指定的文本即被选中 |
| :eq(n) |
选择第n个元素（从0开始计数） |
| :first |
选择第一个匹配的元素 |
| :last |
选择最后一个匹配的元素 |
| :lt(n) |
选择序号小于n的所有元素（从0开始计数） |
| :gt(n) |
选择序号大于n的所有元素（从0开始计数） |
| :odd |
选择所有奇数元素(从0开始计数) |
| :even |
选择所有的偶数元素（从0开始计数） |
| :has(选择器) |
匹配包含 选择器所匹配的元素的元素 |
| :text |
用于表单，匹配所有的单行文本框 |
| :button |
匹配所有按钮（input标签type为button以及<button>标签） |
| :checkbox |
用于表单，选择所有的复选框（匹配所有复选框） |
| :file |
用于表单，选择所有的文件上传输入框 |
| :input |
用于表单，选择所有的input元素（匹配所有 input, textarea, select 和 button 元素） |
| :password |
用于表单，选择所有的密码输入框 |
| :radio |
用于表单，选择所有的单选框 |
| :submit |
用于表单，选择所有的表单提交按钮 |
| :image |
用于表单，匹配所有图像域 |
| :reset |
用于表单，选择所有的表单重置按钮 |
| :selected |
用于表单，匹配所有选中的option元素 |
| :header |
匹配如 h1, h2, h3之类的标题元素 |
| :hidden |
选择所有的被隐藏文件 |
| :visible |
选择所有的可见元素 |
| :parent |
匹配含有子元素或者文本的元素 |
限制搜索的范围
| 表达式 |
例子 |
说明 |
备注 |
| $(选择器,$(选择器)) |
var $divs=$(\'#div1\');alert($(\'p\',$divs).length);
|
id为div1的元素及其后代元素范围中p元素的个数 |
|
以上是关于JQuery选择器的主要内容，如果未能解决你的问题，请参考以下文章
jquery选择器都有哪些
[ jquery 选择器 总览 ] jquery选择器总览
jQuery ---[jQuery选择器,jQuery对象的遍历]
jQuery选择器
jQuery选择器概述
jQuery选择器介绍：基本选择器层次选择器过滤选择器表单选择器