简介
今天我学习jQuery基本选择器的四种选择器分别是 id选择器、类选择器、标签选择器和并集选择器。
准备工作
双击打开桌面上的vscode（好像前端都用这个开发）
右键左侧空白的地方，在下拉菜单中选择新建文件选项
今天的文件名就叫 jQuery的基本选择器 .html 。
还是打一个叹号然后敲回车就自动把html页面的框子写出来了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>改一下title标签里的名字就叫做 jQuery的基本选择器。
在head标签中写一对script标签将jQuery包引入进来。
<script src="js/jquery-3.7.1.js"></script>在body标签中创建三个按钮和三个div，按钮都有id属性，div1与div3有id属性，div2是class属性。
<button id="b1">按钮1</button>
<div id="div1">这是div1</div>
<button id="b2">按钮2</button>
<div class="div2">这是div2</div>
<button id="b3">按钮3</button>
<div id="div3">这是div3</div>在body标签结束下面创建一对script标签，在script标签中写一个dom加载完成后的回调函数$(function(){});
<script>
$(function () {
});
</script>这样我们的准备工作就做完了。
jQuery的id选择器
首先通过button标签的id得到按钮
这里说一下为什么var后面的变量是$xx 因为这么写可以一眼就能看出来哪个是jQuery的变量。
$()是jQuery的函数，#b1是拿到id是b1的标签。
jQuery有click()方法是点击的方法。
在点击方法中可以先找到id为div1的div标签。
再通过jQuery的.css()方法(.css(name,value))修改id为div1的背景颜色，颜色为红色。
我们可以打开页面看一下
点击按钮1之后看看会发生什么？
点击按钮1之后id为div1的背景颜色变成了红色。
jQuery的class选择器
前面的步骤与id选择器一样但是我们这次需要获得的不是按钮1而是按钮2。
之后写上b2按钮的点击方法
因为这次获取的div没有id，只有class所以我们需要通过class来获取到div2标签。
这里说一下通过id获取是#xx , 通过class获取是.xx
一样是调用jQuery的css方法，这次我把背景颜色改成蓝色的。
去浏览器打开页面看一下
点击按钮2来试一下
可以看到div2的背景颜色变成了蓝色。
<script>
$(function () {
// id选择器
// 获取id是b1的标签
var $b1 = $("#b1");
$b1.click(function () {
$("#div1").css("background", "red");
});
// class选择器
// 获取id是b2的标签
var $b2 = $("#b2");
$b2.click(function () {
$(".div2").css("background", "blue");
});
});
</script>jQuery的标签选择器
首先通过jQuery获取到id为b3的按钮
b3按钮的点击方法也写上
因为这次是标签选择器所以在$()中直接写标签的名就可以了。
然后调用jQuery的.css()方法，我这次把点击按钮之后的背景颜色换成黄色以便区分。
然后打开浏览器查看一下
这是三个按钮
点击按钮3看一下
结果是3个div标签的背景颜色全部编程黄色的了。
<script>
$(function () {
// id选择器
// 获取id是b1的标签
var $b1 = $("#b1");
$b1.click(function () {
$("#div1").css("background", "red");
});
// class选择器
// 获取id是b2的标签
var $b2 = $("#b2");
$b2.click(function () {
$(".div2").css("background", "blue");
});
// 标签选择器
// 获取id是b3的标签
var $b3 = $("#b3");
$b3.click(function () {
$("div").css("background", "yellow");
});
});
</script>jQuery的并集选择器
就是当我点击按钮的时候以上的三种方法可以一起执行也可以两两执行。
首先我将$b3点击方法中的语句注释掉。
就是jQuery的$()函数中可以放多个，可以放入id并且放入class也可以放入标签，在一个括号一个引号中使用逗号分隔。
这次我把背景颜色换成了绿色。
点击按钮3理论上是div1与div2的背景颜色会变成绿色。
可以再试一下标签选择器与id选择器
首先将刚刚的按钮3点击方法中的代码注释掉
这里就不写div标签了，可以写button标签与#div1看看可以一起改背景颜色不
进入浏览器
点击按钮3理论可以3个按钮的背景颜色都变成绿色，div1标签变成绿色。
确实都变成绿色了。
再试一下标签与类选择器可不可以一起使用
依然将$b3的点击方法中的代码注释掉
写上.div2和button。
看一下浏览器三个按钮没有问题
点击一下理论分析的话是当点击按钮3时三个按钮加上div2标签背景颜色会变成绿色。
看来没有问题
<script>
$(function () {
// id选择器
// 获取id是b1的标签
var $b1 = $("#b1");
$b1.click(function () {
$("#div1").css("background", "red");
});
// class选择器
// 获取id是b2的标签
var $b2 = $("#b2");
$b2.click(function () {
$(".div2").css("background", "blue");
});
// 标签选择器
// 获取id是b3的标签
var $b3 = $("#b3");
$b3.click(function () {
// $("div").css("background", "yellow");
// $("#div1,.div2").css("background", "green");
// $("#div1,button").css("background", "green");
$(".div2,button").css("background", "green");
});
});
</script>小结
今天我学会了jQuery的基本选择器，分别是id选择器、class选择器、标签选择器和并集选择器，通过这些选择器可以动态的修改html的样式。
