> 选择器用来获取文档上的 DOM 对象的元素,然后把它转成 jquery 对象,最重要的就是操纵 dom 元素,获取值、设置值、形成一些动态的效果都需要使用选择器。
> 选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器。
jQuery 选择器的优点:
简洁的写法:
`$(“#id”)` 等价于 `document.getElementById("id");`
`$(“tagName”)` 等价于 `document.getElementsByTagName("tagName");`
<br/>
**1.基本选择器:**
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找DOM 元素。
![img](https://box.kancloud.cn/7fe1d180bd64d977435b7e5b20999a7d_565x534.png)
<br/>
**2.层次选择器**
如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素
![img](https://box.kancloud.cn/55c30069d80fd5b06c0d2e271a12cd36_560x451.png)
<br/>
**3.基本过滤选择器**
![img](https://box.kancloud.cn/4eb271d8075526c859d1b61e1116d087_443x563.png)
<br/>
**4.属性过滤选择器**
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
- 用法: $(”div[id]“) ; 返回值 集合元素
>[info] 说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的 div 标签.
- [attribute=value]
- 用法: $(”input[name='newsletter']“).attr(”checked”, true); 返回值 集合元素
>[info] 说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素
- [attribute!=value]
- 用法: $(”input[name!='newsletter']“).attr(”checked”, true); 返回值 集合元素
>[info] 说明: 匹配所有不含有指定的属性,或者属性不等于特定值的元素.此选择器等价于`:not([attr=value])`,要匹配含有特定属性但不等于特定值的元素,请使用`[attr]:not([attr=value])`.之前看到的 :not 派上了用场
- [attribute^=value]
- 用法: $(”input[name^=‘news’]“) 返回值 集合元素
>[info] 说明: 匹配给定的属性是以某些值开始的元素
- [attribute$=value]
- 用法: $(”input[name$=‘letter’]“) 返回值 集合元素
>[info] 说明: 匹配给定的属性是以某些值结尾的元素
- [attribute*=value]
- 用法: $(”input[name*=‘man’]“) 返回值 集合元素
>[info] 说明: 匹配给定的属性是以包含某些值的元素
- \[attributeFilter1]\[attributeFilter2][attributeFilterN]
- 用法: $(”input\[id][name$=‘man’]“) 返回值 集合元素
>[info] 说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素
<br/>
**5.子元素过滤选择器**
```
$("div.one :nth-child(2)") //选择class为one的div的第二个子元素
$("div.one :first-child") //选择class为one的div的第一个子元素
$("div.one :last-child") //选择class为one的div的最后一个子元素
$("div.one :only-child") //选择class为one的div的唯一子元素
```
内容选择器
```
$("div:contains('di')") //选择内容包含‘di’的div
$("div:empty") //选择不包含文本的空div
$("div:has(div.mini)") //选择含有class叫div的div元素
```
<br/>
**6.查找选择器**
![img](https://box.kancloud.cn/2734260159d46a7563c1b4d8b118e032_497x285.png)
**nextAll(expression)**
```
//查找当前元素之后所有的同辈元素。
$("#one").nextAll("span:first") //查找id为one元素后面第一个span元素
```
**preAll(expression)**
```
//查找当前元素之前所有的同辈元素
$("#two").prevAll("div") //查找id为two元素前面所有div元素
```