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