一、概念及使用
1. 概念
jQuery 提供了强大的选择器函数，可以快速获取页面的标签，jQuery 提供了大量的DOM操作的API(封装了许多可以直接操作DOM的方法)、jQuery 提供了比较丰富的动画函数、让实现业务的编码写的更快。
2. 使用方法
进入https://jquery.com/官网下载
3. 使用步骤
3.1 下载jquery文件
3.2 引入jquery文件
3.3 编写jquery代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<style></style>
<script>
// 加载页面完成时触发事件
window.onload = function () {
}
</script>
</head>
<body>
<h3>hell</h3>
<!-- 引入jquery文件 -->
<script src="../js/jquery-3.7.1.js"></script>
<script>
// 编写代码
$("h3").css("color", "red")
$(function () {
// 设置字体颜色变成红色
$("h3").css("color", "red")
})
//
// jQuery 本质也是javascript
</script>
</body>
</html>二、DOM操作
jQuery提供选择标签的方法、jQuery提供设置标签样式、文本、属性、类名的方法等、jQuery提供渲染html文本，删除标签，添加标签的方法等。
1. 选择器函数
2. 获取子元素
3. 获取父元素
4. 获取指定标签
5. 获取前一个元素
6. 获取后一个元素
7. 兄弟标签
8. 设置文本
9. 设置属性
10. 设置类名
11. 渲染标签
12. 清空标签
13. 删除标签
三、事件
四、动画
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画</title>
<style>
.title {
width: 800px;
height: 40px;
background-color: #f0f0f0;
margin-bottom: 10px;
margin-top: 10px;
}
.title button {
height: 40px;
width: 200px;
}
[class^='box'] {
width: 200px;
height: 200px;
background-color: deepskyblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="title">
<button class="btn1">显示(show)</button>
<button class="btn2">隐藏(hide)</button>
<button class="btn3">切换（开关）</button>
</div>
<div class="box1">box1</div>
<div class="title">
<button class="btn4">淡入(fadeIn)</button>
<button class="btn5">淡出(fadeOut)</button>
</div>
<div class="box2">box2</div>
<div class="title">
<button class="btn6">下拉(slideDown)</button>
<button class="btn7">卷起(slideUp)</button>
</div>
<div class="box3">box3</div>
<div class="title">
<button class="btn8">自定义动画(animate)</button>
<button class="btn9">还原</button>
</div>
<div class="box4">box4</div>
<script src="./libs/jq/jquery-3.7.1.js"></script>
<script>
// 1) show 和 hide 的动画主要是改变元素的宽度和高度和display属性。
$(".btn1").on("click", function(){
$(".box1").show(1000)
})
$(".btn2").on("click", function(){
$(".box1").hide(1000)
})
$(".btn3").on("click", function(){
$(".box1").toggle(1000)
})
// 2） fadeIn 和 fadeOut 主要改变元素的透明度和display属性。
$(".btn4").on("click",function(){
$(".btn2").fadeIn(1000)
})
$(".btn5").on("click",function(){
$(".btn2").fadeOut(1000)
})
// 3） slideDown 和 slideUp 主要改变元素的高度和display属性。
$(".btn6").on("click",function(){
$(".box3").slideDown(1000)
})
$(".btn7").on("click",function(){
$(".box3").slideUp(1000)
})
// 4） animate 可以自定义动画（和我们之前封装的animate极其相似）。
$(".btn8").on("click",function(){
$(".box4").stop().animate({
width: "100px",
height:"100px",
borderRadius: "30px",
marginLeft: "200px"
},1000)
})
$(".btn9").on("click", function () {
$(".box4").stop().animate({
width: "200px",
height:"200px",
borderRadius: "0px",
marginLeft: "0px"
},1000)
})
</script>
</body>
</html>