沙盒求生
31.49MB · 2025-12-03
jQuery
用来更加方便地去控制前端的HTML标签和CSS属性。
使用方式：
<head>元素中添加：<script src="https://cdn.a**c*wing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
选择器：
$(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.a**c*wing.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的属性$('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的文本内容为hello console.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
从服务器获取内容。
$.ajax({ url: url, // 后端的链接 type: "GET", data: { // 往后端传的参数 }, dataType: "json", success: function (resp) { // 当后端成功返回内容后，从resp里解析出来内容 },});把内容提交给服务器。
$.ajax({ url: url, type: "POST", data: { }, dataType: "json", success: function (resp) { },});
