1.3 jQuery选择器
jQuery就像DOM一样，或者说，就是简化了DOM的操作
有各种选择器：标签名选择器，id选择器，类选择器，属性选择器。。。
现在就简单地说一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function (){
$("#id1").click(function (){
alert("我是id选择器，我选择了id为“id1”的标签");
});
$(".class1").click(function (){
alert("我是类选择器，我选择了class为“class1”的标签");
});
$("[name]").click(function (){
alert("我是属性选择器，我选择了含有“name”属性的选择器");
});
$("button").click(function (){
alert("我是标签名选择器，你点击任何一个按钮，我都会出来");
});
});
</script>
</head>
<body>
<label>
<button id="id1">id选择器</button>
<button class="class1">类选择器</button>
<button>标签名选择器</button>
<button name="name1">属性选择器</button>
</label>
</body>
</html>
1.4 jQuery事件
常用的事件
Event 函数
绑定函数至
$(document).ready(function)
将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)
触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)
触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)
触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)
触发或将函数绑定到被选元素的鼠标悬停事件
这和原生的事件是差不多的，只不过是换了一个形式而已
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function (){
$("#p1").click(function (){
$("#p1").css("color", "red");
});
$("#p2").dblclick(function (){
$("#p2").css("color", "yellow");
});
$("#bu1").focus(function (){
$("#bu1").css("color", "red");
});
$("#p3").mouseover(function (){
$("#p3").css("color", "blue");
});
});
</script>
</head>
<body>
<p id="p1">单击我，你会看到我变红</p>
<p id="p2">双击我，你会看到我变黄</p>
<button id="bu1">单击我，你会看到我变红</button>
<p id="p3">鼠标挪过来，你会看到我变蓝</p>
</body>
</html>
结语
兴趣是最好的老师，坚持是不变的真理。
学习不要急躁，一步一个脚印，踏踏实实的往前走。
每天进步一点点，日积月累之下，你就会发现自己已经变得很厉害了。
我是布小禅，一枚自学萌新，跟着我每天进步一点点吧！
————————————————
版权声明：本文为CSDN博主「布小禅」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_52883898/article/details/119276583
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
