JavaScript的常用库 —— jQuery
jQuery用来更加方便地去控制前端的HTML标签和CSS属性。
使用方式：
1. 直接在元素中添加：
2. 按jQuery官网提示下载。
https://jquery.com/download/
选择器：
$(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">
// jQuery
</head>
<body>
</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() {
<body>
</body>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() { // 绑定事件
<body>
</body>console.log("这是click div");
<body>
</body>//$div.off("click");// 删除（解绑）事件
})
}
export {
main
}test.html中的内容为：
<body>
</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');<body>
</body>$div.on("click.name1", function() { // 绑定事件<body>
</body>console.log("这是click div 1");<body>
</body>$div.off("click.name2");// 解绑click.name2事件 }) $div.on("click.name2", function() { // 绑定事件<body>
</body>console.log("这是click div 2"); })}export { main}test.html中的内容为：
<body>
</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');<body>
</body>$div.on("click", function(e) { // 给绑定点击事件<body>
</body>console.log("这是click div 1"); }); $('a').on("click", function(e) {// 给绑定点击事件<body>
</body>console.log("click a");<body>
</body>e.stopPropagation();// 阻止向上传递，a事件触发div事件不触发<body>
</body>e.preventDefault();// 阻止当前点击事件的操作，a事件不触发div事件触发<body>
</body>//return false;// 等同于e.stopPropagation(); e.preventDefault();a事件不触发div事件也不触发 })}export { main}test.html中的内容为：
<body>
</body><body>
</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() {<body>
</body>$div.hide(3000);// 花费3000毫秒(= 3秒)隐藏<body>
</body>//$div.fadeOut(3000);// 淡出 }); $btn_show.click(function() {<body>
</body>$div.show(1000);// 花费1秒展现<body>
</body>//$div.fadeIn(1000);// 淡入 });}export { main}test.html中的内容为：
<body>
</body> 隐藏 展现test.css中的内容为：
div {
width: 300px;
height: 300px;
background-color: pink;
}
元素的添加、删除：
[*]$('Hello World')：构造一个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 = $(<body>
</body>`<body>
</body> 百度<body>
</body> !!!<body>
</body>`); $div.click(function() {// 单击<body>
</body>$div.append($a);// 将$a添加到$div }); $div.dblclick(function() {// 双击<body>
</body>$a.remove();// 删除元素$a<body>
</body>// $dic.empty()：清空元素$div里的所有儿子 });}export { main}test.html中的内容为：
<body>
</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() {// 单击<body>
</body>$div.addClass('my-div');// 添加my-div类 }); $div.dblclick(function() {// 双击<body>
</body>$div.removeClass('my-div');// 删除my-div类 });}export { main}test.html中的内容为：
<body>
</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() {// 单击<body>
</body>console.log($div.css('background-color'));// 获取div的CSS属性<body>
</body>$div.css('background-color', 'orange');// 将div的background-color属性变为orange<body>
</body>$div.css({ // 同时改变div多个CSS的属性<body>
</body> width: "200px",<body>
</body> height: "200px",<body>
</body> "background-color": "orange",<body>
</body>}); });}export { main}test.html中的内容为：
<body>
</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() {// 单击<body>
</body>console.log($div.attr('wzy'));// 返回18<body>
</body>$div.attr('id', 'ID');// 把div的id属性改成ID的属性 });}export { main}test.html中的内容为：
<body>
</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() {// 单击<body>
</body>console.log($div.text());// 获取div的文本内容，返回 哈哈哈<body>
</body>//$div.text("hello");// 修改div的文本内容为hello<body>
</body>console.log($div.html());// 获取标签内容，返回哈哈哈 });}export { main}test.html中的内容为：
<body>
</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>
</body><body>
</body><body>
</body><body>
</body><body>
</body>
ajax
用来跟后端通信。Ajax就是在不刷新页面的情况下，对页面的某部分进行更新，只从服务器端获取某些数据，一般是获取json数据。
所以Ajax最大的优点就是，发送请求的时候不会影响用户的操作，相当于两条平行线一样，“你忙你的，我忙我的”，不需要去等待页面的跳转而浪费时间。
[*]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) {
},
});
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]