JQuery入门基础
目录
1.初识
下载
使用
JQuery（核心）对象
2.选择器
基础选择器
层次选择器
后代选择器
子代选择器
兄弟选择器
相邻选择器
3.JQuery DOM操作
创建元素
插入元素
删除元素
遍历元素
属性操作
获取属性
设置属性
删除属性
样式操作
获取样式
设置属性
添加class
删除class
内容操作
html()
text()
val()
4.JQuery事件
加载事件 $(function(){...}
鼠标事件
键盘事件
this
5.AJAX操作
$.get()方法
$.post()方法
$.ajax()
同源策略(Same-Origin Policy) 与 跨域的解决
1.初识
JQuery是一个快速、简洁的JavaScript框架，优化HTML文档操作、事件处理、动画设计和Ajax交互。
下载
下载地址：https://jquery.com/
开发版：jquery-x.x.x.js（学习源码，文件较大）
发布版：jquery-x.x.x.min.js（适合项目部署，文件较小）
使用
<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
JQuery（核心）对象
$ 符号在JQuery中代表对JQuery对象的引用
$ == JQuery2.选择器
基础选择器
| 选择器 | 语法 | 说明 |
|---|---|---|
| id选择器 | $("#id名") | 选中某个id的元素（如果有多个同名id，则以第一个为准） |
| 类选择器 | $(".类名") | 选中某一类的元素 |
| 元素选择器 | $(“标签名”) | 选中某一标签的元素 |
| 组合选择器 | $(“选择器1, 选择器2, … , 选择器n”) | 同时对几个选择器进行相同的操作 |
<head><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 () {
……
})
层次选择器
| 选择器 | 语法 | 说明 |
|---|---|---|
| 后代选择器 | $(“M N”) | 选择M元素内部后代N元素（所有N元素） |
| 子代选择器 | $(“M>N”) | 选择M元素内部子代N元素（所有第1代N元素） |
| 兄弟选择器 | $(“M~N”) | 选择M元素后面所有的同级N元素 |
| 相邻选择器 | $(“M+N”) | 选择M元素相邻的下一个元素（M、N是同级元素） |
后代选择器
<head><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>
子代选择器
<head><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>
与后代选择器对比，可以知道：子代选择器只选取子代元素，不包括其他后代元素。
兄弟选择器
<head><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>
兄弟选择器只选取后面的所有兄弟元素，不包括前面的所有兄弟元素。
相邻选择器
<head><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>
与兄弟选择器对比，可以知道：相邻选择器只选取后面相邻的第一个兄弟元素，不包括其他兄弟元素。
3.JQuery DOM操作
DOM（文档对象模型）（Document Object Model），由W3C定义的一个标准。
创建元素
使用字符串的形式来创建一个元素节点，然后再通过append()、before()等方法把这个字符串插入到现有的元素节点中。
<head><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>
插入元素
| 方法 | 语法 | 说明 |
|---|---|---|
| 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为同级元素） |
代码如下，可自行体验不同方法之间的区别：
<head><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>
删除元素
| 方法 | 语法 | 说明 |
|---|---|---|
| remove() | $(A).remove() | 删除元素A内部及所有后代元素，不保留标签 |
| empty() | $(A).empty() | 清空元素A的内容及所有后代元素，保留标签 |
<head><title>删除元素</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()清空列表第一项。
遍历元素
$(A).each(function(index, element){
……
})
each()方法接收一个匿名函数作为参数，该函数有两个参数：index，element。index是一个可选参数，它表示元素的索引号（即下标），索引从0开始的；element是可选参数，表示当前元素可以使用this代替
<head><title>遍历元素</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);
});
属性操作
获取属性
| 方法 | 语法 | 说明 |
|---|---|---|
| attr(“属性名”) | $(A).attr(“属性名”) | 获取指定的属性值，如果没有该属性则返回undefined |
| prop(“属性名”) | $(A).prop(“属性名”) | 一般用于获取具有true和false两个属性的属性值 |
具有true和false这两种取值的属性，如checked、selected或disabled等建议使用prop()来操作；而其他的属性都建议使用attr()来操作。
设置属性
| 方法 | 语法 | 说明 |
|---|---|---|
| attr(“属性”, “取值”) | $(A).attr(“属性”, “取值”) | 设置一个属性 |
| attr({“属性1”: “取值1”, “属性2”:“取值2”, …, “属性n”:“取值n”}) | $().attr({“属性1”: “取值1”, “属性2”:“取值2”, …, “属性n”:“取值n”}) | 设置多个属性 |
删除属性
| 方法 | 语法 | 说明 |
|---|---|---|
| removeAttr(“属性名”) | $(A).removeAttr(“属性名”) | 删除元素A的某个属性 |
<head><title>属性操作</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>
样式操作
获取样式
| 方法 | 语法 | 说明 |
|---|---|---|
| css(“属性名”) | $(A).css(“属性名”) | 获取元素A一个CSS属性的取值 |
设置属性
| 方法 | 语法 | 说明 |
|---|---|---|
| css(“属性”, “取值”) | $(A).css(“属性”, “取值”) | 设置元素A的一个属性 |
| css({“属性1”:“取值1”, “属性2”:“取值2”, …, “属性n”:“取值n”}) | $(A).css({“属性1”:“取值1”, “属性2”:“取值2”, …, “属性n”:“取值n”}) | 设置元素A的多个属性 |
添加class
| 方法 | 语法 | 说明 |
|---|---|---|
| addClass(“类名”) | $(A).addClass(“类名”) | 为元素A添加一个样式类 |
删除class
| 方法 | 语法 | 说明 |
|---|---|---|
| removeClass(“类名”) | $(A).removeClass(“类名”) | 删除元素A中的一个样式类 |
<head><title>样式操作</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>
内容操作
html()
| 方法 | 语法 | 说明 |
|---|---|---|
| html() | $(A).html() | 获取html内容 |
| html(“html内容”) | $(A).html(“html内容”) | 设置html内容 |
text()
| 方法 | 语法 | 说明 |
|---|---|---|
| text() | $(A).text() | 获取文本内容 |
| text(“文本内容”) | $(A).text(“文本内容”) | 设置文本内容 |
<head><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>
val()
表单元素的值都通过value属性来定义的，使用val()来获取和设置表单元素的值。
| 方法 | 语法 | 说明 |
|---|---|---|
| val() | $(A).val() | 获取表单元素值 |
| val(“值内容”) | $(A).val(“值内容”) | 设置表单元素值 |
<head><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>
4.JQuery事件
加载事件 $(function(){...}
在jQuery中，ready表示文档加载完成后再执行的一个事件，类似JavaScript中的onload事件
//写法1：
$(document).ready(function(){
……
})
//写法2：
jQuery(document).ready(function(){
……
})
//写法3：
$(function(){
……
})
//写法4：
jQuery(function(){
……
})
ready()方法的参数是一个匿名函数，写法3比较常见。
<head><title>加载事件</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>
鼠标事件
常见的鼠标事件
| 事件 | 语法 | 说明 |
|---|---|---|
| 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(){}，匿名函数内部是执行操作的代码。
<head><title>鼠标事件</title><style>#btn{display: inline-block;width: 200;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");
})
键盘事件
| 事件 | 语法 | 说明 |
|---|---|---|
| keydown | $(A).keydown(function(){…}) | 键盘按下事件 |
| keyup | $(A).keyup(function(){…}) | 键盘松开事件 |
<head><title>键盘事件</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>
this
this大多数都是用于事件操作中，指向触发当前事件的元素。
<head><title>加载事件</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>
在事件函数中，如果想要使用当前元素，尽量使用$(this)，防止出现各种bug。
5.AJAX操作
Ajax，全称“Asynchronous JavaScript and XML”，即“异步的JavaScript和XML”。是通过JavaScript的XMLHttpRequest对象，以一种异步的方式，向服务器发送数据请求，并且通过该对象接收请求返回的数据，实现客户端与服务器端的数据操作。
Ajax能够刷新指定的页面区域，从而减少客户端和服务端之间数据量的传输。
$.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)
前端：
<head><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>
$.post()方法
除了.get()方法，我们还可以使用.post()方法来通过Ajax去请求服务器的数据。
语法：
$.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)
前端代码如下：
<head><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>
$.ajax()
.get()、.post()本质上都是使用.ajax()实现的，都是.ajax()方法的简化版，$.ajax()是最底层的方法。
语法：
$.ajax(options)
options是一个对象，内部有很多参数可设置，所有参数可选：
后端：
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)
前端：
<head><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>
同源策略(Same-Origin Policy) 与 跨域的解决
同源策略(Same-Origin Policy) 即协议、域名、端口号 必须完全相同，是浏览器的安全策略。Ajax遵守“同源策略”，Ajax请求无法从不同的域、子域或协议中获取数据。
如果想从不同的域、子域或协议中获取数据，就需要跨域。
CORS（Cross-Origin Resource Sharing），跨域资源共享。
下面简单介绍如何在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入门基础
目录 1.初识 下载 使用 JQuery（核心）对象 2.选择器 基础选择器 层次选择器 后代选择器 子代选择器 兄弟选择器 相邻选择器 3.JQuery DOM操作 创建元素 插入元素 删除元素 遍历元素 属性操作 获取属性 设置属性 删除属性 样式操作 …...
kafka 构建双向SSL认证
kafka 安装 以下内容均已完成测试，按照教程搭建你会得到一个双向ssl认证的kafka broker，并能通过ip以及域名访问，笔者能力有限如果文章内容存在问题烦请各位指出。 搭建单机Kafka 需求 centos 7kafka_2.12-2.6.0jdk8（文档中统…...
推荐一个.Net Core开发的Websocket群聊、私聊的开源项目
更多开源项目请查看：一个专注推荐.Net开源项目的榜单 今天给大家推荐一个使用Websocket协议实现的、高性能即时聊天组件，可用于群聊、好友聊天、游戏直播等场景。 项目简介 这是一个基于.Net Core开发的、简单、高性能的通讯组件，支持点对点…...
华为OD机试Golang解题 - 事件推送 | 含思路
华为Od必看系列 华为OD机试 全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理 已参加机试人员的实战技巧华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典文章目录 华为Od必看系列使用说明本期题目…...
将微信小程序页面转为图片
最近做项目遇到一个需求，那就是要将某个页面转为图片然后传给后端，我仔细找了一圈，发现官方那个Api也就是wx.canvasToTempFilePath生成的图片很有可能为空，太坑了，于是我放弃用它了，选择了用wxml2canvas。 安装wxml2canvas npm init npm install wxml2canvas --save --…...
LINE、SDNE和struc2vec图嵌入算法学习笔记
引言 在cs224w课程中，我先后总结了deepwalk、node2vec，这两种算是最经典也是最主流的做法，而在 图节点嵌入相关算法学习笔记 中，从头至尾，将一些经典算法用wiki的数据集复现了一下，所以本篇博文࿰…...
Buuctf Younger-drive 题解
目录 一.查壳 二.运行缺少dll 三.主函数 四.hObject线程 五.Thread线程 六.judge函数 七.解题脚本 这题的关键在于了解一定的线程相关知识 一.查壳 32位带壳,用upx脱壳 二.运行缺少dll 后续尝试了各种方法修复dll但是还是运行不了 值得一提的是脱壳后的程序不能动态调试…...
数据结构与算法：二叉树专题
数据结构与算法：二叉树专题前言前提条件基础知识二叉树链式存储结构二叉树中序遍历二叉树层序遍历常见编程题把一个有序整数数组放到二叉树中逐层打印二叉树结点数据求一棵二叉树的最大子树和判断两棵二叉树是否相等把二叉树转换为双向链表判断一个数组是否是二元查…...
Cadence Allegro 导出Cadence Schematic Feedback Report详解
⏪《上一篇》 🏡《总目录》 ⏩《下一篇》 目录 1，概述2，Cadence Schematic Feedback Report作用3，Cadence Schematic Feedback Report示例4，Cadence Schematic Feedback Report导出方法4.1，方法1,4.2，方法2,...
《计算机系统基础》—— 运算
文章目录《计算机系统基础》——运算整数按位运算作用操作位移运算作用操作乘法运算除法运算浮点数加减运算乘除运算《计算机系统基础》——运算 🚀🚀本章我们需要介绍的是有关C语言里面的运算，当然了，我们不会是介绍简单的运算&…...
MSTP多进程讲解与实验配置
目录 MSTP多进程 专业术语 MSTP多进程配置 在MSTP域配置 MSTP多进程 多进程的作用 将设备上的端口绑定到不同的进程中，以进程为单位进行MSTP计算，不在同一进程内的端口不参与此进程中的MSTP协议计算，实现各个进程之间的生成树计算相互独立…...
【Python】软件测试必备：了解 fixture 在自动化测试中的重要作用
在自动化软件测试中，fixture 是一种确保测试在一致且受控条件下运行的重要方法。简单来说，fixture 就是一组先决条件或固定状态，必须在运行一组测试之前建立。在测试框架中，fixture 提供了一种方便的方法，用于在每个测…...
DevExpress皮肤引用的办法
1.引用Dll皮肤文件Typeprocedure SetSkin(skinnam:string);procedure TFrmMain.SetSkin(skinnam:string);varHinst:THANDLE;RStream:TResourceStream;beginHinst:Loadlibrary(ALLSK.dll);If Hinst0 ThenExitelsebeginRstream:TResourceStream.Create(Hinst,skinnam,MYSKIN);dxS…...
2023-03-04 区分纳米颗粒核壳原子
声明：未经允许，不得擅自复制、转载。欢迎引用：Laser-Assisted Synthesis of Bi-Decorated Pt Aerogel for Efficient Methanol Oxidation ElectrocatalysisApplied Surface Science ( IF 6.707 ) Pub Date : 2022-04-01 , DOI: 10.1016/j.aps…...
review设备管理
目录 1、设备管理基础知识 （1）、外部设备分类 （2）、注意事项 2、I/O硬件原理 （1）、不同方式对I/O设备分类 （2）、I/O控制方式 （3）、设备控制器 3、I/O软…...
Cadence Allegro 导出Bill of Material Report (Condensed)详解
⏪《上一篇》 🏡《总目录》 ⏩《下一篇》 目录 1，概述2，Bill of Material Report (Condensed)作用3，Bill of Material Report (Condensed)示例4，Bill of Material Report (Condensed)导出方法4.1，方法14.2，方法2,...
B. Sherlock and his girlfriend
Sherlock has a new girlfriend (so unlike him!). Valentines day is coming and he wants to gift her some jewelry. He bought n pieces of jewelry. The i-th piece has price equal to i 1, that is, the prices of the jewelry are 2, 3, 4, ... n 1. Watson…...
Spring SpEL表达式
Java知识点总结：想看的可以从这里进入 目录17、Spring SpEL17.1、简介17.2、配合value使用17.2.1、基本字面值17.2.2、类相关表达式17.2.3、properties17.2.4、T运算符17.2.5、new17.2.6、Elvis运算符17.2.7、运算符17.2、配合XML使用17、Spring SpEL 17.1、简介 S…...
Nginx反向代理原理详解与配置
Nginx反向代理是一种常用的反向代理技术，它允许您将一个或多个Web服务器上的内容公开给Internet上的客户端，而不必暴露您的服务器的IP地址。Nginx反向代理的原理是：客户端发出一个HTTP请求，Nginx服务器收到请求后，将请…...
Happen-Before从入门到踹门
什么是Happen-Before有人翻译为"先行发生原则"，其实也没错，但是更准确的说法应该是，前一个操作的值，后一个总能察觉到。Happen-Before的八条规则程序有序性：在前面的代码优先于在后面的代码执行volatile的变…...
电力系统系统潮流分析【IEEE 57 节点】（Matlab代码实现）
👨🎓个人主页：研学社的博客💥💥💞💞欢迎来到本博客❤️❤️💥💥🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密…...
Java——N皇后问题
题目链接 leetcode在线oj题——N皇后 题目描述 按照国际象棋的规则，皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上，并且使皇后彼此之间不能相互攻击。 给你一个整数 n ÿ…...
Mybatis一级缓存与二级缓存
一、MyBatis 缓存缓存就是内存中的数据，常常来自对数据库查询结果的保存。使用缓存，我们可以避免频繁与数据库进行交互，从而提高响应速度。MyBatis 也提供了对缓存的支持，分为一级缓存和二级缓存，来看下下面这张图&…...
LQB，手打，PCF8591,ADDA转换，AD1是光敏电阻，AD3是电位器，DA输出
在上述at24c02de 基础上，添加三个函数 一个是读取通道1光敏电阻的数据； 一个是读取通道3的电压； 一个是输出DA的数据。。 5V的AD DA。 如果读入的电压是5V，输入AD，就是255； 如果是0V，就是00000…...
【计组笔记06】计算机组成与原理之控制器和总线结构
这篇文章，主要介绍计算机组成与原理之控制器和总线结构。 目录 一、控制器功能 1.1、控制器组成 1.2、控制单元的输入和输出...
elisp简单实例: auto-save
elisp 能找一个简单又实用的代码很不容易,以下代码不是我的原创,只是结合自己的理解,添加修正了一些注释,荣誉归原作者,感谢原作者的开源精神! 调用说明: 把后面代码存为auto-save.el 在init.el 中写上 (require auto-save) 就可以了. 下面是auto-save.el 内容了. ;; 我…...
写字楼/园区/购物中心空置率太高？快用快鲸智慧楼宇系统
客户租不租你的写字楼，事关区位、交通、环境、价格、面积、装修等诸多因素，但很多招商部对这些影响客户决策的数据并不重视，在客户初次上门看房时仅简单记录姓名、联系方式、需求面积，对其他核心数据熟视无睹，也为日后…...
【JavaSE】数组的定义和使用（上）
数组的定义和使用（上）6-数组的定义与使用1. 数组的基本概念1.1 为什么要使用数组1.2 什么是数组1.3 数组的创建及初始化1.3.1 数组的创建1.3.2 数组的初始化1.4 数组的使用1.4.1 数组中元素的访问1.4.2 遍历数组2. 数组是引用类型2.1 初始JVM的内存分布2…...
计算机的学习路线
本文是介绍如何成为一个Geek，一个真正的计算机高手。 适合有成为IT领域技术大牛的人参考。 写给大一新生和所有向深耕IT领域的人，避免走一些弯路。 第一门入门的必备功课-语法与算法 什么是计算机？ 用来做运算的机器 电子计算机在运算方面…...
TD算法超详细解释，一篇文章看透彻！
【已解决】TD算法超详细解释和实现（Sarsa，n-step Sarsa，Q-learning）一篇文章看透彻！ 郑重声明：本系列内容来源 赵世钰(Shiyu Zhao)教授的强化学习数学原理系列，本推文出于非商业目的分享个人学习…...