JQuery：
- jQuery 是一个 JavaScript 库。
- 所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就 是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。
- jQuery 官网：https://www.jquery.com
- 使用必须要引入jQuery的文件
- jQuery的语法：$();
快速入门：
<body>
<div id="div">我是div</div>
</body>
<!--引入 jQuery 文件-->
<script src="js/jquery-3.3.1.min.js"></script>
<script>
// JS方式，通过id属性值来获取div元素
let jsDiv = document.getElementById("div");
alert(jsDiv);
alert(jsDiv.innerHTML);
// jQuery方式，通过id属性值来获取div元素
let jqDiv = $("#div");
alert(jqDiv);
alert(jqDiv.html());
</script>
JS对象和JQuery对象转换：
jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DOM 对象，二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换。
JQuery 对象 [索引];
JQuery 对象.get(索引);
JS 的 DOM 对象转换成 jQuery 对象
//$(JS 的 DOM 对象);
// JS方式，通过id属性值获取div元素
let jsDiv = document.getElementById("div");
alert(jsDiv.innerHTML);
//alert(jsDiv.html()); JS对象无法使用jQuery里面的功能
// 将 JS 对象转换为jQuery对象
let jq = $(jsDiv);
alert(jq.html());
jQuery 对象转换成 JS 对象
/*jQuery 对象[索引];
jQuery 对象.get(索引);*/
// jQuery方式，通过id属性值获取div元素
let jqDiv = $("#div");
alert(jqDiv.html());
// alert(jqDiv.innerHTML); jQuery对象无法使用JS里面的功能
// 将 jQuery对象转换为JS对象
let js = jqDiv[0];
alert(js.innerHTML);
事件的基本使用：
在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。
常用的事件
代码实现：
<body>
<input type="button" id="btn" value="点我">
<br/>
<input type="text" id="input">
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
// 单击事件
$("#btn").click(function () {
alert("点我弄啥啊")
});
// 获取焦点事件
$("#input").focus(function () {
alert("请输入数据")
});
// 失去焦点事件
$("#input").blur(function () {
alert("谢谢输入")
});
</script>
时间的绑定和解绑：
绑定事件： jQuery 对象.on(事件名称,执行的功能);
解绑事件： jQuery 对象.off(事件名称);
如果不指定事件名称，则会把该对象绑定的所有事件都解绑
<body>
<input type="button" id="btn1" value="点我">
<input type="button" id="btn2" value="解绑">
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
// btn1绑定单击事件
$("#btn1").on("click", function () {
alert("弄啥啊")
});
// 通过btn2解绑btn1的事件
$("#btn2").on("click", function () {
$("#btn1").off("click");
});
</script>
时间的切换：
事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系。
$(元素).事件方法名1(要执行的功能);
$(元素).事件方法名2(要执行的功能);
<script>
// 方式一：单独定义
$("#div").mousemove(function () {
// 添加背景色 黑色
// $("div").css("background", "black")
$(this).css("background", "black") //简写
});
$("#div").mouseout(function () {
// 背景色 蓝色
// $("#div").css("background", "blue");
$(this).css("background", "blue")
});
</script>
$(元素).事件方法名1(要执行的功能)
.事件方法名2(要执行的功能);
//方式二 链式定义 也就是在第一个事件没结束可以直接在后面使用
$("#div").mouseover(function () {
$(this).css("background", "red");
}).mouseout(function () {
$(this).css("background", "blue");
});
遍历操作：
for(let i = 0; i < 容器对象长度; i++){
执行功能;
}
<body>
<input type="button" id="btn" value="遍历列表项">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
//方式一：传统方式
$("#btn").click(function () {
let lis = $("li");
for (let i = 0; i < lis.length; i++) {
alert(i + ":" + lis[i].innerHTML);
}
});
</script>
容器对象.each(function(index,ele){
执行功能;
});
//方式二：对象.each()方法
$("#btn").click(function () {
let lis = $("li");
lis.each(function (index, ele) {
alert(index + ":" + ele.innerHTML);
});
});
$.each(容器对象,function(index,ele){
执行功能;
});
//方式三：$.each()方法
$("#btn").click(function () {
let lis = $("li");
$.each(lis, function (index, ele) {
alert(index + ":" + ele.innerHTML);
});
});
for(ele of 容器对象){
执行功能;
}
//方式四：for of 语句遍历
$("#btn").click(function () {
let lis = $("li");
for (ele of lis) {
alert(ele.innerHTML);
}
});