jQuery简介
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画操作更加简单。
jQuery最大的优点就是简化DOM操作
官网文档：jQuery
jQuery版本说明
jQuery分为三个大版本：1.x 2.x 3.x
1.x版本
兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x版本
不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x版本
不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.6.0
jQuery重点讲解知识点
选择器
DOM操作
CSS操作
事件处理
遍历
动画
如下是使用JavaScript修改内容
<!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>
<div id="root">新年快乐</div>
<script>
var root = document.getElementById("root")
root.innerHTML = "大展宏图"
</script>
</body>
</html>如下是使用jQuery修改内容
<!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>
<script src="./jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="root">新年快乐</div>
<script>
$("#root").html("2023年")
</script>
</body>
</html>一、jQuery之选择器
JavaScript基础选择器的实现
<!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>
<div class="container">类选择器</div>
<span>元素选择器</span>
<a id="root" href="#">ID选择器</a>
<script>
// 类选择器
var container = document.getElementsByClassName("container")[0]
container.innerHTML = "JS类选择器"
// 元素选择器
var span = document.getElementsByTagName("span")[0]
span.innerHTML = "JS元素选择器"
// ID选择器
var root = document.getElementById("root")
root.innerHTML = "JS的ID选择器"
</script>
</body>
</html>
jQuery选择器的实现
基础选择器：类选择器 ID选择器 元素选择器
属性选择器：完美匹配 前缀(|) 包含(*) 空格(~) 开头(^) 结尾($)
<!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>
<script src="./jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="container">类选择器</div>
<span>元素选择器</span>
<a id="root" href="#">ID选择器</a>
<ul class="navtop">
<li>item1</li>
<li>
<ul>
<li>child-item1</li>
<li>child-item1</li>
<li>child-item1</li>
</ul>
</li>
<li>item3</li>
</ul>
<div>
<input type="radio" name="user" value="username" />
<span>name</span>
</div>
<div>
<input type="radio" name="user" value="age" />
<span>age</span>
</div>
<a href="#" alt="sxt">sxt</a>
<a href="#" alt="sxt-itbaizhan">sxt-itbaizhan</a>
<a href="#" alt="sxtitbaizhan">sxtitbaizhan</a>
<a href="#" alt="itbaizhan">itbaizhan</a>
<a href="#" alt="sxt itbaizhan">sxt itbaizhan</a>
<script>
// 类选择器
$(".container").html("jQuery类选择器")
// 元素选择器
$("span").html("jQuery元素选择器")
// ID选择器
$("#root").html("jQuery的ID选择器")
// 子代选择器 .css("属性"，"属性值")
$(".navtop > li").css("border","1px solid red")
// 后代选择器
$(".navtop li").css("border","1px solid red")
// 属性选择器（完美匹配）
// .next()是同一目录下的下一个标签
// .html()等同于JavaScript 的innerHTML()
$("input[value = 'username']").next().html("username")
// 属性选择器 前缀（-）
$("a[alt |= 'sxt']").css("border","2px solid red")
// 属性选择器 包含即可
$("a[alt *= 'sxt']").css("border","2px dashed green")
// 属性选择器 包含空格中任意一个单词
$("a[alt ~= 'sxt']").css("border","2px dotted red")
// 属性选择器，以给定字符开始
$("a[alt ^= 'sxt']").css("border","2px double orange")
// 属性选择器，以给定字符结束
$("a[alt $= 'baizhan']").css("border","2px dashed pink")
</script>
</body>
</html>jQuery扩展选择器：
:eq(index) :odd :even :first :last :gt(index) :lt(index)
<!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>
<script src="./jquery-1.12.4.min.js"></script>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
<table border="1">
<tr>
<td>Row #1</td>
</tr>
<tr>
<td>Row #1</td>
</tr>
<tr>
<td>Row #1</td>
</tr>
</table>
<table border="1">
<tr>
<td>item #0</td>
<td>item #1</td>
<td>item #2</td>
</tr>
<tr>
<td>item #3</td>
<td>item #4</td>
<td>item #5</td>
</tr>
<tr>
<td>item #6</td>
<td>item #7</td>
<td>item #8</td>
</tr>
</table>
<script>
// jQuery扩展选择器 :eq(index)
// index 是下标，下标从0 开始
$("li:eq(2)").css("border","2px dashed green")
// jQuery扩展选择器 :even 偶数 从0开始
$("li:even").css("border","3px solid red")
// jQuery扩展选择器 :odd 奇数
$("li:odd").css("border","2px dotted orange")
// jQuery扩展选择器 :first 选择第一个(效果看第一个table)
$("tr:first").css("background-color","orange")
// jQuery扩展选择器 :last 选择最后一个（效果看第一个table）
$("tr:last").css("background-color","greenyellow")
// jQuery扩展选择器 :gt(index) 选择大于index的 （效果看第二个table）
$("td:gt(5)").css("background-color","red")
//jQuery扩展选择器 :lt(index) 选择小于index的 （效果看第二个table）
$("td:lt(5)").css("background-color","pink")
</script>
</body>
</html>二、jQuery之DOM操作
js操作添加class
<!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>
<div class="container">Hello</div>
<script>
var div = document.getElementsByTagName("div")[0]
// 增加class 会覆盖原来的class
div.className = "text success"
// 清空class如下
div.className = ""
</script>
</body>
</html><jQuery_DOM操作添加class
1.addClass()：添加class
2.removeClass()：移除class
3.toggleClass()：验证有没有class，有的话删除，没有的话就增加
4.hasClass()：验证有没有class，返回布尔值