JQery选择器写法简单，能够支持CSS1至CSS3选择器并且具有完善的处理机制。是我们常用的选择器。今天就JQuery选择器我们做简单的总结。
JQuery选择器分类
1、基本选择器
2、层次选择器
3、过滤选择器
3.1、基本过滤选择器
3.2、内容过滤选择器
3.3、可见性过滤选择器
3.4、属性过滤选择器
3.5、子元素过滤选择器
3.6、表单对象属性过滤选择器
4、表单选择器
JQuery选择器详解
1、JQuery基本选择器
| 选择器 | 相关描述 | 返回 | 选择器示例 |
| #id | 根据指定的id匹配元素 | 单个元素 | $("#main")选择id=main的元素 |
| .class | 根据类匹配元素 | 集合元素 | $(".main")选择class=main的元素 |
| * | 匹配所有元素 | 集合元素 | $("*")选择所有的元素 |
| Element | 根据元素名匹配元素 | 集合元素 | $("div")选择所有的div元素 |
| E1，E2，E3 | 分组匹配元素 | 集合元素 | $("div,span,.old)选择所有的idv.span,class=old的元素 |
应该注意的是：
$("E1+E2")可以用$(E1).next(E2)代替
$("E1~E2")可以用$(E1).nextAll(E2)代替
2、Jquery层次选择器
| 选择器 | 描述 | 返回值 | 选择器用例 |
| $("E1 E2") | 选择E1下所有的E2 | 集合元素 | $("div span")选择div下面的所有span元素 |
| $("E1>E2") | 选择E1下的子E2,不包含E2下满足的元素 | 集合元素 | $("div>span")选择div下面的span元素，不包含span中的span元素 |
| $("E1+E2") | 选择E1后紧相邻的E2 | 集合元素 | $(".one+div")选择class=one的下一个div元素 |
| $("E1~E2") | 选择E1之后的所有E2 | 集合元素 | $("#one~div")选择id为one后的所有div元素 |
3、JQuery过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素，过滤规则与css中的伪类选择器语法相同，即过滤选择器都是以冒号（：）开头
3.1、基本过滤选择器
| 选择器 | 描述 | 返回值 | 选择器用例 |
| ：first | 选择第一个元素 | 单个元素 | $("div:first”)选择第一个div元素 |
| :last | 选择最后一个元素 | 单个元素 | $("div:last”)选择最后一个div元素 |
| :not(E1) | 去除所有E1选择器匹配的元素 | 集合元素 | $("div:not(.my)")选择所有的class不是my的div元素 |
| :even | 选择所有索引号为偶数的元素，索引从0开始 | 集合元素 | $("tr:even")选择表格中所有的偶数行 |
| :odd | 选择所有索引为奇数的元素，索引从0开始 | 集合元素 | $("tr:odd")选择表格中所有的奇数行 |
| :eq(index) | 选择索引值为Index的元素，Index从0开始 | 单个元素 | $("tr:eq(1)")选择所有索引值为1的行 |
| :gt(index) | 选择所有索引值大于index的元素，index从0开始 | 集合元素 | $("tr:gt(1)")选择所有索引值大于1的行 |
| :lt(index) | 选择所有索引值小于index的元素，index从0开始 | 集合元素 | $("tr:lt(1)")选择所有索引值小于1的行 |
| :header | 所取所有标题元素 h1-h6 | 集合元素 | $(".header")选择网页中所有的<h1>\<h2> |
| :animated | 选择当前正在执行动画的元素 | 集合元素 | $("div:animated") 选择正在执行动画的div元素 |
3.2、JQuery内容过滤选择器
| 选择器 | 描述 | 返回值 | 选择器用例 |
| :contains（text） | 选择包含text文本内容的元素 | 集合元素 | $（“div:contain(‘好‘)”）选择内容包含好的所有div |
| ：empty | 选择不包含元素或者文本的空元素 | 集合元素 | $("div:empty")选择不包含子元素的所有div元素 |
| :has(E1) | 选择包含有（E1选择器匹配到的元素）的所有元素 | 集合元素 | $("div:has(p)")选择含有P元素的所有div元素 |
| :parent | 选择含有子元素或者文本的元素 | 集合元素 | $("div:parent")选择用于子元素的所有div元素 |
3.3、可见性过滤选择器
| 选择器 | 描述 | 返回值 | 选择器用例 |
| ：hidden | 选择所有不可见元素 | 集合元素 | $(“.hidden”)选择所有不可见元素 包括：<input type="hidden"/> <div style="display:none"> <div style="visibility:hidden"> |
| :visibke | 选择所有可见元素 | 集合元素 | $("div:visible")选择所有的div元素 |
JQuery选择器总结
原文地址：https://www.cnblogs.com/chongzixing/p/9276622.html