ThinkSSL🔒 一键申购 5分钟快速签发 30天无理由退款 购买更放心 广告
> 选择器用来获取文档上的 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元素 ```