选择器的分类与使用
基本选择器
层次选择器
过滤选择器
| 基本选择器 |
描述 |
| $("#id名") |
根据元素id获取元素 |
| $(".class名") |
根据元素class名获取元素 |
| $(“标签名”) |
选取某种标签的所有元素 |
| 层次选择器 |
描述 |
| $(“ancestor descendant”) |
选取ancestor的所有descendant（后代）元素 |
| $(“parent > child”) |
选取parent元素下的child(子)元素 |
| $(“prev + next”) |
选取紧接在prev元素后的下一个next元素 |
| $(“prev ~ siblings”) |
选取prev元素后的所有siblings()元素，只要是同辈节点就可以选取 |
过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，该选择器都以冒号("：")开头
可分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单对象属性过滤
基本过滤选择器
| 选择器 |
描述 |
| :first |
选取第一个元素 |
| :last |
选取最后一个元素 |
| :not(selector) |
去除所有与给定选择器匹配的元素 |
| :even |
选取索引值偶数的所有元素，索引从0开始 |
| :odd |
选取索引值奇数的所有元素，索引从0开始 |
| :eq(index) |
选取索引等于index的元素，索引从0开始 |
| :gt(index) |
选取索引大于index的元素，索引从0开始 |
| :lt(index) |
选取索引小于index的元素，索引从0开始 |
| :header |
获取所有的标题元素，如h1,h2等 |
| :animated |
选取当前正在执行动画的所有元素 |
属性过滤选择器
基础知识点：属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
| 属性过滤选择器 |
描述 |
| [attribute] |
选取拥有此属性的元素 |
| [attribute=value] |
选取指定属性的值为value的元素 |
| [attribute!=value] |
选取指定属性的值不等于value的元素 |
| [attribute^=value] |
选取指定属性的值以value开始的元素 |
| [attribute$=value] |
选取指定属性的值以value结束的元素 |
| [attribute*=value] |
选取指定属性的值含有value的元素 |
| [selector1][selector2] …[selectorN] |
用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次，缩小一次范围 |
表单选择器
| 表单过滤选择器 |
描述 |
例子 |
| :input |
选取所有的input元素 （匹配所有input, textarea, select和button元素） |
$(":input") |
| :text |
所有 type=“text” 的 <input> 元素 |
$(":text") |
| :password |
所有 type=“password” 的 <input> 元素 |
$(":password") |
| :radio |
所有 type=“radio” 的<input> 元素 |
$(":radio") |
| :checkbox |
所有 type=“checkbox” 的 <input> 元素 |
$(":checkbox") |
| :submit |
所有 type=“submit” 的<input> 元素 |
$(":submit") |
| :reset |
所有 type=“reset” 的<input> 元素 |
$(":reset") |
| :button |
所有 type=“button” 的<input> 元素 |
$(":button") |
| :image |
所有 type=“image” 的 <input> 元素 |
$(":image") |
| :file |
所有 type=“file” 的 <input> 元素 |
$(":file") |
表单对象属性过滤选择器
| 表单过滤选择器 |
描述 |
| :checked |
单选框/复选框选中 |
| :selected |
下拉框被选择 |
| :enabled |
可用 |
| :disabled |
不可用 |
可见性过滤选择器
基本知识点：可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素;hidden不仅包含样式属性display为none的元素，也包含文本隐藏域（<input type="hidden">）和visible:hidden之类的元素
| 选择器 |
描述 |
| :hidden |
选取所有不可见的元素 |
| :visible |
选取所有可见的元素 |
内容过滤选择器
基本知识点：内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
| 选择器 |
描述 |
| :contains(text) |
选取含有文本内容为text的元素 |
| :empty |
选取不包含子元素或者文本的空元素 |
| :has(selector) |
选取含有选择器所匹配的元素的元素 |
| :parent |
选取含有子元素或者文本的元素 |
子元素过滤选择器
| 子元素过滤选择器 |
描述 |
| :first-child |
选择第一个子元素 |
| :last-child |
选择最后一个子元素 |
| :only-child |
是某个元素的唯一一个子元素时被调用，否则不调用 |
| :nth-child(N) |
匹配属于其父元素的第 N 个子元素，不论元素的类型。 |
