笔者很喜欢飞书云文档的笔记风格，读者可点击链接跳转
非飞书用户也可查看
飞书云文档：蓝桥杯web组知识点——jQuery篇
https://uestc.feishu.cn/docx/ZLzYdccujofyzyxyHNMc99kgnVc?from=from_copylink
预览图：
复制粘贴会有部分语法不支持，建议看飞书云文档
✨基本选择器
-
元素选择器
-
ID 选择器
-
类选择器
-
群组选择器
-
通配符选择器
元素选择器
css语法：
元素名 { }
jQuery语法：
$("元素名");
例：用jQuery修改css样式
<script> $(function () { $("div").css("color", "blue"); // 设置 div 标签中的字体颜色为蓝色 $("div").css("text-align", "center"); // 设置 div 标签中的字居中 $("div").css("width", "100px"); // 设置 div 元素的宽度为 100 个像素 $("div").css("height", "50px"); // 设置 div 元素的高度为 50 个像素 $("div").css("border", "1px solid yellow"); // 设置 div 元素的边框样式 }); </script>
主要的代码是写在 $(function(){}) 中，它的意思是当文档加载完后执行它内部的代码。
ID选择器
ID 选择器是用来选择指定 id 名的元素的。要使用 ID 选择器，首先我们需要给元素设置一个 id，使用格式如下：
<div id='id名'></div>
定义 id 之后，我们才可以用 jQuery 语法来指定含有该 id 选择器的元素，其语法格式为：
$("#id名");
例子：
<span id="test">ID选择器</span> <script> $(function () { $("#test").css("color", "blue"); }); </script>
类选择器
类选择器就是选择指定类名的元素。要使用类选择器，首先我们需要给元素设置一个 class，使用格式如下：
<div class="类名"></div>
定义 class 之后，我们才可以用 jQuery 语法来指定含有该类选择器的元素，其语法格式为：
$(".类名");
例子：
<script> $(function () { $(".test").css({ color: "blue", width: "200px", height: "80px", border: "2px solid yellow", }); }); </script> <div class="test"> <span>类选择器</span> </div>
类选择器除了上述这种用法，我们还可以使用「标签名.类名」的方式
$('div.test') 表示获取 class 值为 test 的 div 标签。
群组选择器
群组选择器可以让我们同时定义多个选择器，多个选择器之间用 ,号隔开，最终返回一个 jQuery 对象，该对象中包含了这些选择器选中的全部元素。
其语法格式为：
$("选择器1, 选择器2,...");
元素选择器、类选择器、ID 选择器都可以组合在一起。
例子：
<script> $(function () { $("h3,span").css("color", "blue"); }); </script> <h3>这是h3标签</h3> <span>这是span标签</span>
通配符选择器
通配符选择器就是可以设置全局样式的选择器，通俗来讲就是文档中的所有元素都要接受该规则。
在 jQuery 中，我们用 * 表示通配符选择器，使用格式如下所示：
$("*");
🎉层次选择器
后代选择器
后代选择器，听其名字我们应该可以猜到是用来选择某元素的后代元素，对的，它就是对指定元素内部中的后代元素进行操作。回忆一下，我们在 CSS 中的写法如下。
father son { ... }
在我们的 jQuery 中，后代选择器的使用格式如下：
$("father son")
子代选择器
子代选择器也是一种后代选择器，它与我们之前学的后代选择器有所不同，它只能对指定标签的子代元素进行操作。
$("father>son")
兄弟选择器
兄弟选择器是查找元素的兄弟节点（即同级节点）从而进行操作。
其语法格式为：
$("father~son");
例子：
<script> $(function () { $("#child~p").css("color", "blue"); }); </script> <div id="father"> <p>Hello</p> <p>lan qiao</p> <div id="child"></div> <p>我是p标签</p> // 变蓝色 <p>我是p标签</p> // 变蓝色 <p>我是p标签</p> // 变蓝色 </div>
只有位于 ID 选择器 child 之后的 p 元素中文字的颜色才会改变
#child~p 能够选择指定元素后面的所有兄弟元素。
相邻选择器
在前面我们讲的 $("#child~p") 可以选择指定元素后面的所有兄弟 p 元素，而相邻选择器只能选到指定元素的邻居兄弟元素。
其使用格式为：
$("M+N"); // 选择下一个兄弟节点 N
例子：
<script> $(function () { $("#child+p").css("color", "blue"); }); </script> </head> <body> <div id="father"> <p>Hello</p> <p>lan qiao</p> <div id="child"></div> <p>我是p标签</p> // 变蓝色 <p>我是p标签</p> // 不变色 <p>我是p标签</p> // 不变色 </div>
自定义事件
自定义事件就是用户可以自己定义一个事件。在 jQuery 中，我们使用 on 方法来定义事件，然后通过 trigger 方法来触发该事件。
其语法格式为：
jQuery对象.on(事件类型, 处理函数); // bind 也可以 jQuery对象.trigger(事件类型);
例子：
<script> $(function () { // 自定义一个名为 changecolor 的事件 $("div").on("changecolor", function () { $(this).css("background-color", "#ffce89"); }); $("div").click(function () { $("div").trigger("changecolor"); }); }); </script>
在上面代码中，我们定义了一个名为 changecolor 的事件，该事件可以实现给 div 元素设置背景颜色，当点击 div 元素时使用 trigger 方法触发了 changecolor 事件。
🐾事件对象
事件对象的介绍
当事件发生时，我们会把该事件的详细信息记录在事件对象中，然后通过事件对象的属性来了解事件的相关信息。
在 jQuery 中，我们使用 event 来获取一个事件的信息。
元素的插入
在 jQuery 中，元素插入的方法有两类，分别是：
-
子级插入方法，包括
prepend()、prependTo()、append()、appendTo()。 -
同级插入方法，包括
before()、insertBefore()、after()、insertAfter()。
prepend() 和 prependTo() 两者效果相同，但是格式颠倒：是在元素子级的开头插入元素
<script> $(function () { // prepend 方法的使用 $("#div1").one("click", function () { var $span = $("<span>欢迎来到</span>"); $("#div1").prepend($span); }); // prependTo 方法的使用 $("#div2").one("click", function () { var $span = $("<span>欢迎来到</span>"); $($span).prependTo("#div2"); }); }); </script>
append() 和 appendTo() 两者效果相同，但是格式颠倒：是在元素子级的尾部插入元素。
<script> $(function () { // append 方法的使用 $("#div1").one("click", function () { var $span = $("<span>jQuery</span>"); $("#div1").append($span); }); // appendTo 方法的使用 $("#div2").one("click", function () { var $span = $("<span>jQuery</span>"); $($span).appendTo("#div2"); }); }); </script>
before()、insertBefore()、after()、insertAfter() 同理，不再赘述
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
