jQuery选择器总结
2017-04-22 本文已影响155人
ST_Pace
jQuery选择器完全继承了css的风格
常用的css选择器
| 选择器 | 语法 | 描述 |
|---|---|---|
| 标签选择器 | E{ } | 文档元素作为选择符 |
| ID选择器 | #ID{ } | 文档元素的唯一标识ID作为选择符 |
| 类选择器 | .className{ } | 文档元素的class作为选择符 |
| 群组选择器 | E1，E2，E3{ } | 多个选择符应用同样的样式规则 |
| 后代选择器 | E F{ } | 元素E的任意后代元素F |
| 通配选择器 | *{ } | 文档的所有元素为选择符 |
jQuery选择器获取的是jQuery对象，即使获取网页中不存在的元素也不会报错。而是用传统getElementById（）使用前需检测元素是否存在，否则元素不存在会报错
使用jQuery检测元素在网页上是否存在：
if($("#ID").length>0)
{
...
}
//或转为DOM对象
if($("#ID")[0])
{
...
}
jQuery选择器
基本选择器
基本类似于上面列举的常用CSS选择器
- $("#id")
- $(".class")
- $("element")
- $("*")
- $("selector1,selector2...")
层次选择器
| 语法 | 描述 |
|---|---|
| $("ancestor descendant") | 选取ancestor元素中所有descendant元素 |
| $("parent>child") | 选取parent元素下的child元素 |
| $("prev+next") | 选取紧接prev元素后的next元素 |
| $("prev~siblings") | 选取prev元素后所有的siblings元素 |
后两种通常使用next( )和nextAll( )等价替换
过滤选择器
过滤规则与css中伪类选择器语法相同，以（：）开头
基本过滤选择器
| 语法 | 描述 |
|---|---|
| $("div:first") | 选取第一个元素 |
| :last | 选取最后一个元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 |
| :even | 选取索引是偶数的所有元素，索引从0开始 |
| :odd | 选取索引是奇数的所有元素，索引从0开始 |
| :eq(index) | 选取索引等于index的所有元素，索引从0开始 |
| :gt(index) | 选取索引大于index的所有元素，索引从0开始 |
| :lt(index) | 选取索引小于index的所有元素，索引从0开始 |
| :header | 选取所有标题元素 |
| :animated | 选取当前正在执行动画的所有元素元素 |
| :focus | 选取当前获取焦点的元素元素 |
内容过滤选择器
| 语法 | 描述 |
|---|---|
| :contains(text) | 选取文本内容为text的元素 |
| :empty | 选取不包含子元素或者文本的空元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 |
| :parent | 选取含有子元素或者文本的元素 |
可见性过滤选择器
| 语法 | 描述 |
|---|---|
| :hidden | 选取所有不可见的元素 |
| :visible | 选取所有可见的元素 |
属性过滤选择器
| 语法 | 描述 |
|---|---|
| [attribute] | 选取拥有此属性的元素 |
| [attribute=value] | 选取属性值为value的元素 |
| [attribute!=value] | 选取属性值不等于value的元素 |
| [attribute^=value] | 选取属性值以value开始的元素 |
| [attribute$=value] | 选取属性值以value结束的元素 |
| [attribute*=value] | 选取属性值含有value的元素 |
| [attribute |=value] | 选取属性值等译给定字符串或以该字符串为前缀（字符串后跟连字符“-”）的元素 |
| [attribute~=value] | 选取属性值用空格分隔的值中包含一个给定值的元素 |
| [attribute1][attribute2][attribute3] | 复合属性选择器，满足多个条件 |
子元素过滤选择器
| 语法 | 描述 |
|---|---|
| :nth-child(index/even/odd/equation) | 选取每个父元素下（第index个/奇/偶）的子元素（index从1开始） |
| :first-child | 选取每一个父元素的第一个子元素 |
| :last-child | 选取每一个父元素的最后一个子元素 |
| :only-child | 若某元素是父元素中为一的子元素，则匹配 |
:eq(index)只匹配一个元素，从0算起；而:nth-child(index)为每一个父元素匹配子元素
表单对象属性过滤选择器
| 语法 | 描述 |
|---|---|
| :enabled | 选取所有可用元素 |
| :disabled | 选取所有不可用元素 |
| :checked | 选取所有被选中的元素（单选框/复选框checkbox） |
| :selected | 选取所有被选中的选项元素（下拉列表select） |
表单选择器
- :input
- :text
- :password
- :radio
- :checkbox
- :submit
- :image
- :reset
- :button
- :file
- :hidden
属性值中若含有特殊字符，需使用转义符("\")转义
作为一个目标而存在的东西，总是那么美丽而优雅
