当前位置 博文首页 > 向往的那片海洋：jQuery 选择器（一）
jQuery 选择器允许对 HTML 元素组成单个元素进行操作。
jQuery 选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器
jQuery 中的选择器用于定位页面元素，源于 CSS 选择器，但比 CSS 选择求更强大。
jQuery 中的选择器使用工厂函数作为容器，语法结构如下：
var element = $(selector);
$('#one').css("background","#bfa");
jQuery 的选择器共 10 种，其中有一种是第三版新增的，按照分类方法的不同类别不同。
jQuery 选择器的分类：
:frist过滤选择器:last过滤选择器:even过滤选择器:odd过滤选择器:eq()过滤选择器:gt()过滤选择器:lt()过滤选择器:not()过滤选择器:header过滤选择器animated过滤选择器:not(selector)过滤选择器:contains() 过滤选择器:empty 过滤选择器parent 过滤选择器has() 过滤选择器:hidden 过滤选择器:visible 过滤选择器[attr] 过滤选择器[attr=value] 过滤选择器[attr!=value] 过滤选择器[attr^=value] 过滤选择器[attr$=value] 过滤选择器[attr*=value] 过滤选择器:nth-child 过滤选择器:first-child() 过滤选择器last-child 过滤选择器only-child 过滤选择器:enabled 过滤选择器:disabled 过滤选择器:checked 过滤选择器selected 过滤选择器jQuery 的基本选择器以下几种：
| 选择器 | 描述 |
|---|---|
| ID 选择器 | 根据给定的 ID 匹配一个元素 |
| 元素选择器 | 根据给定的元素名称匹配元素 |
| 类选择器 | 根据给定的 css 类名匹配元素 |
| 通配符选择器 | 匹配所有元素 |
| 组合选择器 | 将每一个选择器匹配到的元素合并后一起返回 |
说明：由于 jQuery 对象是类数组对象，即使匹配的元素只有一个，返回的结果依旧是类数组对象。
用法示例：
<body>
<div id="d1">一块测试的 div</div>
<div id="d2" class="cls">另一块测试的 div</div>
</body>
<script>
// ID 选择器
console.log($('#d1'));
console.log("这是一个 ID 选择器")
// 元素选择器
console.log($('div'));
console.log("这是一个元素选择器")
// 类选择器
console.log($('.cls'));
console.log("这是一个类选择器")
// 通配符选择器（匹配所有）
console.log($('*'));
console.log("这是一个通配符选择器")
/*
组合选择器
* 并集：多个选择器之间使用逗号分隔
* 交集：多个选择器之间没有逗号分隔
*/
console.log($('#d1,.cls'));
console.log($('#d2.cls'));
console.log("这是一个组合选择器")
</script>
上述代码效果如下图所示：
[
](https://gitee.com/project_almanac/change/raw/master/jQuery/CPIq)
jQuery 的层级选择器以下几种：
| 选择器 | 描述 |
|---|---|
| 后代选择器 | 根据给定的祖先元素下匹配所有的后代元素 |
| 子选择器 | 根据给定的父元素下匹配所有的子元素 |
| 相邻兄弟选择器 | 根据给定的目标元素匹配下一个相邻兄弟元素 |
| 普通兄弟选择器 | 根据给定的目标元素匹配后面兄弟元素 |
用法示例：
<body>
<div id="parent">
<div id="child1">
<div id="d6"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
</div>
<div id="child2">
<div id="d3"></div>
</div>
</div>
</body>
<script>
// 后代选择器
console.log($('#parent div'));
console.log("这是一个后代选择器");
// 子选择器
console.log($('#parent>div'));
console.log("这是一个子选择器");
// 相邻兄弟选择器（给定目标元素的下一个相邻兄弟元素）
console.log($('#d1+div'));
console.log("这是一个相邻兄弟选择器");
// 普通兄弟选择器（给定元素后面的兄弟）
console.log($('d1~div'));
console.log('这是一个普通兄弟选择器');
// siblings() 方法 - 获取指定元素的兄弟元素（前面+后面）
console.log($('#d1').siblings('div'));
</script>
上述代码效果如下图所示：
[
](https://gitee.com/project_almanac/change/raw/master/jQuery/h72OCRTpTZqB.png)
层次选择器中的普通兄弟选择器有个 siblings() 方法能实现类似的功能。
// siblings() 方法 - 获取指定元素的兄弟元素
console.log($('#d1').siblings('div'));
普通兄弟选择器与 siblings() 方法的区别在于，普通兄弟选择器只能获取给定元素后面的兄弟元素，而 siblings() 方法可以获取所有兄弟元素。
jQuery 的基本过滤选择器有以下几种：
| 选择器 | 描述 |
|---|---|
:frist过滤选择器 | 获取第一个元素 |
:last过滤选择器 | 获取最后一个元素 |
:even过滤选择器 | 匹配所有索引值为偶数的元素，从 0 开始计数 |
:odd过滤选择器 | 匹配所有索引值为奇数的元素，从 0 开始计数 |
:eq()过滤选择器 | 匹配一个给定索引值的元素（等于） |
:gt()过滤选择器 | 匹配所有大于给定索引值的元素 |
:lt()过滤选择器 | 匹配所有小于给定索引值的元素 |
:not()过滤选择器 | 去除所有与给定选择器匹配的元素 |
:header过滤选择器 | 匹配如 h1，h2，h3 之类的标题元素 |
animated过滤选择器 | 匹配所有正在执行动画效果的元素 |
用法示例：
<body>
<div>启嘉网</div>
<div id="d2">
<div id="child"></div>
</div>
<div></div>
<div></div>
<div></div>
<div>前端开发</div>
<div id="animated"></div>
</body>
:frist 过滤选择器和 :last 过滤选择器：
获取第一个元素、获取最后一个元素
在指定范围内匹配元素中进行筛选，它们本身没有层次结构，取决于范围。
console.log($('div:first'));
console.log($('div:last'));
:even过滤选择器和:odd过滤选择器：
匹配所有值为偶数或奇数的元素，从 0 开始
索引值为偶数时 -> 奇数元素；索引值为奇数时 -> 偶数元素
console.log($('div:even'));
console.log($('div:odd'));
:eq() 过滤选择器、:gt() 过滤选择器和 :lt()过滤选择器：
匹配给定索引值等于大于或小于的元素
:eq(index)：index 表示索引值
console.log($('div:eq(0)')); // 等于
console.log($('div:gt(2)')); // 大于
console.log($('div:lt(2)')); // 小于
:header过滤选择器：匹配 h1~h6 元素
console.log($(':header'));
:animated过滤选择器：匹配所有正在执行动画效果的元素（只能匹配 jQuery 实现的动画）
console.log($(':animated'));
function animated(){
$('#animated').slideToggle(animated);
}
animated();
:not()过滤选择器：去除所有与给定选择器匹配的元素
console.log($('div:not("#child")'));
