jQuery
1.jQuery一统江湖10年，只是js封装，现今已经开始衰落，已经不作为重点，Vue替代(封装) Vue底层会使用一些jQuery语法。
在js上做了很多工作，代码更加简洁，新的特性 ajax封装
ajax它可以访问后台(java) 访问京东网站，获取商品信息，价格
3.使用jQuery
1)下载jQuery.js文件
javascript已经被集成到各大浏览器中，所以开发者是可以直接使用
jQuery是第三方发明，必须额外引入js文件支持
jQuery 作用是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号替代 document
选择器（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
2)怎么加入页面中？
<script src= "jquery.min.js">
jquery.min.js 压缩，核心代码是一行，换行，空格都去掉
3)利用它来实现dom树操作，替代JavaScript基本函数
document.getElementById("username");
$("username")
document $()
getElementById #
document.getElementsByClassName("msg")
$(".msg")
$(选择器).执行的动作
var msg = ...
msg.innerText innerHTML
$("msg").text(); .html();
value .val();
jQuery有多简洁呢？
jQuery和JS相比：
1）简写，代码量急剧下降
2）选择器，快速查找页面上的元素，非常丰富
3）jquery提供一套新的方法或者属性（不好，学习成本，需要单独记忆）
JavaScript获取元素的4种方式：
var ele = document.getElementsByTagName("p"); //标签 36
var ele = document.getElementsByName("username"); //名称 50
var ele = document.getElementsByClassName("info"); //样式
var ele = document.getElementById("username"); //id属性
jQuery选择器获取元素的4种方式：
var ele = $("p"); //访问标签 18
var ele = $('input[name="username"]'); //访问名称 39
var ele = $('input[type="text"]'); //访问text框
var ele = $(':text'); //访问text框
var ele = $(".info"); //访问css的class样式
var ele = $("#username"); //访问id属性
可以看出jQuery本质其实就是简化了js的写法，用$替代了document.getXxx，代码简洁，清爽。
使用之前的案例，我们进行改造对比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
body{
width: 300px;
margin:20px;
}
button{
margin-top: 5px;
margin-right: 20px;
margin-left: 20px;
}
</style>
</head>
<body>
<div>
<h2 class = "msg">登录</h2>
<!--输入框-->
<div class="form-group">
<label>用户名:</label>
<input type="text" class="form-control" name="username" id="username" autocomplete="off" autofocus="autofocus"
placeholder="请输入用户名..." ; />
</div>
<div class="form-group">
<label>密码:</label>
<input type="password" class="form-control" name="password" id="password" placeholder="请输入密码..." />
</div>
<!--button按钮-->
<div class="form-group" align="center">
<button class="btn btn-primary" onclick="doSubmit()">提交</button>
<button class="btn btn-danger">取消</button>
<!--button按钮-->
</div>
</div>
</body>
<script>
//按钮标签onclick事件，单击才是触发
//οnclick="doSubmit()" 点击后去执行doSubmit()函数 (方法)
//点击提交按钮出发事件 doSubmit()，自定义一个函数
function doSubmit() {
//获取页面的用户名，获取数组的第一个元素
var username = document.getElementsByName("username")[0]; //获取这个对象的值
//获取唯一，html规范，标签的id属性，在页面声明时,必须唯一
var username = document.getElementById("username");
console.log(username.value); //这个对象他的值
//<div class = "msg">登录成功</div>
//标签的class属性进行访问 msg dic
var msg = document.getElementsByClassName("msg")[0];
console.log(msg.innerText);
//msg.innerText="登录成功，欢迎" + username.value();
msg.innerHTML="<font color='red'>登录成功，欢迎"+username.value+"</font>";
}
</script>
</html>
使用jQuery改造
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
body{
width: 300px;
margin:20px;
}
button{
margin-top: 5px;
margin-right: 20px;
margin-left: 20px;
}
</style>
<!--引入js-->
<script src="js/jquery.min.js"></script>
</head>
<body>
<div>
<h2 class = "msg">登录</h2>
<!--输入框-->
<div class="form-group">
<label>用户名:</label>
<input type="text" class="form-control" name="username" id="username" autocomplete="off" autofocus="autofocus"
placeholder="请输入用户名..." ; />
</div>
<div class="form-group">
<label>密码:</label>
<input type="password" class="form-control" name="password" id="password" placeholder="请输入密码..." />
</div>
<!--button按钮-->
<div class="form-group" align="center">
<button class="btn btn-primary" onclick="doSubmit()">提交</button>
<button class="btn btn-danger">取消</button>
<!--button按钮-->
</div>
</div>
</body>
<script>
function doSubmit() {
//var username = document.getElementById("username");
//console.log(username.value);
//通过jQuery选择器#username，找到页面input，val()获取到这个框中的值
var username = $("#username").val();
//var msg = document.getElementsByClassName("msg")[0];
//console.log(msg.innerText);
console.log($(".msg").text());//获取div的文字
//msg.innerHTML="<font color='red'>登录成功，欢迎"+username.value+"</font>";
$(".msg ").text("登录成功，欢迎:"+$("#username").val());//设置新的文字
$(".msg").css("color","red"); //.css代表动态设置它的样式 (k,v)结构
}
</script>
</html>
可以看出jQuery不仅是写法简单，还提供了很多增强方法这些比原生的简洁，当然也体现了极大一个缺点，它的方法和原生的js不同，带来了一定的学习成本。
下载安装 node-v12.18.1 -x64.msi
链接：https://pan.baidu.com/s/18lz4KW1GbedODs-sKHHlRw
提取码：j3gl
选择安装路径
剩下的直接next
安装完成…
典型案例
绑定事件 jq-click.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定按钮</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div>
<!--前期绑定-->
<button id="zfbPay" onclick="zfbPay()">支付宝支付</button>
<!--//后期绑定-->
<button id="wxPay">微信支付</button>
</div>
</body>
<script>
//自定义一个js的函数
function zfbPay(){
//1.把按钮消失
//$("#zfbPay").hide(); //隐藏方法
//2.把按钮禁止
$("#zfbPay").attr("disabled",true);
$("#zfbPay").text("您以支付成功,不要再次点击，请稍后！")
}
//后期绑定，利用jQuery代码给上面按钮加一个事件
//匿名函数function() 好处就是私有，其他线程无法访问，线程安全
$("#wxPay").click(function(){
//1.把按钮消失
//$("#wxPay").hide();
//简写: $(this)代表当前对象，微信按钮
$(this).hide();
})
</script>
</html>
网页效果：
按钮禁止
按钮消失
多个复选框全选和取消
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多个复选框全选和取消</title>
<script src="js/jquery.min.js"></script>
<style>
body{
width: 350px;
}
button{
margin-top: 10px;
margin-left: 60px;
}
</style>
</head>
<body>
<h1>多个复选框全选和取消</h1>
<div >
喜欢颜色：
<input type="checkbox" id="ckColor"> 红色
<input type="checkbox" id="ckColor"> 绿色
<input type="checkbox" id="ckColor"> 蓝色
<input type="checkbox" id="ckColor"> 黄色
</div>
<div style="margin:10px;">
<button id="selectAll">全选</button>
<button id="unSelectAll">取消</button>
</div>
</body>
<script>
//属性：attr，prop 1.6扩展，1.9 attr只能生效一次
//实现按钮的后期绑定
$("#selectAll").click(function() {
//获取到页面上所有ckColor（多个元素）
$("[id=ckColor]").prop("checked", true); //打钩
})
$("#unSelectAll").click(function() {
$("[id=ckColor]").prop("checked", false); //去掉打钩
})
</script>
</html>
网页效果：
全选
取消
