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);
});

如果要省略第二个参数，可以在内部使用 ( t h i s ) 代替， (this)代替， (this)代替，(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, requestapp = 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 + "，用户邮箱为" + emailreturn 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 resultif __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, requestapp = 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 + "，用户邮箱为" + emailreturn 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 resultif __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, requestapp = 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 + "，用户邮箱为" + emailreturn 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 resultif __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 CORSapp = Flask(__name__)
CORS(app) #用于解决跨域请求@app.route("/")
def helloWorld():return "Hello, cross-origin-world!"

更多细节可查阅官方文档。

JQuery入门学习教程相关推荐

MAYA 2022基础入门学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.41 GB |时长:4.5小时包含 ...
3dmax Vray建筑可视化入门学习教程
面向初学者的3Ds Max Vray最佳Archviz可视化课程从安装到最终图像的一切都将从头开始教授,不需要任何经验大小解压后:3.25G 时长4h 6m 1280X720 MP4 语言:英语+ ...
Blender 3.0基础入门学习教程 Introduction to Blender 3.0
成为Blender通才,通过这个基于项目的循序渐进课程学习所有主题的基础知识. 你会学到什么教程获取:Blender 3.0基础入门学习教程 Introduction to Blender 3.0- ...
Maya游戏角色绑定入门学习教程 Game Character Rigging for Beginners in Maya
准备好开始为游戏制作自己的角色动画了吗? 你会学到什么了解Maya的界面优化并准备好你的模型,为游戏做准备了解关节以及如何使用它们来构建健壮的角色骨骼,以便在任何游戏引擎中制作动画了解IK和F ...
三维地形制作软件 World Machine 基础入门学习教程
<World Machine课程>涵盖了你需要的一切,让你有一个坚实的基础来构建自己的高质量的电影或视频游戏地形. 你会学到什么为渲染或游戏开发创建高分辨率.高细节的地形. 基于Worl ...
Blender3.0动画制作入门学习教程 Learn Animation with Blender (2021)
要求下载并安装Blender.免费下载和免费用于任何目的. 描述加入我的动画课程. 在本课程中,我将从头开始讲述在Blender中创建动画场景的过程. 从第一步到最终渲染.在这个课程中,我们将使用 ...
UE5真实环境设计入门学习教程
大小解压后:4.69G 时长4h 30m 1280X720 MP4 语言:英语+中英文字幕(根据原英文字幕机译更准确) 虚幻引擎5–面向初学者的真实环境设计 Unreal Engine 5 – Rea ...
ZBrush全面入门学习教程 Schoolism – Introduction to ZBrush
ZBrush全面入门学习教程 Schoolism – Introduction to ZBrush ZBrush全面入门学习教程 Schoolism – Introduction to ZBrush ...
Maya基础入门学习教程
Maya基础入门学习教程视频:.MKV, 1280x720, 共57节课时长 4小时25分钟,3GB 语言:英语+中文字幕(根据原英文字幕机译更准确)+原英文字幕指导老师:Shane Whitt ...

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 同源策略

JQuery入门学习教程相关推荐

最新文章

热门文章