项目需要用，总结一下相关知识，方便查看。
（1）jQuery 是一个轻量级的 JavaScript 库，极大地简化了 JavaScript 开发。
（2）jQuery 封装了 JS、CSS、DOM 等并提供一致的、简洁的 API，简化了 JS 编程。
（3）jQuery 会频繁的操作 DOM，会影响性能（得与 MVVM 框架区分）。
（1）引入 jQuery 相关文件（CDN 方式）。
【CDN：（此处选用 BootCDN，其他 CDN 亦可）】 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
（2）官网下载也行
【官网下载地址：】 https://jquery.com/download/
（3）基本步骤：
Step1：引入 jQuery 相关 js 文件。
Step2：利用选择器定位到需要操作的节点（元素）。
Step3：操作节点（元素）。
【基本使用格式：】 $(selector).action()其中： $ 指 jQuery。 selector 指查询的 HTML 元素（节点）。 action 指对元素（节点）的操作。 【举例：（隐藏所有的 p 标签）】 $("p").hide();
（4）文档就绪事件
jQuery 代码需要等 DOM 加载完成后再进行操作，否则可能不生效。
【方式一：】$(document).ready(function() { // jQuery 代码});【方式二：（简写形式，效果同方式一）】$(function() { // jQuery 代码});
（5）小案例分析：
点击隐藏按钮，隐藏当前页面所有的 p 标签。
【小案例：】<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jQuery Demo</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#hide").click(function() { $("p").hide(); }); $("#show").click(function() { $("p").show(); }) }); </script> </head> <body> <button id="hide" style="background-color: cadetblue;">p hide</button> <button id="show" style="background-color: coral;">p show</button> <div style="margin-left: 100px; background-color: #5B6270; width: 200px; height: 500px;"> <div style="margin-top: 20px;">Hello JS</div> <p>Hello</p> <p>Hello Java</p> </div> </body></html>
jQuery 选择器允许 对 HTML 的单个元素 或者 元素组进行操作，能实现定位元素位置并对元素样式进行增删改。写法类似于 CSS 选择器。
（1）分类：
基本选择器、层次选择器、过滤选择器、表单选择器。
（2）基本选择器
根据标签名、id、class名等一种或多种来选择元素。
基本选择器可细分为：元素选择器、类选择器、id 选择器、选择器组。
1、元素选择器：根据标签名定位元素。 格式： $("标签名")2、类选择器：根据class属性定位元素。 格式： $(".class属性名")3、id选择器：根据id属性定位元素。 格式： $("#id")4、选择器组：定位一组选择器所对应的所有元素。 格式： $("#d1, .importent")注：$("")返回的均为数组。
（3）层次选择器
根据元素的层级关系，加上特殊的符号（>、+、~）来选择元素。
层次选择器又可细分为：后代（子孙）元素选择器、子元素选择器、兄弟元素选择器。
1、后代元素选择器（选子孙）：在select1元素下，选中所有满足select2的子孙元素。 格式： $("select1 select2")2、子元素选择器（只选子）：在select1元素下，选中所有满足select2的子元素。 格式： $("select1 > select2")3、兄弟元素选择器（选一个）：在select1元素下，选中所有满足select2的下一个（弟弟）元素。 格式： $("select1 + select2")4、兄弟元素选择器（选所有）：在select1元素下，选中所有满足select2的所有（弟弟）元素。 格式： $("select1 ~ select2")
（4）过滤选择器
根据元素特征去选择元素。
过滤选择器可细分为：基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、状态过滤选择器。
【基本过滤选择器：】 根据元素的基本特征定位，常用于表格与列表。 $("select1:first")：第一个元素。 $("select1:last")：最后一个元素。 $("select1:not(selector)")：去除selector的所有元素。 $("select1:even")：挑选偶数行。 $("select1:odd")：挑选奇数行。 $("select1:eq(index)")：下标为index的元素，并返回jQuery对象。 $("select1:gt(index)")：下标大于index的元素。 $("select1:lt(index)")：下标小于index的元素。【内容过滤选择器：】 根据文本内容定位元素。常用于文本。 $("select1:contains(text)")：匹配包含给定文本的元素。 $("select1:empty")：匹配所有不包含子元素或文本的空元素。【可见性过滤选择器：】 根据可见性定位元素。 $("select1:hidden")：匹配所有不可见的元素，或者type="hidden"的元素。 $("select1:visible")：匹配所有可见的元素。【属性过滤选择器：】 根据属性（id, class, style等）定位元素。 $("select1[attribute]")：匹配具有attribute属性的元素。 $("select1[attribute = vlue]")： 匹配属性等于value的元素。 $("select1[attribute != value]")： 匹配属性不等于value的元素。 $("select1[attribute *= value]")： 匹配属性中包含value的元素。 $("select1[attribute ^= value]")： 匹配属性中以value开头的元素。 $("select1[attribute $= value]")： 匹配属性中以value结尾的元素。 $("select1[attribute1][attribute2]")： 匹配属性中同时满足 attribute1、 attribute2 的元素。【状态过滤选择器：】 根据状态定位元素。常用于表单。 $("input:enabled")：匹配可用的 input 元素。 $("input:disabled")：匹配不可用的 input 元素。 $("input:checked")：匹配被选中的checkbox。 $("option:selected")：匹配被选中的option。
（5）表单选择器
用于选择表单元素。
$(":text")：匹配文本框。或者使用 $("input:text")。$(":password")：匹配密码框。$(":radio")：匹配单选框。$(":checkbox")：匹配多选框。$(":submit")：匹配提交按钮。$(":reset")：匹配重置按钮。$(":button")：匹配普通按钮。$(":file")：匹配文件框。$(":hidden")：匹配隐藏框。
通过选择器可以定位到 DOM 节点，操作 DOM 才是最终的需求。
DOM 指 Document Object Model，即文档对象模型。文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。
（1）捕获节点、修改节点
1、读写节点的HTML内容。相当于JS的innerHTML。 格式: $("select").html(); // 获取节点的html内容 $("select").html("<span>123</span>"); // 设置节点的内容2、读写节点的文本内容。相当于JS的innerText。 格式： $("select").text(); // 获取节点的文本内容 $("select").text("123"); // 设置节点的文本内容3、读写节点的value属性值。（表单的值用val取） 格式： $("select").val(); // 获取节点的value值 $("select").val("abc"); // 设置节点的value值4、读写节点的属性值。 格式： $("select").attr("属性名"); // 获取节点的某属性的值 $("select").attr("属性名"，"属性值"); // 设置节点的某属性的值
（2）增加节点
【增加节点：】 分两步： 1、创建DOM节点。 2、插入DOM节点。 【1、创建DOM节点】 格式: $("节点内容") 举例： let test = $("<span>hello</span>")【2、插入DOM节点】 格式： $("select").append(test); 做为最后一个子节点添加起来。 $("select").prepend(test); 做为第一个子节点添加起来。 $("select").after(test); 做为下一个兄弟节点添加进来。 $("select").before(test); 做为上一个兄弟节点添加进来。
（3）删除节点
【格式：】 $("select").remove(); // 删除节点。 $("select").remove(selector); // 只删除满足selector的节点。（不常用） $("select").empty(); // 清空节点。
（4）添加 CSS 样式、删除 CSS 样式、修改 CSS 样式
$("select").addClass(""); //追加样式。$("select").removeClass(""); // 移除指定样式。$("select").removeClass(); // 移除所有样式。$("select").toggleClass(""); // 切换样式（对某个样式进行添加或移除操作）。 $("select").hasClass(""); // 判断是否有某个样式。$("select").css("");// 读取css的值，返回第一次匹配的值。$("select").css("", "") ;// 设置样式。$("select").css({"" : "", "" : ""}) ;// 设置多个样式。
（5）获取尺寸、设置尺寸
$("select").width(); // 返回元素的宽度（不包括内边距、边框、外边距）$("select").width(""); // 设置元素的宽度（不包括内边距、边框、外边距）$("select").height(); // 返回元素的高度（不包括内边距、边框、外边距）$("select").height(""); // 设置元素的高度（不包括内边距、边框、外边距）$("select").innerWidth(); // 返回元素的宽度（不包括边框、外边距）$("select").innerHeight(); // 返回元素的高度（不包括边框、外边距）$("select").outerWidth(); // 返回元素的宽度（不包括外边距）$("select").outerHeight(); // 返回元素的高度（不包括外边距）$("select").outerWidth(true); // 返回元素的宽度$("select").outerHeight(true); // 返回元素的高度
（6）遍历节点
根据元素的层级关系进行移动，即遍历。
可以 向上移动（遍历祖先节点）、向下移动（遍历子孙节点）、水平移动（遍历兄弟节点）。
1、向上移动，遍历祖先（直接父节点、祖父节点等） $("select").parent(); // 返回直接父节点。 $("select").parents(); // 返回所有祖先节点。 $("select1").parentsUntil(“select2”); // 返回 select1 与 select2 间的所有节点，若 select2 不存在，则等价于 parents 方法2、向下移动，遍历子孙（直接子节点、子孙节点） $("select").children(); // 返回直接子节点 $("select").children(selector); // 返回匹配 selector 的直接子节点 $("select").find(selector); // 查找满足选择器的所有后代。 $("select").find("*"); // 查找所有后代。 3、水平移动，遍历兄弟 $("select").siblings(); // 返回所有兄弟节点 $("select").siblings(selector); // 返回匹配 selector 的所有兄弟节点。 $("select").next(); // 返回下一个兄弟节点 $("select").next(selector); // 返回匹配 selector 的下一个兄弟节点。 $("select").nextAll(); // 返回当前元素的所有 弟弟节点 $("select").nextUntil(selector); // 返回两个选择器间的所有节点 $("select").prev(); // 返回上一个兄弟节点 $("select").prev(selector); // 返回匹配 selector 的上一个兄弟节点。 $("select").prevAll(); // 返回当前元素的所有 哥哥节点 $("select").prevUntil(selector); // 返回两个选择器间的所有节点
jQuery 对事件同样做了处理，提供了一些 API。
（1）基本语法：
【事件绑定语法：】 $obj.bind(事件类型, 事件处理函数); $obj.on(事件类型, [选择器], 事件处理函数);比如： $obj.bind('click', fn) 其可以简写为 $obj.click(fn)。其中$obj.click()表示触发了click事件。 【注： on 与 bind 的区别】 bind（event,fn）; // 该方法只能给绑定元素添加事件。当 on()不使用第二个参数时与bind() 相同。 // 当使用第二个参数时 就进行了冒泡，将 事件委托给父元素进行处理 并且this还是指向第二个参数选择器 on(event,[selector],fn); //该方法可以给指定的子元素绑定事件，注意：特别是给动态创建的dom元素绑定事件时必须使用该方法。 //on可以将子元素的事件委托给父元素进行处理；on可以给动态添加的元素加上绑定事件。【获取事件对象 event：】在 function 参数中直接写即可。格式： $(function(){ $("select").click(function(event) { alert(event.pageX + "," + event.pageY+ "," + event.target.nodeName); }) });【事件对象常用属性：】 获取事件源： event.target, 其返回的是DOM对象。 获取鼠标点击的坐标: event.pageX, event.pageY. 【取消事件冒泡机制：】 event.stopPropagation() 可以取消事件冒泡。
（2）常用事件 API
【鼠标事件：】 $("select").click(function() {}); // 鼠标左键点击事件 $("select").dblclick(function() {}); // 鼠标左键双击事件 $("select").mouseenter(function() {}); // 鼠标移入事件（当前选中的元素范围内触发一次） $("select").mouseleave(function() {}); // 鼠标移出事件（不会触发冒泡事件） $("select").mouseover(function() {}); // 鼠标移入事件（从子元素、当前元素相互切换时会触发） $("select").mouseout(function() {}); // 鼠标移出事件（会触发冒泡事件） $("select").mousemove(function() {}); // 鼠标移入事件（移动一个像素就会触发） $("select").mousedown(function() {}); // 鼠标移入并按下事件 $("select").mouseup(function() {}); // 鼠标按下后的弹起事件 $("select").hover(mouseenter, mouseleave); // 鼠标悬浮事件（触发mouseenter、mouseleave事件）【表单事件：】 $("select").focus(function() {}); // 元素获得焦点（点击或Tab键触发）后触发 $("select").blur(function() {}); // 元素失去焦点后触发 $("input").change(function() {}); // 表单（input）值被修改后触发 $("form").submit(function() {}); // form 提交时触发 【键盘事件：】 $("select").keydown (function(event) {}); // 键盘键按下触发，通过 event.key 可以获取当前按下的键名 $("select").keypress(function(event) {}); // 键盘键按下触发，通过 event.key 可以获取当前按下的键名，其有部分键获取不到，只能通过 keydown 获取。 $("select").keyup (function(event) {}); // 键盘键弹起触发，通过 event.key 可以获取当前按下的键名
（1）显示、隐藏
$("select").show();$("select").hide();$("select").toggle(speed, function(event) {}); // 参数均非必须，用于切换样式，speed 用于设置切换。相当于 show()、hide() 方法作用：通过增加样式 display: block/none 来实现显示或者隐藏。用法: $("select").show(执行时间， 回调函数) 其中： 执行时间：slow, normal, fast或毫秒数。 回调函数：动画执行完毕后要执行的函数。
（2）上下滑动式
$("select").slideDown();$("select").slideUp();$("select").slideToggle(speed, function(event) {});作用：通过增加样式 display: block/none 来实现显示或者隐藏。用法同show()方法。
（3）淡入、淡出
$("select").fadeIn();$("select").fadeOut();$("select").fadeToggle(speed, function(event) {});作用：参数可选，通过改变不透明度opacity、display来实现显示或者隐藏。$("select").fadeTo(speed,opacity,callback);作用：speed,opacity 参数必须，通过改变不透明度opacity来实现显示或者隐藏。用法同show()方法。
（4）自定义动画
animate(偏移位置， 执行时间，回调函数)其中： 偏移位置：必须，{}描述动画执行后元素的样式。 执行时间：可选，毫秒数。 回调函数：可选，动画执行结束后要执行的函数。形如： $("div").click(function(){ $("div").animate({"height" : "300px"},1000).animate({"width" : "300px"},1000).animate({"height" : "100px"},1000).animate({"width" : "100px"},1000); })
AJAX：Asynchronous JavaScript and XML，即异步的 JavaScript 和 xml。简单的理解为在不重载整个浏览器页面下，AJAX向后台发送请求并响应，将数据展示在页面上。
（1）$.ajax()
执行异步的 http 请求。
【格式：】$.ajax({ url:请求地址, type:请求类型POST|GET， data:提交的数据, async:同步或者异步(默认)处理,true（默认）|false。 dataType:预期服务器返回结果类型, success:成功时回调函数， error:失败时回调函数， beforeSend:请求发送前回调函数});【举例：】<script> $(function(){ //页面载入后，执行此方法 $("#showBtn").click(function(){ //id=showBtn的点击事件 var name = $("username").val(); $.ajax({ url:"https://www.baidu.com", type:"get", data:{"name":name}, //等价于"name=" + name success:function(result){ //result等价于xhr.responseText，即服务器返回的结果 $("msg").html(result); //返回html转换后的数据 $("msg").text(result); //返回文本数据 } }); }); });</script>
（2）$.get()
使用 Http 的 Get 发送请求并获取数据。
【格式：】 $.get(URL,data,function(response,status,xhr),dataType);其中： URL：必须，请求的地址。 data：可选，提交到服务器的数据。 dataType：可选，服务器返回的数据类型。 function：可选，response为返回的结果，status为返回的状态，xhr为 XMLHttpRequest 对象。
（3）$.post()
使用 Http 的 Post 发送请求并获取数据。
【格式：】 $.post(URL,data,function(response,status,xhr),dataType) 参数同 $.get()
（4）$("select").load()
从服务器加载数据，并放在指定元素上。
【格式：】 $("select").load(url,data,function(response,status,xhr))参数同 $.get()
联系客服
