[TOC]
# jQuery的选择器
## jQuery选择器说明
jQuery 最核心的组成部分就是选择器引擎。它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名、属性名、状态等进行快速准确的选择，而且不必担心浏览器的兼容性，写法更加简洁。
jQuery 选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择。
优点：相对于直接使用 JavaScript 获取页面元素和处理业务逻辑相比，用jQuery 选择器来进行操作代码 更简单，且拥有完善的代码检测机制 。
jQuery 选择器根据获取页面中元素的不同，可以划分为四大类 : **基本选择器、层级选择器、筛选选择器和表单选择器。**
### 基本选择器
顾名思义，基本选择器是jQuery中用的最多， 使用最频繁的选择器，通过基本选择器我们可以实现大多数 页面元素的选择。基本选择器主要有： **ID选择器、类选择器、标签选择器、并集选择器和通配符选择器。**
| 选择器 | 语法 | 功能 | 参考实例 |
| --- | --- | --- | --- |
| ID选择器 | #id | 根据给定的id匹配一个元素 | $("#divId") |
| 类选择器 | .class | 根据给定的class匹配所有的元素 | $(".classValue") |
| 标签选择器 | element | 根据给定的元素名匹配所有的元素 | $("elementName") |
| 通配符选择器 | \* | 匹配所有的元素 | $("\*") |
| 并集选择器 | #id,.class | 将每中选择器的结果合并在一起后返回 | $("#divId,.class") |
```
<body>
<div id="demo">我是id为demo的div标签</div>
<div class="box1">我是class为box1的div标签</div>
<div class="box1">我是class为box1的div标签</div>
<div class="box2">我是class为box2的div标签</div>
<div class="box2">我是class为box2的div标签</div>
<p>我是p标签</p>
<script>
$(function () {
//ID选择器:获取页面中id为demo的标签
console.log($("#demo"));
//类选择器:获取页面中所有class为box1的标签
console.log($(".box1"));
//类选择器:获取页面中所有class为box2的标签
console.log($(".box2"));
//标签选择器:获取页面中所有的p标签
console.log($("p"));
//并集选择器:获取页面中id为demo的标签以及class为box2的所有标签
console.log($("#demo,.box2"));
//通配符选择器:获取页面中所有的标签(包括HTML)
console.log($("*"));
})
</script>
</body>
```
### 层级选择器
层次选择器通过 DOM 元素间的层次关系获取元素，其主要的层次关系包括 **后代 、 直接后代 、 下一个相邻兄弟和后面所有兄弟元素**的关系，通过其中某类关系可以方便快捷地定位元素。
| 选择器 | 语法 | 功能 | 参考实例 |
| --- | --- | --- | --- |
| 后代选择器 | parent child | 根据祖先元素匹配所有的后代元素 | $("div p") |
| 直接后代选择器 | parent>child | 根据父元素匹配所有的子元素 | $("div>.box") |
| 下一个相邻兄弟 | prev+next | 匹配所有紧接在prev元素后的相邻元素 | $("#div+p") |
| 后面所有兄弟 | prev~siblings | 匹配prev元素之后的所有兄弟元素 | $("#div~p") |
**说明：** 后代选择器获取的是所有的后代标签（层次关系是祖先与后代），而直接后代仅仅获取指定标签的 子节点满足条件的标签（层次关系为父子关系）。
**补充:**
next() == 下一个相邻兄弟
nextAll() == 后面所有兄弟
代码示例
```
<div class="box">
<div>div1</div>
<div class="current">
<div>A</div>
<div>B</div>
<div>c</div>
</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
</div>
<script>
$(function () {
//(1) 后代标签 $(".box div")
//要获取class为box的标签的所有后代中的div标签
console.log($(".box div"));
//(2) 直接后代 $(".box > div")
console.log($(".box > div"));
//(3) 当前标签后面的第一个兄弟节点 $(".box1 + div")
console.log($(".box1 + div"));
//(4) 当前标签后面的所有的兄弟节点 $(".box1 ~ div")
console.log($(".box1 ~ div"));
})
</script>
```
### 父子兄选择器相关方法
parent() 获取当前标签的父节点 parents() 获取当前标签的祖先节点 parentsUntil() 获取当前标签的祖先节点直到… children() 获取当前标签的子节点 siblings() 获取当前标签的兄弟节点
代码示例
~~~
<body>
<div>
<div class="box">
<div>demo</div>
<div class="active">demo</div>
<div>demo</div>
<div>demo</div>
<div>demo</div>
</div>
<span>我是span</span>
</div>
<button>点击我</button>
<script>
$(function () {
$("button").click(function () {
//(1) 获取当前标签的父节点
console.log(this);
console.log($(".active").parent());
//(2) 获取当前标签的祖先节点
console.log($(".active").parents());
//(3) 获取当前标签的祖先节点直到...
console.log($(".active").parentsUntil("body"));
//(4) 获取当前标签的子节点
console.log($(".box").children());
//(5) 获取除了当前标签之外的其他兄弟节点
console.log($(".active ~ div"));
console.log($(".active").siblings());
})
})
</script>
</body>
~~~
### 筛选选择器
筛选选择器 可以划分为 :**基本筛选选择器、内容筛选选择器、可见性筛选选择器、属性筛选选择器、子元素** **筛选选择器、表单对象属性筛选选择器**。
#### 基本筛选选择器
| 选择器语法 | 功能 |
| --- | --- |
| :first | 获取第一个元素 |
| :last | 获取最后一个元素 |
| :eq | 获取指定索引值的元素 |
| :gt(index) | 获取大于给定索引值的元素 |
| :lt(index) | 获取小于给定索引值的元素 |
| :not(selector) | 获取除给定选择器外的所有元素 |
| :header | 获取所有标题类型的元素 |
| :animated | 获取正在执行动画效果的元素 |
| :even | 获取所有索引值为偶数的元素，索引从0开始 |
| :odd | 获取所有索引值为奇数的元素，索引从0开始 |
代码示例
~~~
<script>
$(function () {
//01 获取整个页面中第一个li标签
console.log($("li:first"));
//02 获取整个页面中最后一个li标签
console.log($("li:last"));
//03 获取整个页面中所有的li标签,除了最后一个
console.log($("li:not(:last)"));
//04 获取整个页面中所有的li标签,除了索引为2的之外
console.log($("li:not(:eq(2))"));
//05 获取索引值为偶数的li标签
console.log($("li:even"));
//06 获取索引值为奇数的li标签
console.log($("li:odd"));
//07 获取索引值为4的li标签
console.log($("li:eq(4)"));
//08 获取所有索引值大于4的li标签
console.log($("li:gt(4)"));
//09 获取所有索引值小于4的li标签
console.log($("li:lt(4)"));
});
</script>
~~~
#### 内容筛选选择器
内容筛选选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配 进行元素定位。
| 选择器语法 | 功能 |
| --- | --- |
| :contains(text) | 获取包含给定文本的元素 |
| :parent | 获取含有子元素或者文本的元素 |
| :empty | 获取所有不包含子元素或者文本的元素 |
| :has(selector) | 获取含有选择器所匹配的元素 |
代码示例
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
div{
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<div>天王盖地虎</div>
<div><span>我是span</span></div>
<div>宝塔镇河妖</div>
<div></div>
<script>
$(function () {
//(1) 获取包含给定文本的元素
console.log($("div:contains('天')"));
console.log($("div:contains('塔')"));
//(2) 获取不包含子元素或文本的空元素
console.log($("div:empty"));
//(3) 获取含有子元素或者是文本的元素
console.log($("div:parent"));
//(4) 获取含有span子标签的div
console.log($("div:has('span')"));
})
</script>
</body>
</html>
~~~
#### 属性筛选选择器
属性过滤选择器 根据元素的某个属性获取元素，在使用的时候我们可以匹配单个属性也可以进行多个属性的匹配。
| 选择器语法 | 功能 |
| --- | --- |
| \[属性名\] | 获取包含给定属性的元素 |
| \[属性名1\] \[属性名2\] | 获取满足多个条件的符合属性的元素 |
| \[属性名='value'\] | 获取包含给定属性且等于指定值的元素 |
| \[属性名!=value\] | 获取包含给定属性且值不等于给定值的元素 |
| \[属性名^=value\] | 获取包含给定属性且值以指定字符开头的元素 |
| \[属性名$=value\] | 获取包含给定属性且值以指定字符结尾的元素 |
| \[属性名\*=value\] | 获取包含给定属性且包含指定字符或子串的元素 |
代码示例：
~~~
<body>
<div>
<a href="www.baidu.com">www.baidu.com</a><br>
<a href="www.jd.com">www.jd.com</a><br>
<a href="www.taobao.com">www.taobao.com</a><br>
<a href="www.wolfcode.cn">www.wolfcode.cn</a><br>
<a href="www.wolfcode.cn" title="demo">www.wolfcode.cn</a><br>
<a href="www.wolfcode.cn" title="Test">www.wolfcode.cn</a><br>
<a>我什么也不是</a>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function () {
//获取所有拥有href属性的a标签
console.log($("a[href]"));
//获取href属性值为www.baidu.com的a标签
console.log($("a[href='www.baidu.com']"));
//获取href属性值不为www.baidu.com的a标签
console.log($("a[href!='www.baidu.com']"));
//获取href属性值以www开头的a标签
console.log($("a[href^='www']"));
//获取href属性值以com结尾的a标签
console.log($("a[href$='com']"));
//获取href属性值包含wolf的a标签
console.log($("a[href*='wolf']"));
//获取href属性值中以www开头且title中包含demo的a标签
console.log($("a[href^='www'][title='demo']"));
</script>
</body>
~~~
#### 子元素筛选选择器
通过子元素筛选选择器可以方便轻松的获取父元素中指定的某个元素。
| 选择器语法 | 功能 |
| --- | --- |
| :first-child | 获取每个元素下的第一个子元素 |
| :last-child | 获取每个父元素下的最后一个子元素 |
| :only-child | 获取每个父元素下的仅有一个子元素 |
| :nth-child(eq-index) | 获取每个父元素下特定索引位置的元素 索引从0开始 |
#### 可见性筛选选择器
可见性过滤选择器 根据元素是否可见的特征获取元素，分为可见和不可见两种。
| 选择器语法 | 功能 |
| --- | --- |
| :visible | 获取所有可见的元素 |
| :hidden | 获取所有不可见元素，获取type为hidden的元素 |
#### 表单对象属性筛选选择器
| 选择器语法 | 功能 |
| --- | --- |
| :enabled | 获取表单中所有属性为可用的元素 |
| :disabled | 获取表单中所有属性为不可用的元素 |
| :checked | 获取表单中所有被选中的元素 |
| :selected | 获取表单中所有被选中的option元素 |
表单选择器
表单在前端开发中是非常重要的标签，在显示和提交数据的数据经常需要用到，在 jQuery 框架中引入了 表 单选择器 ，该选择器专为表单量身打造，通过表单选择器可以在页面中快速定位某表单对象。
| 选择器语法 | 功能 |
| --- | --- |
| :file | 获取所有的文件上传元素 |
| :image | 获取所有的图片域 |
| :text | 获取所有的单行文本域 |
| :reset | 获取所有的重置按钮 |
| :radio | 获取所有的单选按钮 |
| :button | 获取所有的按钮 |
| :submit | 获取所有的提交按钮 |
| :checkbox | 获取所有的复选框 |
| :password | 获取所偶遇的密码框 |
| :input | 获取所偶遇的input、textarea、select元素 |
1
1
1
1
1
1
1
1
1
