JS库，别人写好的JS文件，我们拿来直接用，在开发中，会引入很多的.js文件
目前市面上有几个：
JQuery.js------濒临淘汰，经典。10%以下
React.js-------30%市场
Angular.js-----10%以下，最难
Vue.js---------50%以上，简单。最主流。（中国人的骄傲：尤雨溪编写的）
有人说啦，jquery都快淘汰了，学他干嘛。我想说：首先他是快淘汰了，还没淘汰，其次，经典的东西你不得看一看，了解了解。
jQuery库包含的特性：
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- 特效+动画
- DOM遍历+修改
- AJAX
- Utilities
你要使用必须先导入库：
<script src="js/jquery-1.9.1.js"></script>目录
选择器：
| 基本选择器 | id选择器 | 返回值是固定的一个 |
| class选择器 | 返回值是一堆 | |
| 标签选择器 | 返回值是一堆 | |
| *号选择器 | 返回值是所有标签 | |
| 层级选择器 | div p | div里的p--后代 |
| div>p | 直接子元素 | |
| div+p | 相邻子元素 | |
| 过滤选择器 | :first | 获取第一个元素 |
| :last | 获取最后一个元素 | |
| :eq(index) | 给定位置的元素 | |
| :gt(index) | 大于给定位置 | |
| :lt(index) | 小于给定位置 | |
| :not(selector) | 除了selector以外的所有选择器 | |
| 内容选择器 | :empty | 匹配所有不包含子元素的选择器 |
| :parent | 含有子元素的父元素 | |
| 属性选择器 | [name] | 包含name属性的元素 |
| input[type=text] | 所有文本框 | |
| input[type!=text] | 除了文本框之外的input标签 |
事件（函数）：
什么时候触发
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把事件都变成了函数
click() |
单机事件 |
| mouseover() | 鼠标悬停 |
| blur() | 失去焦点 |
| change() | 改变事件 |
| live() | 它可以来绑定选择器匹配的元素的事件，哪怕这个元素是后面动态创建出来的 |
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","www.baidu.com");
$(".a").attr({"href":"www.baidu.com"
,"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的添加属性：selected
alert($("#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>