零.前言
在学习JQuery前，您需要具备以下知识：
- HTML相关知识(DOM)
- CSS相关知识
- JavaScript相关知识
一.JQuery
1.1JQuery简介
JQuery是一个JavaScript的“函数库”，不是JavaScript的一个框架，与“VUE、REACT”有本质区别！
(为方便起见，后续的JQ全部代指JQuery)
JQuery设计的初衷是：“方便对DOM对象的操作以及对DOM对象进行更精细的操作”
在“VUE、REACT”等框架出现之前，JQ曾经统治过一整个时代，即使现在JQ相对落后，但学习JQ仍然是有必要的，学习JQ后可以帮我们精简代码(偷偷懒)
JQuery具有以下功能：
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数设计、绑定
- JavaScript特效和动画
- HTML DOM的遍历和修改
- AJAX
1.2JQuery的安装
JQ作为JS的一个“函数库”，并不集成于JS中，而是作为一个外部库，需要我们自行安装使用。
安装方式有两种：“本地安装”、“网络安装”
“本地安装”的优点是用户启动快，将JQ库集成在项目中。缺点是可能占点小空间(也可以忽略不计)
使用方法：
在<head>标签中，使用<script>的“src”属性，导入本地JQ文件的路径：
<script src="本地JQ.js文件的路径"></script>“网络安装”的优点是用户启动可能较慢，因为需要用户先到“网络共享器”中下载JS库，再启动项目，不过当今的主流浏览器都内置了JQ文件，可以忽略不计。
使用方法：
在<head>标签中，使用<script>的“src”属性，写入“网络JS共享器的URL”
对于“URL”有很多，可以使用国内的：“抖音”、“阿里”的URL，也可以使用官方的URL。
官网地址：
jQuery CDN
在这里我们可以选择需要的JQ地址，其中有四个版本：“uncompressed”、“minified”、“slim”、“slim minified”四个版本。
四个版本的功能性依次下降，所占体积依次下降。
点击需要的版本，可以弹出URL：
二.JQuery语法
2.1JQ语法介绍
JQ语法相对简单，有JS基础的可以立刻上手：
“$(selector).action()”
其中：
- “selector”是“选择器”，用来表示选取的是哪一个(种)元素
- “action()”是“操作”，用来表示对选取的元素进行何种操作
- “$”是“定义JQ”，用来定义JQ语句
2.2JQ选择器
JQ语法中的“选择器”，与JS基本相同，下面来学习“元素选择器”共四种：
“this选择器”、“标签选择器”、“类选择器”、“id选择器”：
- $(this).hide() ：隐藏当前元素(this指针代指当前元素)
- $("p").hide()：隐藏<p>元素
- $(".test").hide()：隐藏类名为“test”的所有元素
- $("#test").hide()：隐藏id为“test”的元素
可以看到，四个选择器的使用方式与JS一模一样
2.3文件就绪函数【重要】
在实际应用中，你会发现很多JQ语句都被包含在了一个“$(document).ready()”函数中：
$(document).ready(function(){
//JQ操作
})这个函数叫作：“文件就绪函数”，作用是：“防止文档在完全加载(就绪)之前就运行JQuery代码，从而出错”
下面是两个失败的例子：
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
下面再给出一个“点击按钮后，<p>段落消失的例子”，里面用到了“文件就绪函数”，可以好好体会一下
<body>
<p id="sample">我在按钮被点击后会消失</p>
<button onclick="click">点击我</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#sample").hide()
})
})
</script>
</body>2.4更多的JS选择器
除了上面所说的“元素选择器”以外，在JQ中还有：“属性选择器”、“CSS选择器”、“混合选择器”
“属性选择器”可以使用“XPath”表达式选择带有特定属性的元素：
- $("[href]")：选取所有带有“href”属性的元素
- $("[href='#']")：选取所有带有“href”属性且属性值为“#”的元素
- $("[href!='#']")：选取所有带有“href”属性且属性值不为“#”的元素
- $("[href$='.jpg']")：选取所有href值以“.jpg”结尾的元素
“CSS选择器”可用于改变HTML元素的CSS属性：
$("p").css("background-color","red")上述例子用来改变<p>标签的背景颜色
“混合选择器”可将“id选择器”、“类选择器”、“标签选择器”等所有选择器混合一起使用
混合规则：“从左到右，依次翻译”
- $("div#intro.head")：id="intro"的<div>标签的所有class="head"的元素
三.JQ事件
3.1JQ事件简介
JQ可以实现将某个元素与JQ(JS)事件函数绑定在一起，从而实现复杂功能
常见的事件有：“鼠标点击”、“鼠标移动”、“快捷键”等等
官方给出的内置事件函数基本可以供我们日常使用，较复杂的功能且动手能力强的可以：“自定义事件函数”
JQ事件处理跟JS使用DOM对象绑定事件函数几乎一样
3.2JQ事件使用
给出一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="sample">我在按钮被点击后会消失</p>
<button onclick="click">点击我</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#sample").hide()
})
})
</script>
</body>
</html>这段代码将“click()事件函数绑定给了<button>标签
3.3常见的事件汇总
下面给出一些常见的事件汇总，更完全的事件请参考“JQ文档”：
jQuery 参考手册 - 事件 (w3school.com.cn)
| 事件函数 | 效果 |
|---|---|
| $(document).ready(function) | 当文档就绪后 |
| $(selector).click(function) | 当被绑定元素被点击后 |
| $(selector).dbclick(function) | 当被绑定元素被双击后 |
| $(selector).focus(function) | 当被绑定元素获得焦点时 |
| $(selector).mouseover(function) | 当鼠标悬停在被绑定元素时 |
