JS库，别人写好的JS文件，我们拿来直接用，在开发中，会引入很多的.js文件
目前市面上有几个：
JQuery.js------濒临淘汰，经典。10%以下
React.js-------30%市场
Angular.js-----10%以下，最难
Vue.js---------50%以上，简单。最主流。（中国人的骄傲：尤雨溪编写的）
有人说啦，jquery都快淘汰了，学他干嘛。我想说：首先他是快淘汰了，还没淘汰，其次，经典的东西你不得看一看，了解了解。
jQuery库包含的特性：
HTML元素选取HTML元素操作CSS操作HTML事件函数特效+动画DOM遍历+修改AJAXUtilities
你要使用必须先导入库：
<script src="js/jquery-1.9.1.js"></script>
jQuery点击下载
目录
选择器：
事件（函数）：
HTML获取：
删除：
prop()方法+复选框案例
选择器：
事件（函数）：
什么时候触发
1、JQuery文档就绪函数在页面加载完毕之后触发。浏览器解析完HTML标签，window.onload，除了解析完HTML标签之外，等到浏览器创建好DOM对象
2、JQuery文档就绪函数可以执行多次，window.onload只能执行一次
文档就绪函数：
当页面的文档部分加载完毕之后，要执行的函数
$(document).ready(function(){alert("文档就绪函数");});//简写$(function(){alert("111");});//箭头函数：$(()=>{alert("箭头函数");});
窗口加载：
window.onload=function(){alert("3");}
jQuery把事件都变成了函数
HTML获取：
text()----设置或返回所选元素的文本内容html()----设置或返回所选元素的内容（包括HTML标记）val()------设置或返回表单字段的值,可以操作文本框,单选框,复选框,下拉菜单的选中状态等attr()------获取属性值，传入参数为属性$(".a").text();$(".a").html();$(".a").val();$(".a").attr("href");//获取class为a的href元素的属性值
赋值的话直接在括号里赋值或者添加回调函数,attr例外，attr可以传第二个参数给元素赋值,attr也可以给多个元素赋值:
$(".a").text("aaa");$(".a").html("aaa");$(".a").val("aaa");$(".a").attr("href","");$(".a").attr({"href":"","type":"text" });
回调函数：
$(".a").text(function(){alert("aaa");});//箭头函数：$(".a").text(()=>{alert("aaa");});
attr的回调函数
$("#a").attr("href",function(){alert("");});
HTML添加:
append()--- 谁的结尾插入什么内容appendTo()-内容添加在谁的结尾prepend()-- 谁的开头插入什么内容prependTo()-内容添加在谁的结尾after()------- 被选元素之后插入什么内容insertAfter()-内容在谁的后面添加before()----- 被选元素之前插入什么内容insertBefore()-内容在谁的之前插入replaceWith() --谁替换成什么replaceAll()------把后面所选元素替换成前面的xx
举个案例:
<!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><style>div {width: 600px;height: 200px;border: 1px solid;}p {background-color: yellow;}</style></head><body><div id="container"><h1 id="p123">123</h1><h1>333</h1></div><script src="js/jquery-1.9.1.js"></script><script>$(() => {$("<p>111</p>").appendTo($("#container"));$("<p>222</p>").prependTo($("#container"));$("<p>333</p>").insertAfter($("#container"));$("<p>444</p>").insertBefore($("#container"));$("#container").append($("<p>1000</p>"));$("#container").prepend($("<p>2000</p>"));$("#container").after($("<p>3000</p>"));$("#container").before($("<p>4000</p>"));//替换$("#p123").replaceWith($("<p>666</p>"));//全部替换$("<span>000</span>").replaceAll($("h1"));})</script></body></html>
删除：
remove() - 删除被选元素（及其子元素）empty() - 从被选元素中删除子元素remove()可以接收一个参数下面例子例意思为删除class="a"的所有<div>元素$("#div1").remove();$("#div1").empty();$("div").remove(".a");
prop()方法+复选框案例
prop()方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
//选中所有复选框选中alert($("input[type=checkbox]").prop("checked",true));//给id=sheng的添加属性：selectedalert($("#sheng").prop("selected"));
复选框案例：
效果：
代码：
<!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>您爱好的运动是？<input type="checkbox" id="xx">全选/全不选<br><br><br><input type="checkbox" id="a" value="zu">足球<input type="checkbox" id="a" value="lan">篮球<input type="checkbox" id="a" value="yu">羽毛球<input type="checkbox" id="a" value="ping">乒乓球<br><br><br><input type="button" id="all" value="全选"><input type="button" id="noAll" value="全不选"><input type="button" id="fan" value="反选"><script src="js/jquery-1.9.1.js"></script><script>//多选框全选$("#xx").click(()=>{$("input").prop("checked",$("#xx").prop("checked"));});//按钮全选$("#all").click(()=>{$("input").prop("checked",true);});//按钮全不选$("#noAll").click(()=>{$("input").prop("checked",false);});//反选:$("#fan").click(()=>{$("input[id=a]").each((index,item)=>{item.checked=!item.checked;let x=$("input[id=a]:checked").length;let y=$("input[id=a]").length;$("#xx").prop("checked",x==y);}); });//选择四个复选框全选择了，全选的复选框会被选中$("input[id=a]").click(()=>{let x=$("input[id=a]:checked").length;let y=$("input[id=a]").length;$("#xx").prop("checked",x==y);});</script></body></html>
