前言
在二次开发人脸识别来进行注册登录时，卡在了前端上传图片到后端这一步，莫得办法，只得来学习前端的jQuery和AJAX看看能不能解决问题
大致思路分为系统性学习和情境性学习，前期以系统性学习为主，跟着视频进行快速入门，之后便根据实际需求以及兴趣进行零散增补
jQuery
视频课程：从这节视频开始到那节视频结束
目录
1.1 概述
jQuery是一套兼容多浏览器的javascript脚本库。核心理念：写得更少，做得更多。
它提供的API让诸如HTML文档遍历和操作、事件处理、动画和Ajax操作更加简单，主要包含以下功能：
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
CSS操作
HTML事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
除此还提供大量插件
1.2 引入
⚔️本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用
首先来到jQuery官网
官网：https://jquery.com
然后下载流程如下
之后就是导入项目中
⚔️CDN引入：使用远程CDN资源库在线引入，避免文件下载（需要联网且具备稳定的网络）
<head><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>1.3 jQuery核心
$符号在jQuery中代表对jQuery对象的引用。通过该对象可以获取jQuery对象，调用jQuery提供的方法等【只有jQuery对象才能调用jQuery提供的方法】
$ 等价于 jQuery对象2.1 DOM对象与jQuery包装集对象
原始的DOM对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是dom对象，而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象
2.1.1 jQuery包装集对象
在jQuery世界中的所有对象，无论是单个还是一组，都封装成一个jQuery包装集，比如获取包含一个元素的jQuery包装集
var jQueryObject = $("#testDiv");2.1.2 DOM对象转jQuery对象
DOM对象转jQuery对象，只需要利用$()方法进行包装即可
var domDiv = document.getElementsById('mydiv');
mydiv = $(domDiv);2.1.3 jQuery对象转DOM对象
jQuery对象转DOM对象，只需要获取数组中的元素即可
// 第一种方式 获取jQuery对象
var jQueryDiv = jQuery('mydiv');
// 第二种方式 获取jQuery对象
jQueryDiv = $('#mydiv');
var dom = jQueryDiv[0]; // 将已获取的jQuery对象转为DOM对象效果图
<!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>DOM对象与jQuery包装集对象</title>
</head>
<body><div id="mydiv"></div><!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined --><script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script>// DOM对象var divDOM = document.getElementById('mydiv');console.log(divDOM);var divsDOM = document.getElementsByTagName('div');console.log(divsDOM);// DOM获取不存在元素var spanDOM = document.getElementById("myspan");console.log(spanDOM);console.log("========");// jQuery对象// 通过id选择获取元素对象 $("#id属性值")var divjQuery = $("#mydiv");console.log(divjQuery);// jQuery获取不存在元素var spanjQuery = $("#myspan");console.log(spanjQuery);console.log("========");// DOM对象转jQuery对象，只需要利用$()方法进行包装即可var divDOMTojQuery = $(divDOM);console.log(divDOMTojQuery);// jQuery对象转DOM对象var divjQueryToDOM = divjQuery[0];console.log(divjQueryToDOM);</script>
</body>
</html>2.2 jQuery选择器
获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便方式来查找|定位元素，称为jQuery选择器。通俗地讲，Selector选择器是一个表示特殊语意的字符串，只要把选择器字符串传入上面的方法中就能够选择不同的DOM对象且以jQuery包装集的形式返回
jQuery选择器按照功能主要分为“选择”和“过滤”，并且是配合使用的
2.2.1 基础选择器
选择器 | 名称 | 举例 |
id选择器 | #id | $("#testDiv")选择id为testDiv的元素 |
元素选择器 | element | $("div")选择所有div元素 |
类选择器 | .class | $(".blue")选择所有class=blue的元素 |
通用选择器 | * | $("*")选择页面所有元素 |
组合选择器 | selector1,select2... | $("#testDiv,span,.blue")同时选中多个选择器匹配的元素 |
效果图
<!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>
</head>
<body><div id="mydiv1">id选择器<span>span中的内容</span></div><div id="mydiv1" class="blue">元素选择器</div><span class="blue">样式选择器</span><!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined --><script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script>// id选择器// 如果有多个同名id，则以第一个为准var mydiv = $("#mydiv1");console.log(mydiv);// 类选择器var clas = $(".blue");console.log(clas);// 元素选择器var spans = $("span");console.log(spans);// 通用选择器var all = $("*");console.log(all);// 组合选择器var group = $("#mydiv1,div,.blue");console.log(group);</script>
</body>
</html>2.2.2 层次选择器
选择器 | 名称 | 举例 |
后代选择器 | ancestor descendant | $("#parent div") 选择id为parent的元素的所有div元素 |
子代选择器 | parent > child | $("#parent > div") 选择id为parent的直接div子元素 |
相邻选择器 | prev + next | $(".blue+img") 选择css类为blue的下一个img元素 |
同辈选择器 | prev - sibling | $(".blue ~ img") 选择css类为blue的之后的img元素 |
效果图
<!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><style>.testColor {background: green;}.gray {background: gray;}</style>
</head>
<body><div id="parent">层次选择器<div id="child" class="testColor">父选择器<div class="gray">子选择器</div><img src="https://mk-image-article.oss-cn-hangzhou.aliyuncs.com/img/20230327162508.png" width="270" height="129"><img src="https://mk-image-article.oss-cn-hangzhou.aliyuncs.com/img/20230327162508.png" width="270" height="129"></div><div>选择器2<div>选择器2中的div</div></div></div><!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined --><script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script>// 后代选择器var hd = $('#parent div');console.log(hd);// 子代选择器var son = $('#parent > div');console.log(son);// 相邻选择器var next = $('#child + div');console.log(next);// 同辈选择器var imgs = $('.gray ~ img');console.log(imgs);</script>
</body>
</html>2.2.3 表单选择器
Forms | 名称 | 举例 |
表单选择器 | :input | 查找所有input元素：$(":input"); 注意：会匹配所有的input、textarea、select和button元素 |
文本框选择器 | :text | 查找所有文本框：$(":text") |
密码框选择器 | :password | 查找所有密码框：$(":password") |
单选按钮选择器 | :radio | 查找所有单选按钮：$(":radio") |
复选框选择器 | :checkbox | 查找所有复选框：$(":checkbox") |
提交按钮选择器 | :submit | 查找所有提交按钮：$(":submit") |
图像域选择器 | :image | 查找所有图像域：$(":image") |
重置按钮选择器 | :reset | 查找所有重置按钮：$(":reset") |
按钮选择器 | :button | 查找所有按钮：$(":button") |
文件域选择器 | :file | 查找所有文件域：$(":file") |
效果图
<!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>
</head>
<body><form id="myform" name="myform" method="post"><input type="hidden" name="uno" value="999" disabled="disabled">姓名:<input type="text" id="uname" name="uname"> <br>密码:<input type="password" id="upwd" name="upwd" value="123456"> <br>年龄:<input type="radio" name="uage" value="0" checked="checked">小屁孩<input type="radio" name="uage" value="1">你懂的 <br>爱好:<input type="checkbox" name="ufav" value="篮球">篮球<input type="checkbox" name="ufav" value="爬床">爬床<input type="checkbox" name="ufav" value="代码">代码<br>来自:<select id="uform" name="uform"><option value="-1" selected="selected">请选择</option><option value="0">北京</option><option value="1">上海</option></select><br>简介:<textarea rows="10" cols="30" name="uintro"></textarea><br>头像:<input type="file"><br><input type="image" src="https://mk-image-article.oss-cn-hangzhou.aliyuncs.com/img/20230327162508.png" width="20" height="20"><button type="submit" onclick="return checkForm();">提交</button><button type="reset">重置</button></form><!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined --><script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script>// 表单选择器var inputs = $(':input');console.log(inputs);// 元素选择器var inputsT = $('input');console.log(inputsT);</script>
</body>
</html>3.1 jQuery DOM操作
jQuery提供了对HTML节点操作，而且是在原生js基础上进行了优化，使用起来更加方便
3.1.1 操作元素的属性
3.1.1.1 获取属性
两者区别：
如果是固有属性，attr()和prop()方法均可操作
如果是自定义属性，attr()可获取，prop()不可获取
如果返回值是boolean类型的属性
若设置了属性，attr()返回具体的值，prop()返回true
若未设置属性，attr()返回undefined，prop()返回false
3.1.1.2 设置属性和移除属性
如果属性返回的boolean类型的值，则使用prop()方法，否则就使用attr()方法
<!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>
</head>
<body><input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc"> aa<input type="checkbox" name="ch" id="bb"> bb<!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined --><script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script>// 获取属性// 属性的分类，分为固有属性、返回值为boolean的属性以及自定义属性// 固有属性var name = $('#aa').attr('name');console.log(name);var nameT = $('#aa').prop('name');console.log(nameT);// 返回值boolean的属性 元素设置了属性var ckO = $('#aa').attr('checked'); var ckT = $('#aa').prop('checked');console.log(ckO); // checkedconsole.log(ckT); // true// 返回值boolean的属性 元素未设置属性var ckThr = $('#bb').attr('checked');var ckF = $('#bb').prop('checked');console.log(ckThr); // undefinedconsole.log(ckF); // false// 自定义属性var abcO = $('#aa').attr('abc');var abcT = $('#aa').prop('abc');console.log(abcO);console.log(abcT);// 设置固有属性$('#aa').attr('value','1');$('#bb').prop('value','2');// 返回值是boolean的属性$('#bb').attr('checked','checked');$('#bb').prop('checked',false);// 自定义属性$('#aa').attr('uname','admin');$('#aa').prop('uage',18);// 移除属性$('#aa').removeAttr('checked');</script>
</body>
</html>3.1.2 操作元素的样式
方法 | 说明 |
attr("class") | 获取class属性的值，即样式名称 |
attr("class",“样式名") | 修改class属性的值，修改样式 |
addClass("样式名") | 添加样式名称 |
css() | 添加具体的样式 |
removeClass(class) | 移除样式名称 |
添加样式是在原来的样式基础上添加的，原本样式会保留，若出现相同的样式，以样式中后定义的为准
<!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><style>div {padding: 8px;width: 180px;}.blue {background-color: blue;}.larger {font-size: 30px;}.green {background: green;}.pink {background: pink;}</style>
</head>
<body><h3>css()方法设置元素样式</h3><div id="conBlue" class="blue larger">天蓝色</div><div id="conRed">大红色</div><div id="remove" class="blue larger">天蓝色</div><!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined --><script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script>// 获取元素样式名var cla = $("#conBlue").attr("class");console.log(cla);// 获取元素的样式$("#conBlue").attr("class","green");// 添加样式$("#conBlue").addClass("larger");$("#conBlue").addClass("pink");// 添加具体的样式 (添加行内样式)$('#conRed').css("font-size","40px");$('#conRed').css({"font-family":"楷体","color":"red"});// 移除样式$("#remove").removeClass('larger');</script>
</body>
</html>3.1.3 操作元素的内容
方法 | 说明 |
html() | 获取元素的html内容 |
html("html,内容") | 设定元素的html内容 |
text() | 设置元素的文本内容，不包含html |
text("text 内容") | 设置元素的文本内容，不包含html |
val() | 获取元素value值 |
val("值") | 设置元素的value值 |
表单元素：
文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select
非表单元素：
div、span、h1~h6、table、tr、td、li、p等
效果图
<!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>
</head>
<body><h3><span>html()和text()方法设置元素内容</span></h3><div id="html"></div><div id="htmlT"></div><div id="text"></div><input type="text" name="uname" id="op" value="oop"><!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined --><script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script>// 设置元素内容$("#html").html("<h2>上海</h2>");$("#htmlT").html("上海");// 获取元素的内容var html = $("#html").html();var htmlT = $("#htmlT").html();console.log(html);console.log(htmlT);// 设置元素的纯文本内容，不识别HTML标签（非表单元素）$("#text").text("北京");$("#text2").text("<h2>好</h2>");// 获取元素的值（表单元素）var val = $('#op').val();console.log(val);$('#op').val('今天天气不错');</script>
</body>
</html>3.1.4 元素常见操作
3.1.4.1 创建元素
在jQuery中创建元素很简单，直接使用核心函数即可，创建格式如下：
$('元素内容') 实例 -> $('<p>this is a paragraph!!!</p>');3.1.4.2 添加元素
方法 | 说明 |
prepend(content) | 在被选元素内部的开头插入元素或内容，被追加的content参数，可以是字符、HTML元素 |
$(content).prependTo(selector) | 把content元素或内容加入selector元素开头 |
append(content) | 在被选元素内部的结尾插入元素或内容，被追加的content参数，可以是字符、HTML元素 |
$(content).appendTo(selector) | 把content元素或内容插入selector元素内，默认是在尾部 |
before() | 在元素前插入指定的元素或内容：$(selector).before(content) |
after() | 在元素后插入指定的元素或内容：$(selector).after(content) |
添加元素时，如果元素不存在，则将元素追加到指定位置；如果元素存在，将原来元素直接剪切到指定位置
效果图
<!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><style>div {margin: 10px 0px;}span {color: white;padding: 8px;}.red {background-color: red;}.blue {background-color: blue;}.green {background-color: green;}.pink {background-color: pink;}.gray {background-color: gray;}</style>
</head>
<body><h3>prepend()方法前追加内容</h3><h3>prependTo()方法前追加内容</h3><h3>append()方法后追加内容</h3><h3>appendTo()方法后追加内容</h3><span class="red">男神</span><span class="blue">偶像</span><div class="green"><span>小鲜肉</span></div><!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined --><script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script>// 创建元素var p = "<p>这是一个p标签</p>";console.log($(p));// 新建文本元素并添加var span = '<span>小奶狗</span>';$('.green').prepend(span);var span2 = '<span>小狼狗</span>';$(span2).prependTo($('.green'));var spanO = '<span>小奶狗1</span>';var spanT = '<span>小狼狗1</span>';$('.green').append(spanO);$(spanT).appendTo($('.green'));// 将已存在内容追加到指定元素中 $('.green').append($('.red'));// 同级追加var sp1 = "<span class='pink'>女神</span>";var sp2 = "<span class='gray'>歌手</span>";$(".blue").before(sp1);$(".blue").after(sp2);</script>
</body>
</html>3.1.4.3 删除元素
指定元素.remove()
删除元素及其对应的子元素，标签和内容一起删除
指定元素.empty()
清空元素内容，保留标签
效果图
<!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><style>span {color: white;padding: 8px;margin: 5px;float: left;}.green {background-color: green;}.blue {background-color: blue;}</style>
</head>
<body><h3>删除元素</h3><span class="green">jQuery<a>删除</a></span><span class="blue">javase</span><span class="green">http协议</span><span class="blue">servlet</span><!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined --><script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script>$('.green').remove();$('.blue').empty();</script>
</body>
</html>3.1.4.4 遍历元素
$(selector).each(function(index,element)); 遍历元素
函数function为遍历时的回调函数
index为遍历元素的序列号，从0开始
element是当前元素，此时是dom元素
<!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><style>span {color: white;padding: 8px;margin: 5px;float: left;}.green {background-color: green;}.blue {border-color: blue;}</style>
</head>
<body><h3>遍历元素 each()</h3><span class="green">jQuery</span><span class="green">javase</span><span class="green">http协议</span><span class="green">servlet</span><!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined --><script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script>$('.green').each(function(index,element){console.log(index);console.log(element);console.log(this);console.log($(this));})</script>
</body>
</html>4.1 jQuery事件
jQuery 是为事件处理特别设计的
4.1.1 ready()加载事件
预加载事件，文档加载完毕事件，当文档全部加载完毕之后执行，等价于window.onload事件
<!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>ready加载事件</title><!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined --><script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script>$(document).ready(function(){// 获取元素console.log($('#p1'));});$(function(){console.log('ready加载事件...');})</script>
</head>
<body><p id="p1">文本</p>
</body>
</html>4.1.2 bind()绑定事件
bind绑定事件：为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
语法：$(selector).bind( eventType[,eventData], handler(eventObject));
eventType：是一个字符串类型的事件类型
[,eventData]: 传递的参数、格式：{名: 值，名2：值2}
handler(eventObject): 该事件触发执行的函数
<!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>
</head>
<body><h3>bind()方向简单的绑定事件</h3><div id="test" style="cursor: pointer;">点击查看名言</div><input id="btntest" type="button" value="点击就不可用了"><hr><button type="button" id="btn1">按钮1</button><button type="button" id="btn2">按钮2</button><button type="button" id="btn3">按钮3</button><button type="button" id="btn4">按钮4</button><!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined --><script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script>// 绑定单个事件$('#test').bind('click',function(){console.log('世上无难事，只怕有心人');}); $('#btntest').click(function(){console.log(this);$(this).prop('disabled',true);});// 绑定多个事件$('#btn1').bind('click mouseout',function() {console.log('按钮1...');});$('#btn2').bind('click',function(){console.log('按钮2被点击了...');}).bind('mouseout',function() {console.log('按钮2移开了...');});$('#btn3').bind({'click': function() {console.log('按钮3被点击了...');},'mouseout': function() {console.log('按钮3移开了...');}});// 直接绑定$('#btn4').click(function() {console.log(('按钮4被点击了...'));}).mouseout(function(){console.log('按钮4移开了...');});</script>
</body>
</html>情境学习
1.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>toggle</title><style>.text {border: 1px solid rgba(173, 160, 160, 0.8);}.btn {float: right;margin-right: 5px;}</style>
</head>
<body><div class="text"><p>普罗大众：人工智能应该被隐藏</p><button class="btn">展开</button><p>魔术师：世界应该被重塑</p></div><script src="../js/jquery-3.6.4.js"></script><script>var flag = 1;$('button').click(function() {if (flag == 0) {$(this).text('显示');flag = 1;} else {$(this).text('隐藏');flag = 0;}$('p').toggle();})</script>
</body>
</html>结语
其实并不打算学jQuery，因为不想拉长战线，只想学完AJAX然后实现需求，但跟着尚硅谷的AJAX视频学习20小节后便发现剩余10小节离不开jQuery，没法，就回过头来学习jQuery，本来应该一天学完，结果沉迷ChatGPT,便......
