利用JS去操控HTML和CSS，常用库之jQuery ฅʕ•̫͡•ʔฅjQuery
用来更加方便地去控制前端的HTML标签和CSS属性。
使用方式：
1. 直接在<head>元素中添加：
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
2. 按jQuery官网提示下载。
选择器：
$(selector)，selector类似于CSS选择器。
$('div');
$('.big-div');
$('div > p')
例如：
test.js中的内容为：
let main = function() {let $div = $('.mydiv');console.log($div);
}export {main
}
test.html中的内容为：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><link rel="stylesheet" href="/test/test.css"><script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script> // jQuery
</head><body><script type="module">import {main} from "/test/test.js";main();</script><div class="mydiv"></div></body>
</html>
test.css中的内容为：
div {width: 300px;height: 300px;background-color: pink;
}
事件：
$(selector).on(event, func)绑定事件。
$('div').on('click', function (e) {console.log("click div");
})
简写：
$div.click(function() {console.log("click div");})
$(selector).off(event, func)删除事件。
$('div').on('click', function (e) {console.log("click div");$('div').off('click');
});
例如:
test.js中的内容为：
let main = function() {let $div = $('div');$div.on("click", function() { // 绑定事件console.log("这是click div");//$div.off("click"); // 删除（解绑）事件})
}export {main
}
test.html中的内容为：
<body><script type="module">import {main} from "/test/test.js";main();</script><div></div></body>
test.css中的内容为：
div {width: 300px;height: 300px;background-color: pink;
}
当存在多个相同类型的事件触发函数时，可以通过click.name来区分。
$('div').on('click.first', function (e) {console.log("click div");$('div').off('click.first');
});
例如:
test.js中的内容为：
let main = function() {let $div = $('div');$div.on("click.name1", function() { // 绑定事件console.log("这是click div 1");$div.off("click.name2"); // 解绑click.name2事件})$div.on("click.name2", function() { // 绑定事件console.log("这是click div 2");})
}export {main
}
test.html中的内容为：
<body><script type="module">import {main} from "/test/test.js";main();</script><div></div></body>
test.css中的内容为：
div {width: 300px;height: 300px;background-color: pink;
}
在事件触发的函数中的return false等价于同时执行以下两个操作：
-
e.stopPropagation()：阻止事件向上传递 -
e.preventDefault()：阻止事件的默认行为
例如:
test.js中的内容为：
let main = function() {let $div = $('div');$div.on("click", function(e) { // 给<div>绑定点击事件console.log("这是click div 1");});$('a').on("click", function(e) { // 给<a>绑定点击事件console.log("click a");e.stopPropagation(); // 阻止向上传递，a事件触发div事件不触发e.preventDefault(); // 阻止当前点击事件的操作，a事件不触发div事件触发//return false; // 等同于e.stopPropagation(); e.preventDefault(); a事件不触发div事件也不触发})
}export {main
}
test.html中的内容为：
<body><script type="module">import {main} from "/test/test.js";main();</script><div><a href="https://www.baidu.com" target="_blank">百度</a></div></body>
test.css中的内容为：
div {width: 300px;height: 300px;background-color: pink;
}
元素的隐藏、展现：
-
$A.hide()：隐藏，可以添加参数，表示消失时间 -
$A.show()：展现，可以添加参数，表示出现时间 -
$A.fadeOut()：慢慢消失，可以添加参数，表示消失时间 -
$A.fadeIn()：慢慢出现，可以添加参数，表示出现时间
例如:
test.js中的内容为：
let main = function() {let $div = $('div');let $btn_hide = $('#hide-btn');let $btn_show = $('#show-btn');$btn_hide.click(function() {$div.hide(3000); // 花费3000毫秒(= 3秒)隐藏//$div.fadeOut(3000); // 淡出});$btn_show.click(function() {$div.show(1000); // 花费1秒展现//$div.fadeIn(1000); // 淡入});
}export {main
}
test.html中的内容为：
<body><script type="module">import {main} from "/test/test.js";main();</script><div></div><button id="hide-btn">隐藏</button><button id="show-btn">展现</button></body>
test.css中的内容为：
div {width: 300px;height: 300px;background-color: pink;
}
元素的添加、删除：
-
$('<div class="mydiv"><span>Hello World</span></div>')：构造一个jQuery对象 -
$A.append($B)：将$B添加到$A的末尾 -
$A.prepend($B)：将$B添加到$A的开头 -
$A.remove()：删除元素$A -
$A.empty()：清空元素$A的所有儿子
例如:
test.js中的内容为：
let main = function() {let $div = $('div');let $a = $(`<a id="" style="" href="https://www.baidu.com">百度<span>!!!</span></a>`);$div.click(function() { // 单击$div.append($a); // 将$a添加到$div});$div.dblclick(function() { // 双击$a.remove(); // 删除元素$a// $dic.empty()：清空元素$div里的所有儿子});
}export {main
}
test.html中的内容为：
<body><script type="module">import {main} from "/test/test.js";main();</script><div></div></body>
test.css中的内容为：
div {width: 300px;height: 300px;background-color: pink;
}
对类的操作：
-
$A.addClass(class_name)：添加某个类 -
$A.removeClass(class_name)：删除某个类 -
$A.hasClass(class_name)：判断某个类是否存在
例如:
test.js中的内容为：
let main = function() {let $div = $('div');$div.click(function() { // 单击$div.addClass('my-div'); // 添加my-div类});$div.dblclick(function() { // 双击$div.removeClass('my-div'); // 删除my-div类});
}export {main
}
test.html中的内容为：
<body><script type="module">import {main} from "/test/test.js";main();</script><div></div></body>
test.css中的内容为：
div {width: 300px;height: 300px;background-color: pink;
}.my-div {background-color: orange;
}
对CSS的操作：
-
$("div").css("background-color")：获取某个CSS的属性 -
$("div").css("background-color","yellow")：设置某个CSS的属性 -
同时设置多个CSS的属性：
$('div').css({width: "200px",height: "200px","background-color": "orange",
});
例如:
test.js中的内容为：
let main = function() {let $div = $('div');$div.click(function() { // 单击console.log($div.css('background-color')); // 获取div的CSS属性$div.css('background-color', 'orange'); // 将div的background-color属性变为orange$div.css({ // 同时改变div多个CSS的属性width: "200px",height: "200px","background-color": "orange",});});
}export {main
}
test.html中的内容为：
<body><script type="module">import {main} from "/test/test.js";main();</script><div></div></body>
test.css中的内容为：
div {width: 300px;height: 300px;background-color: pink;
}
对标签属性的操作：
-
$('div').attr('id')：获取属性 -
$('div').attr('id', 'ID')：设置属性
例如:
test.js中的内容为：
let main = function() {let $div = $('div');$div.click(function() { // 单击console.log($div.attr('wzy')); // 返回18$div.attr('id', 'ID'); // 把div的id属性改成ID的属性});
}export {main
}
test.html中的内容为：
<body><script type="module">import {main} from "/test/test.js";main();</script><div wzy="18"></div></body>
test.css中的内容为：
div {width: 300px;height: 300px;background-color: pink;
}#ID {background-color: orange;
}
对HTML内容、文本的操作：
不需要背每个标签该用哪种，用到的时候Google或者百度即可。
-
$A.html()：获取、修改HTML内容（标签内容） -
$A.text()：获取、修改文本信息 -
$A.val()：获取、修改文本的值
例如:
test.js中的内容为：
let main = function() {let $div = $('div');$div.click(function() { // 单击console.log($div.text()); // 获取div的文本内容，返回 哈哈哈//$div.text("hello"); // 修改div的文本内容为helloconsole.log($div.html()); // 获取标签内容，返回<span>哈哈哈</span>});
}export {main
}
test.html中的内容为：
<body><script type="module">import {main} from "/test/test.js";main();</script><div wzy="18"><span>哈哈哈</span></div></body>
test.css中的内容为：
div {width: 300px;height: 300px;background-color: pink;
}
查找：
-
$(selector).parent(filter)：查找父元素 -
$(selector).parents(filter)：查找所有祖先元素 -
$(selector).children(filter)：在所有子元素中查找 -
$(selector).find(filter)：在所有后代元素中查找
例如:
test.js中的内容为：
let main = function() {let $div3 = $('.div-3');console.log($div3.parents('.div-1'));
}export {main
}
test.html中的内容为：
<body><script type="module">import {main} from "/test/test.js";main();</script><div class="div-1"><div class="div-2"><div class="div-3"></div></div></div>
</body>
ajax
用来跟后端通信。在不刷新页面的情况下，只从服务器端获取某些数据，一般是获取json数据。
-
GET方法：
从服务器获取内容。
$.ajax({url: url, // 后端的链接type: "GET", data: { // 往后端传的参数},dataType: "json",success: function (resp) { // 当后端成功返回内容后，从resp里解析出来内容},
});
-
POST方法：
把内容提交给服务器。
$.ajax({url: url,type: "POST", data: {},dataType: "json",success: function (resp) {},
});
![[docker] 部署 Seata 分布式事务](https://img2024.cnblogs.com/blog/666150/202501/666150-20250121185340794-437647663.png)