JQuery学习
文章目录
- JQuery学习
- 1.简介
- 2.入门
- 2.1 下载
- 2.2 使用
- 2.3 核心对象
- 3.选择器
- 3.1 基础选择器
- 3.2 层次选择器
- 3.2.1 后代选择器
- 3.2.2 子代选择器
- 3.2.3 兄弟选择器
- 3.2.4 相邻选择器
- 4.JQuery DOM操作
- 4.1 创建元素
- 4.2 插入元素
- 4.3 删除元素
- 4.4 遍历元素
- 4.3 属性操作
- 4.3.1 获取属性
- 4.3.2 设置属性
- 4.3.3 删除属性
- 4.4 样式操作
- 4.4.1 获取样式
- 4.4.2 设置属性
- 4.3.3 添加class
- 4.3.4 删除class
- 4.5 内容操作
- 4.5.1 html()
- 4.5.2 text()
- 4.5.3 val()
- 5.JQuery事件
- 5.1 加载事件
- 5.2 鼠标事件
- 5.3 键盘事件
- 5.4 this
- 6.AJAX操作
- 6.1 $.get()方法
- 6.2 $.post()方法
- 6.3 $.ajax()
- 6.4 同源策略
代码仓库:https://github.com/LenkyAndrews/JQuery-Learning
1.简介
JQuery是一个快速、简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
2.入门
2.1 下载
下载地址:https://jquery.com/
下载的版本:jquery-3.6.0.js
- 开发版:jquery-3.6.0.js(适合新手,学习源码,文件较大)
- 压缩版:jquery-3.6.0.min.js(适合项目部署,文件较小,可减少文件传输时间)
2.2 使用
在页面引入即可
<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
2.3 核心对象
$
符号在JQuery中代表对JQuery对象的引用,是核心对象。如果未引入jquery.js文件,那么在使用$
时会报错$ is not defined
$ == JQuery
3.选择器
选择器,就是用一种方式选中某一个元素,选中目标元素后,可以对这个元素进行各种操作。jQuery选择器跟CSS选择器几乎完全一样,可以一起对比来学习。
3.1 基础选择器
选择器 | 语法 | 说明 |
id选择器 | $("#id名") | 选中某个id的元素(如果有多个同名id,则以第一个为准) |
类选择器 | $(".类名") | 选中某一类的元素 |
元素选择器 | $(“标签名”) | 选中某一标签的元素 |
组合选择器 | $(“选择器1, 选择器2, … , 选择器n”) | 同时对几个选择器进行相同的操作 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#idname").css("color","blue");
$(".classname").css("color","green");
$("div").css("color","red");
})
</script>
</head>
<body>
<p id="idname">id选择器</p>
<p class="classname">类选择器</p>
<div>标签选择器</div>
</body>
</html>
效果如下:
$(function () {
……
})
上面代码功作用是在文档加载完成后执行内部的代码,在JQuery加载事件部分会有相关讲解。
3.2 层次选择器
选择器 | 语法 | 说明 |
后代选择器 | $(“M N”) | 选择M元素内部后代N元素(所有N元素) |
子代选择器 | $(“M>N”) | 选择M元素内部子代N元素(所有第1代N元素) |
兄弟选择器 | $(“M~N”) | 选择M元素后面所有的同级N元素 |
相邻选择器 | $(“M+N”) | 选择M元素相邻的下一个元素(M、N是同级元素) |
3.2.1 后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#first p").css("color","red");
})
</script>
</head>
<body>
<div id="first">
<p>first的子元素</p>
<div id="second">
<p>first子元素的子元素</p>
<p>first子元素的子元素</p>
</div>
<p>first的子元素</p>
</div>
</body>
</html>
$("#first p")
表示选取id="first"
的元素内部的所有p元素,因此不管是子代元素,还是其他后代元素,全部都会被选中。
3.2.2 子代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子代选择器</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#first>p").css("color","red");
})
</script>
</head>
<body>
<div id="first">
<p>first的子元素</p>
<div id="second">
<p>first子元素的子元素</p>
<p>first子元素的子元素</p>
</div>
<p>first的子元素</p>
</div>
</body>
</html>
$("#first>p")
表示选中id="first"
的元素下的子代元素p。与后代选择器对比,可以知道:子代选择器只选取子代元素,不包括其他后代元素。
3.2.3 兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兄弟选择器</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#second~p").css("color","red");
})
</script>
</head>
<body>
<div id="first">
<p>first的子元素</p>
<div id="second">
<p>first子元素的子元素</p>
<p>first子元素的子元素</p>
</div>
<p>first的子元素</p>
<p>first的子元素</p>
</div>
</body>
</html>
$("#second~p")
表示选取id="second"
的元素后面的所有兄弟元素p。记住,兄弟选择器只选取后面的所有兄弟元素,不包括前面的所有兄弟元素。
3.2.4 相邻选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相邻选择器</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#second+p").css("color","red");
})
</script>
</head>
<body>
<div id="first">
<p>first的子元素</p>
<div id="second">
<p>first子元素的子元素</p>
<p>first子元素的子元素</p>
</div>
<p>first的子元素</p>
<p>first的子元素</p>
</div>
</body>
</html>
$("#second+p")
表示选取id="second"的元素后面的相邻的第一个兄弟元素p。与兄弟选择器对比,可以知道:相邻选择器只选取后面相邻的第一个兄弟元素,不包括其他兄弟元素。
4.JQuery DOM操作
DOM,全称“Document Object Model(文档对象模型)”,它是由W3C定义的一个标准。
4.1 创建元素
使用字符串的形式来创建一个元素节点,然后再通过append()、before()等方法把这个字符串插入到现有的元素节点中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-创建元素</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
// 以字符串形式创建新元素
var str = "<p>新创建元素</p>";
// 在网页body部分添加新创建的元素
$("body").append(str);
})
</script>
</head>
<body>
</body>
</html>
4.2 插入元素
方法 | 语法 | 说明 |
prepend() | $(A).prepend(B) | 在元素A的内部开始处插入B元素(A、B为父子元素) |
append() | $(A).append(B) | 在元素A的内部末尾处插入B元素(A、B为父子元素) |
before() | $(A).before(B) | 在元素A的外部前面插入B元素(A、B为同级元素) |
after() | $(A).after(B) | 在元素A的外部后面插入B元素(A、B为同级元素) |
代码如下,可自行体验不同方法之间的区别:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-创建元素</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#btn1").click(function () {
var li = "<li>用prepend()方法在无序列表<b>内部</b>添加的元素</li>";
$("ul").prepend(li);
})
$("#btn2").click(function () {
var li = "<li>用append()方法在无序列表<b>内部</b>添加的元素</li>";
$("ul").append(li);
})
$("#btn3").click(function () {
var li = "<p>用before()方法在无序列表<b>外部</b>添加的元素</p>";
$("ul").before(li);
})
$("#btn4").click(function () {
var li = "<p>用after()方法在无序列表<b>外部</b>添加的元素</p>";
$("ul").after(li);
})
})
</script>
</head>
<body>
<ul>
<li>无序列表中的元素A</li>
<li>无序列表中的元素B</li>
</ul>
<input id="btn1" type="button" value="prepend()方法" />
<input id="btn2" type="button" value="append()方法" />
<input id="btn3" type="button" value="before()方法" />
<input id="btn4" type="button" value="after()方法" />
</body>
</html>
效果如下:
4.3 删除元素
方法 | 语法 | 说明 |
remove() | $(A).remove() | 删除元素A内部及所有后代元素,不保留标签 |
empty() | $(A).empty() | 清空元素A的内容及所有后代元素,保留标签 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-删除元素</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#btn1").click(function () {
$(".remove li:first-child").remove();
})
$("#btn2").click(function () {
$(".empty li:first-child").empty();
})
})
</script>
</head>
<body>
<ul class="remove">
<li>测试remove()方法-<span>1</span></li>
<li>测试remove()方法-<span>2</span></li>
<li>测试remove()方法-<span>3</span></li>
</ul>
<input id="btn1" type="button" value="remove()方法" />
<ul class="empty">
<li>测试empty()方法-<span>1</span></li>
<li>测试empty()方法-<span>2</span></li>
<li>测试empty()方法-<span>3</span></li>
</ul>
<input id="btn2" type="button" value="empty()方法" />
</body>
</html>
remove()方法
按钮用于删除列表中的第一项;empty()方法
按钮用于清空列表中的第一项。
效果如下:
4.4 遍历元素
对同一类型的所有元素进行相同的操作,在JQuery中可以使用each()方法实现元素的遍历操作。
语法如下:
$(A).each(function(index, element){
……
})
each()方法接收一个匿名函数作为参数,该函数有两个参数:index,element。index是一个可选参数,它表示元素的索引号(即下标),索引是从0开始的;element是一个可选参数,它表示当前元素,可以使用this代替。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06-遍历元素</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#btn").click(function () {
$("li").each(function (index, element) {
var txt = "第" + (index + 1) + "个元素";
$(element).text(txt);
});
});
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<input id="btn" type="button" value="添加内容" />
</body>
</html>
text()方法是在当前元素内添加文本。
$("li").each(function (index, element) {
var txt = "第" + (index + 1) + "个li元素";
$(element).text(txt);
});
上面代码可以等价于:
$("li").each(function (index) {
var txt = "第" + (index + 1) + "个li元素";
$(this).text(txt);
});
如果要省略第二个参数,可以在内部使用(this)表示当前的元素。
效果如下:
4.3 属性操作
4.3.1 获取属性
方法 | 语法 | 说明 |
attr(“属性名”) | $(A).attr(“属性名”) | 获取指定的属性值,如果没有该属性则返回undefined |
prop(“属性名”) | $(A).prop(“属性名”) | 一般用于获取具有true和false两个属性的属性值 |
具有true和false这两种取值的属性,如checked、selected或disabled等建议使用prop()来操作;而其他的属性都建议使用attr()来操作。
4.3.2 设置属性
方法 | 语法 | 说明 |
attr(“属性”, “取值”) | $(A).attr(“属性”, “取值”) | 设置一个属性 |
attr({“属性1”: “取值1”, “属性2”:“取值2”, …, “属性n”:“取值n”}) | $().attr({“属性1”: “取值1”, “属性2”:“取值2”, …, “属性n”:“取值n”}) | 设置多个属性 |
4.3.3 删除属性
方法 | 语法 | 说明 |
removeAttr(“属性名”) | $(A).removeAttr(“属性名”) | 删除元素A的某个属性 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07-属性操作</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#get_src").click(function () {
alert($("#pic").attr("src"));
});
$("#set_src").click(function () {
$("#pic").attr("src", "./images/cat02.png");
});
$("#delete_src").click(function () {
$("#pic").removeAttr("src");
});
})
</script>
</head>
<body>
<input id="get_src" type="button" value="获取图片src属性值"/>
<input id="set_src" type="button" value="修改图片src属性值"/>
<input id="delete_src" type="button" value="删除图片src属性值"/>
<br/><img id="pic" src="./images/cat01.png" alt="这是一只猫的图片" height=243 width=336 />
</body>
</html>
效果如下:
4.4 样式操作
4.4.1 获取样式
方法 | 语法 | 说明 |
css(“属性名”) | $(A).css(“属性名”) | 获取元素A一个CSS属性的取值 |
4.4.2 设置属性
方法 | 语法 | 说明 |
css(“属性”, “取值”) | $(A).css(“属性”, “取值”) | 设置元素A的一个属性 |
css({“属性1”:“取值1”, “属性2”:“取值2”, …, “属性n”:“取值n”}) | $(A).css({“属性1”:“取值1”, “属性2”:“取值2”, …, “属性n”:“取值n”}) | 设置元素A的多个属性 |
4.3.3 添加class
方法 | 语法 | 说明 |
addClass(“类名”) | $(A).addClass(“类名”) | 为元素A添加一个样式类 |
4.3.4 删除class
方法 | 语法 | 说明 |
removeClass(“类名”) | $(A).removeClass(“类名”) | 删除元素A中的一个样式类 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08-样式操作</title>
<style type="text/css">
div {
background-color: pink;
}
.select {
font-weight: bold;
}
</style>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#btn1").click(function () {
// 获取当前背景颜色样式
var result = $("div").css("background-color");
alert("background-color样式为:" + result);
});
$("#btn2").click(function () {
// 设置背景颜色为橙色
$("div").css("background-color", "orange");
});
$("#btn3").click(function () {
// 添加字体加粗样式类
$("div").addClass("select");
});
$("#btn4").click(function () {
// 删除字体加粗样式类
$("div").removeClass("select");
});
})
</script>
</head>
<body>
<div>内容</div>
<input id="btn1" type="button" value="获取背景颜色样式" />
<input id="btn2" type="button" value="设置背景颜色样式" />
<input id="btn3" type="button" value="添加字体样式类" />
<input id="btn4" type="button" value="删除字体样式类" />
</body>
</html>
效果如下:
4.5 内容操作
4.5.1 html()
方法 | 语法 | 说明 |
html() | $(A).html() | 获取html内容 |
html(“html内容”) | $(A).html(“html内容”) | 设置html内容 |
4.5.2 text()
方法 | 语法 | 说明 |
text() | $(A).text() | 获取文本内容 |
text(“文本内容”) | $(A).text(“文本内容”) | 设置文本内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html()和text()</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
// 获取内容
var strHtml = $("p").html();
var strText = $("p").text();
$("#txt1").val(strHtml);
$("#txt2").val(strText);
// 设置内容
$("#btn1").click(function () {
$("ul li:nth-child(1)").html("<h3>你好</h3>")
})
$("#btn2").click(function () {
$("ul li:nth-child(2)").text("<h3>你好</h3>")
})
})
</script>
</head>
<body>
<p><strong style="color:red">段落</strong></p>
html()是:<input id="txt1" type="text" /><br/>
text()是:<input id="txt2" type="text" />
<ul>
<li></li>
<li></li>
</ul>
<input id="btn1" type="button" value="html()方法设置列表第一项" />
<input id="btn2" type="button" value="text()方法设置列表第二项" />
</body>
</html>
html()获取的是元素内部所有的内容,html(“html内容”)可以识别内容中的标签;而text()获取的仅仅是文本内容,text(“文本内容”)将内容中的标签转为文本。
效果如下:
4.5.3 val()
表单元素的值都是通过value属性来定义的,使用val()来获取和设置表单元素的值。
方法 | 语法 | 说明 |
val() | $(A).val() | 获取表单元素的值 |
val(“值内容”) | $(A).val(“值内容”) | 设置表单元素的值 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>val()</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#btn_get").click(function(){
var str1 = $("#txt1").val();
alert(str1);
});
$("#btn_set").click(function(){
var str2 = "JavaScript";
$("#txt2").val(str2);
});
})
</script>
</head>
<body>
<input id="txt1" type="text" value="JQuery"/><br/>
<input id="txt2" type="text" /><br/>
获取第1个文本框的值:<input id="btn_get" type="button" value="获取"/><br/>
设置第2个文本框的值:<input id="btn_set" type="button" value="设置">
</body>
</html>
效果如下:
5.JQuery事件
5.1 加载事件
在jQuery中,ready表示文档加载完成后再执行的一个事件,类似JavaScript中的onload事件。语法如下:
//写法1:
$(document).ready(function(){
……
})
//写法2:
jQuery(document).ready(function(){
……
})
//写法3:
$(function(){
……
})
//写法4:
jQuery(function(){
……
})
ready()方法的参数是一个匿名函数,写法3比较常见。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10-加载事件</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
alert($(".content1").html());
$(function () {
alert($(".content2").html());
})
</script>
</head>
<body>
<div class="content1" style="background-color: pink;">内容1</div>
<div class="content2" style="background-color: orange;">内容2</div>
</body>
</html>
由于从上至下执行代码,在执行alert($(".content1").html());
,时,body部分的代码并未加载,所有无法获取类名为.content1元素的html内容。
在执行代码$(function () {...})
时,会等待文档加载完成后再执行内部的代码,此时可以看到两个div块的内容和背景颜色加载完毕。
5.2 鼠标事件
常见的鼠标事件如下表所示。
事件 | 语法 | 说明 |
click | $(A).click(function(){…}) | 鼠标单击事件 |
mouseover | $(A).mouseover(function(){…}) | 鼠标移入事件 |
mouseout | $(A).mouseout(function(){…}) | 鼠标移出事件 |
mousedown | $(A).mousedown(function(){…}) | 鼠标按下事件 |
mouseup | $(A).mouseup(function(){…}) | 鼠标松开事件 |
mousemove | $(A).mousemove(function(){…}) | 鼠标移动事件 |
在事件方法中插入一个匿名函数function(){},匿名函数内部是执行操作的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11-鼠标事件</title>
<style>
#btn
{
display: inline-block;
width: 150px;
height: 24px;
line-height: 24px;
font-family:"微软雅黑";
font-size:16px;
text-align: center;
border-radius: 3px;
background-color: rgba(0, 183, 255, 0.781);
color: White;
cursor: pointer;
}
#btn:hover {background-color: dodgerblue;}
</style>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#btn").click(function(){
alert("成功触发鼠标点击事件")
})
$("#content").mouseover(function(){
$(this).css("color", "red");
})
$("#content").mouseout(function (){
$(this).css("color", "black");
})
})
</script>
</head>
<body>
<div id="btn">鼠标点击事件</div>
<div id="content">鼠标移入移出事件</div>
</body>
</html>
效果如下:
当点击按钮时会触发鼠标点击事件,会提示成功触发;当鼠标移动到文字上时,文字颜色变为红色,当鼠标移出则恢复为黑色。
// 链式调用
$("#content").mouseover(function(){
$(this).css("color", "red");
}).mouseout(function () {
$(this).css("color", "black");
})
上面的代码等价于
$("#content").mouseover(function(){
$(this).css("color", "red");
})
$("#content").mouseout(function () {
$(this).css("color", "black");
})
如果对同一个对象进行多种操作,则可以使用链式调用的语法。这样不仅可以节省代码量,还可以提高代码的性能效率。
5.3 键盘事件
事件 | 语法 | 说明 |
keydown | $(A).keydown(function(){…}) | 键盘按下事件 |
keyup | $(A).keyup(function(){…}) | 键盘松开事件 |
keydown表示键盘按下一瞬间所触发的事件,而keyup表示键盘松开一瞬间所触发的事件。一般来说,keydown发生在keyup之前。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>12-键盘事件</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#txt").keyup(function(){
var str = $(this).val();
// 计算字符串长度
$("#num").text(str.length);
})
})
</script>
</head>
<body>
<input id="txt" type="text" style="display: inline-block;"/>
<div>
字符串长度为:
<span id="num">0</span>
</div>
</body>
</html>
统计输入字符串的长度,效果如下:
5.4 this
在jQuery中,this大多数都是用于事件操作中,指向触发当前事件的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10-加载事件</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("div").click(function(){
//$(this)等价于$("div")
$(this).css("color", "red");
})
})
</script>
</head>
<body>
<div>点击更改文本颜色</div>
</body>
</html>
在$("div").click(function(){……}
中,$(this)
等价于$("div")
。
在事件函数中,如果想要使用当前元素,尽量使用$(this),防止出现各种bug。
6.AJAX操作
Ajax,全称“Asynchronous JavaScript and XML”,即“异步的JavaScript和XML”。其核心是通过JavaScript的XMLHttpRequest对象,以一种异步的方式,向服务器发送数据请求,并且通过该对象接收请求返回的数据,从而实现客户端与服务器端的数据操作。
Ajax能够刷新指定的页面区域,而不是刷新整个页面,从而减少客户端和服务端之间数据量的传输,提高页面速度,使得用户体验更好。
在接下的代码中,将会基于Flask框架搭建所需的后端。如果对Flask框架不熟悉的话,可以参考我的Flask学习博客。
6.1 $.get()方法
语法如下:
$.get(url, data, fn, type)
参数 | 说明 |
url | 必选参数,表示被加载的页面地址 |
data | 可选参数,表示发送到服务器的数据 |
fn | 可选参数,表示请求成功后的回调函数 |
type | 可选参数,表示服务器返回的内容格式 |
参数type返回的内容格式包括:text、html、xml、json、script或default。
后端代码如下:
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template("$.get().html")
@app.route('/get_text', methods=['GET'])
def get_text():
# 获取数据
name = request.values["name"]
email = request.values["email"]
# 返回字符串
result = "用户姓名为" + name + ",用户邮箱为" + email
return result
@app.route('/get_json', methods=['GET'])
def get_json():
name = request.values["name"]
email = request.values["email"]
# 返回json格式数据
result = {"name": name, "email": email}
return result
if __name__ == '__main__':
app.run(port=5001, debug=True)
前端代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$.get()方法</title>
<script src="../static/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#send1").click(function () {
$.get("/get_text",
{ name: $("#name").val(), email: $("#email").val() }, // 发送到服务器的数据
function (data) {
console.log(data)
$("#data").html(data); // 把返回的数据添加到页面上
},
type="text"
);
})
$("#send2").click(function () {
$.get("/get_json",
{ name: $("#name").val(), email: $("#email").val() }, // 发送到服务器的数据
function (data) {
console.log(data)
// 解析服务器返回的json数据
name=data['name']
email=data['email']
result="用户姓名为" + name + ",用户邮箱为" + email+"(JSON解析)"
$("#data").html(result); // 把返回的数据添加到页面上
},
type="json"
);
})
})
</script>
</head>
<body>
<form>
<p>姓名: <input id="name" type="text" /></p>
<p>邮箱: <input id="email" type="text" /></p>
<p><input id="send1" type="button" value="提交(返回格式为字符串)" /></p>
<p><input id="send2" type="button" value="提交(返回格式为JSON)" /></p>
</form>
<h3>服务器传输回来的数据:</h3>
<div id="data"></div>
</body>
</html>
效果如下:
6.2 $.post()方法
除了.get()方法,我们还可以使用.post()方法来通过Ajax去请求服务器的数据。get方式不适合较大的数据量,并且它的请求信息会保存在浏览器缓存中,因此安全性不好;post方式不存在这两个方面的不足。
语法如下:
$.post(url, data, fn, type)
参数 | 说明 |
url | 必选参数,表示被加载的页面地址 |
data | 可选参数,表示发送到服务器的数据 |
fn | 可选参数,表示请求成功后的回调函数 |
type | 可选参数,表示服务器返回的内容格式 |
后端代码如下:
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template("$.post().html")
@app.route('/post_text', methods=['POST'])
def post_text():
# 获取数据
name = request.values["name"]
email = request.values["email"]
# 返回字符串
result = "用户姓名为" + name + ",用户邮箱为" + email
return result
@app.route('/post_json', methods=['POST'])
def post_json():
name = request.values["name"]
email = request.values["email"]
# 返回json格式数据
result = {"name": name, "email": email}
return result
if __name__ == '__main__':
app.run(port=5002, debug=True)
前端代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$.post()方法</title>
<script src="../static/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#send1").click(function () {
$.post("/post_text",
{ name: $("#name").val(), email: $("#email").val() }, // 发送到服务器的数据
function (data) {
console.log(data)
$("#data").html(data); // 把返回的数据添加到页面上
},
type="text"
);
})
$("#send2").click(function () {
$.post("/post_json",
{ name: $("#name").val(), email: $("#email").val() }, // 发送到服务器的数据
function (data) {
console.log(data)
// 解析服务器返回的json数据
name=data['name']
email=data['email']
result="用户姓名为" + name + ",用户邮箱为" + email+"(JSON解析)"
$("#data").html(result); // 把返回的数据添加到页面上
},
type="json"
);
})
})
</script>
</head>
<body>
<form>
<p>姓名: <input id="name" type="text" /></p>
<p>邮箱: <input id="email" type="text" /></p>
<p><input id="send1" type="button" value="提交(返回格式为字符串)" /></p>
<p><input id="send2" type="button" value="提交(返回格式为JSON)" /></p>
</form>
<h3>服务器传输回来的数据:</h3>
<div id="data"></div>
</body>
</html>
上面这个例子跟.get()方法的例子是一样的,只不过我们这里是使用.post()来实现的。post方式请求的数据不会显示在url中。
6.3 $.ajax()
.get()、.post()方法从本质上来说都是使用.ajax()来实现的,它们都是.ajax()方法的简化版,$.ajax()是最底层的方法。
语法如下:
$.ajax(options)
options是一个对象,这个对象内部有很多参数可以设置,所有参数都是可选的,如下表所示(加粗参数较常见):
参数 | 说明 |
url | 被加载的页面地址 |
type | 数据请求方式,“get"或"post”,默认为"get" |
contentType | 发送数据到服务器时所使用的内容类型。默认是:“application/x-www-form-urlencoded”。 |
data | 发送到服务器的数据,可以是字符串或对象 |
dataType | 服务器返回数据的类型,如:text、html、script、json、xml |
success(result,status,xhr) | 请求“成功”后的回调函数 |
error(xhr,status,error) | 请求“失败”后的回调函数 |
complete(xhr,status) | 请求“完成”后的回调函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后) |
timeout | 请求超时的时间,单位为“毫秒” |
global | 是否响应全局事件,默认为true(即响应) |
async | 是否为异步请求,默认为true(即异步) |
cache | 是否进行页面缓存,true表示缓存,false表示不缓存 |
xhr | 用于创建 XMLHttpRequest 对象的函数。 |
后端代码如下:
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template("$.ajax().html")
@app.route('/ajax_text', methods=['GET', 'POST'])
def ajax_text():
# 获取数据
name = request.values["name"]
email = request.values["email"]
# 返回字符串
result = "用户姓名为" + name + ",用户邮箱为" + email
return result
@app.route('/ajax_json', methods=['GET', 'POST'])
def ajax_json():
name = request.values["name"]
email = request.values["email"]
# 返回json格式数据
result = {"name": name, "email": email}
return result
if __name__ == '__main__':
app.run(port=5003, debug=True)
前端代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$.ajax()方法</title>
<script src="../static/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$("#send1").click(function () {
$.ajax({
url: "/ajax_text",
type: "get", // 请求的类型
data: { name: $("#name").val(), email: $("#email").val() }, // 发送到服务器的数据
dataType: "text", // 返回数据类型
success: function (data) {
console.log(data)
$("#data").html(data); // 把返回的数据添加到页面上
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// 状态码
console.log(XMLHttpRequest.status);
// 状态
console.log(XMLHttpRequest.readyState);
// 错误信息
console.log(textStatus);
}
})
})
$("#send2").click(function () {
$.ajax({
url: "/ajax_json",
type: "post", // 请求的类型
data: { name: $("#name").val(), email: $("#email").val() }, // 发送到服务器的数据
dataType: "json", // 返回数据类型
success: function (data) {
console.log(data)
// 解析服务器返回的json数据
name = data['name']
email = data['email']
result = "用户姓名为" + name + ",用户邮箱为" + email + "(JSON解析)"
$("#data").html(result); // 把返回的数据添加到页面上
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// 状态码
console.log(XMLHttpRequest.status);
// 状态
console.log(XMLHttpRequest.readyState);
// 错误信息
console.log(textStatus);
}
})
})
})
</script>
</head>
<body>
<form>
<p>姓名: <input id="name" type="text" /></p>
<p>邮箱: <input id="email" type="text" /></p>
<p><input id="send1" type="button" value="提交(返回格式为字符串)" /></p>
<p><input id="send2" type="button" value="提交(返回格式为JSON)" /></p>
</form>
<h3>服务器传输回来的数据:</h3>
<div id="data"></div>
</body>
</html>
预览效果如下:
第一个按钮发送get请求,第二个按钮发送post请求。
6.4 同源策略
同源策略(Same-Origin Policy)最早由 Netscape 公司提出,即协议、域名、端口号 必须完全相同,是浏览器的一种安全策略。Ajax请求遵守“同源策略”,Ajax请求无法从不同的域、子域或协议中获取数据。
如果想从不同的域、子域或协议中获取数据,就需要跨域。
CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS 是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get和post请求。跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。CORS 是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应以后就会对响应放行。
下面简单介绍如何在Flask框架中设置CORS,需要下载flask_cors
工具包。
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app) #用于解决跨域请求
@app.route("/")
def helloWorld():
return "Hello, cross-origin-world!"
更多细节可查阅官方文档。