不会用选择器，望元素兴叹，难受的要死！在此全面的记录一遍。看完就彻底知之了！
jquery的选择器分为以下几类
1. 基本选择器
| 选择器 |
描述 |
示例 |
| #id |
根据id匹配一个元素 |
$("#test")选取id为test的元素 |
| .class |
根据类名匹配元素 |
$(".test")选取类名为test的元素集合 |
| element |
根据标签名匹配元素 |
$("p")选取所有的<p>元素 |
| * |
匹配所有元素 |
$("*")选取所有元素 |
| selector1, selector2, <br />...., selectN |
将每一个选择器匹配到的元素合并到一起返回 |
$("div, span, p.myCalss")选取所有<div>, <span>和拥有class为myClass的 <p>标签的一组元素 |
2. 层次选择器
| 选择器 |
描述 |
示例 |
| $("ancestor descendant") |
选取ancestor元素里所有的descendant（后代）元素 |
$("div span")选取<div>里所有的<span>后代元素 |
| $("parent > child") |
选取子元素 |
$("div > span")选取<div>元素下元素名是<span>的子元素 |
| $("prev + next") |
选取紧接在prev元素后的next元素 |
$(".one + div")选取class为one的下一个<div>同辈元素 |
| $("prev~siblings") |
选取pre元素之后的所有siblings元素 |
$("#two~div")选取id为two的元素后面的所有<div>同辈元素 |
前两种常用，后两种不常用，因为有更简单的方式替代
$(".one + div") 等价于 $(".one").next("div")
$("#pre~div") 等价于 $("#pre").nextAll("div") 选取之后的同辈元素
另外，有一个选取同辈元素的方法，但 是选取全部，无论前后位置
$("#pre").siblings("div")
3. 过滤选择器
主要通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即以一个冒号开头
| 选择器 |
描述 |
示例 |
| :first |
选取第一个元素 |
$("div:first")选取第一个div元素 |
| :last |
选取最后一个元素 |
$("div:last")选取最后一个div元素 |
| :not(selector) |
去除所有与给定选择器匹配的元素 |
$("input:not(.myClass)")选取class不是myClass的所有input元素 |
| :even |
选择索引是偶数的所有元素，索引从0开始 |
$("input:even")选取索引是偶数的input元素 |
| :odd |
选择索引是奇数的所有元素，索引从0开始 |
$("input:odd")选取索引是奇数的input元素 |
| :eq(index) |
选择索引等于index的元素，索引从0开始 |
$("input:eq(1)")选取索引等于1的input元素 |
| :gt(index) |
选择索引大于index的元素，索引从0开始 |
$("input:gt(1)")选取索引大于1的input元素 |
| :lt(index) |
选择索引小于index的元素，索引从0开始 |
$("input:lt(1)")选取索引小于1的input元素 |
| :header |
选取所有的标题元素，例如h1,h2,h3等 |
$(":header")选取网页中所有的h1, h2, h3 ... |
| :animated |
选取当前正在执行动车的所有元素 |
$("div:animated")选取正在执行动车的div元素 |
| :focus |
选取当前获取焦点的元素 |
$(":focus")选取当前获取焦点的元素 |
- 内容过滤选择器
过滤规则体现在它所包含的子元素或文本内容上
| 选择器 |
描述 |
示例 |
| :contains(text) |
选取含有文本内容为"text"的元素 |
$("div:contains('我'")选取含有文本“我”的div元素 |
| :empty |
选取不包含子元素或文本的空元素 |
$("div:empty")选取不包含子元素（包括文本元素）的div空元素 |
| :has(selector) |
选取含有选择器所匹配的元素的元素 |
$("div:has(p)")选取含有p元素的div元素 |
| :parent |
选取含有子元素或文本的元素 |
$("div:parent")选取拥有子元素（包括文本元素）的div元素 |
- 可见性过滤选择器
根据元素的可见和不可见状态来选择相应的元素
| 选择器 |
描述 |
示例 |
| :hidden |
选取所有不可见元素 |
$(":hidden")选取所有不可见元素，包括<input type="hidden" />, <div style="display=none;">和<div style="visibility:hidden;">等元素。如果只想选取input元素，可以使用$("input:hidden") |
| :visible |
选取所有可见元素 |
$("div:visible")选取所有可见的div元素 |
| 选择器 |
描述 |
示例 |
| [attribute] |
选取拥有此属性的元素 |
$("div[id]") |
| [attribute=value] |
选取属性的值为value的元素 |
$("div[title=test]") |
| [atrribute!=value] |
选取属性的值不等于value的元素 |
$("div[title!=test]") |
| [atrribute^=value] |
选取属性的值以value开始的元素 |
$("div[title^=test]") |
| [atrribute$=value] |
选取属性的值以value结束的元素 |
$("div[title$=test]") |
| [atrribute*=value] |
选取属性的值含有value的元素 |
$("div[title*=test]") |
| [atrribute竖线=value] |
选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素 |
$("div[title竖线=test]") |
| [atrribute~=value] |
选取属性用空格分隔的值中包含一个给定值的元素 |
$("div[title~=test]") |
| [attribute][attribute2][attributeN] |
用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围 |
$("div[id][title$=test]") |
| 选择器 |
描述 |
示例 |
:nth-child(index/
even/odd/equation) |
选取每个父元素下的第index个子元素或者奇偶元素（index从1开始） |
$("div.one :nth-child(2)" 每个class为one的div父元素下的第2个子元素 |
| :first-child |
选取每个父元素的第1个子元素 |
$("div.one :first-child") 每个class为one的div父元素下的第1个子元素 |
| :last-child |
选取每个父元素的最后一个子元素 |
$("div.one :last-child") 每个class为one的div父元素下的最后一个子元素 |
| :only-child |
如果某个元素是它父元素中惟一的子元素，那么将会被匹配。如果含有其它元素，则不会被匹配 |
$("div.one :only-child") 如果class为one的div父元素下只有一个子元素，匹配 |
| 选择器 |
描述 |
示例 |
| :enabled |
选取所有可用元素 |
$("#form1 :enabled") |
| :disabled |
选取所有不可用元素 |
$("#form2 :disabled") |
| :checked |
选取所有被选中元素（单选框，复选框） |
$("input:checked") |
| :selected |
选取所有被选中的选项元素（下拉列表） |
$("select option:selected") |
4. 表单选择器
为了更加灵活操作表单，专门加入了表单选择器
| 选择器 |
描述 |
示例 |
| :input |
选取所有的input、textarea、select、button |
$("#form1 :input") |
| :text |
选取单行文本框 |
$(":text") |
| :password |
选取密码框 |
$(":password") |
| :radio |
选取单单选框 |
$(":radio") |
| :checkbox |
选取多选框 |
$(":checkbox") |
| :submit |
选取提交按钮 |
$(":submit") |
| :image |
选取图像按钮 |
$(":image") |
| :reset |
选取重置按钮 |
$(":reset") |
| :button |
选取按钮 |
$(":button") |
| :file |
选取上传域 |
$(":file") |
| :hidden |
选取不可见元素 |
$(":hidden") |
