jQuery最核心的组成部分就是：选择器引擎。它继承了CSS的语法，可以对DOM元素的标签名、属性名、状态(?)等进行快速准确的选择，并且不必担心浏览器的兼容性。jQuery选择器实现了CSS1~CSS3的大部分规则之外，还实现了一些自定义的选择器，用于各种特殊状态的选择。
简单选择器
在使用jQuery选择器时，我们首先必须使用“$()”函数来包装我们的CSS规则。而CSS规则作为参数传递到jQuery对象内部后，再返回包含页面中对应元素的jQuery对象。随后，我们就可以对这个获取到的DOM节点进行行为操作了。
常规选择器.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常规选择器</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="box">
常规选择器
</div>
</body>
</html>
使用ID选择器的CSS规则：
#box {
color: red; //添加样式-将ID为box的元素字体颜色变红
}
在jQuery选择器(ID选择器)里，我们使用如下的方式获取同样的结果：
$("#box").css("color", "blue");//添加一个行为，这个行为是添加样式
那么除了ID选择器之外，还有两种基本的选择器，分别为：元素标签名和类(class)：
| 选择器 | CSS模式 | jQuery模式 | 描述 |
| 元素名 | div {} | $("div") | 获取所有div元素的DOM对象 |
| ID | #box {} | $("#box") | 获取一个ID为box元素的DOM对象 |
| 类(class) | .box {} | $(".box") | 获取所有class为box的所有DOM对象 |
举例说明：
常规选择器.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常规选择器</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="ye_demo.js"></script>
<link rel="stylesheet" type="text/css" href="ye_style.css">
</head>
<body>
<div class="pox">常规选择器</div>
<div class="pox">常规选择器</div>
<div class="pox">常规选择器</div>
</body>
</html>
CSS规则：
div {
color: orange;
}
在jQuery选择器(元素名选择器)里，我们使用如下的方式获取同样的结果：
$("div").css("color", "maroon");
又如CSS规则：
.pox {
color: red;
}
在jQuery选择器(类选择器)里，我们使用如下的方式获取同样的结果：
$(".pox").css("color", "green");
时间： 2024-10-22 16:25:48