【jQuery】学习笔记(一)
jQuery 是一个常用的 JavaScript 库，简单易学，极大简化的编程。虽然这几年受到了来自 vue.js, React.js 等前端技术的冲击，但这不能改变 jQuery 在前端中的地位和价值。
安装
有两个方法可以实现安装jQuery：下载或通过 CDN（内容分发网络）。
去jquery官网下载所需的版本，保存在本地后在html文件的 head 中引入。
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>通过CDN（内容分发网络）则只需要在 head 中直接引入即可。
官方提供了各个版本的CDN：https://code.jquery.com/
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
</head>语法
jQuery的语法非常简单。基础语法如下：
$(selector).action()$美元符号定义 jQuery；(selector)为选择器，用来“查询”和“查找”HTML 元素；action()对选择器确定的元素进行操作或触发事件。
(selector) 和 action() 之间用“.”连接。如果要触发多个事件则可以多次使用 action() ，例如：
$(selector).action().action().action()看一个实例：
$("img").hide() //隐藏该页面的所有 img 标签的元素如果在页面的dom元素未完全加载完毕前就执行了jQuery语句，可能会发生一些未知的错误。为了保证jQuery语句被执行前，所有的dom元素都已经被加载完毕，需要将jQuery语句写入ready 函数中：
//当 document 加载完毕后执行 jQuery
$(document).ready(function(){
// 开始写 jQuery 代码...
});可以简写为：
$(function(){
// 开始写 jQuery 代码...
});选择器
jQuery 选择器通过标签，id，类(class)等查找元素。
标签选择器
通过标签名查找元素。
$('标签名').action();
//例子
$('p').hide(); //隐藏所有html标签为p的元素
$('a').show(); //显示所有html标签为a的元素id 选择器
通过id查找元素。前提是该查找的元素已经设置了id，并且id必须全局唯一。
$('#id').action();
//例子
$('#content').hide(); //隐藏id为content的元素
$('#text').show(); //显示id为text的元素类选择器
通过class查找元素。一般用于相同类的多个元素的查找。
$('.class').action();
//例子
$('.content').hide(); //隐藏所有class为content的元素
$('.text').show(); //显示所有class为text的元素其他选择器
| 选择器 | 选取内容 |
|---|---|
| $("*") | 选取所有元素 |
| $(this) | 选取当前 HTML 元素 |
| $("a.content") | 选取class为content的 a标签 元素 |
| $("p:first") | 选取第一个 p标签 元素 |
| $("a:even") | 选取偶数位置的 a标签 元素 |
| $("a:odd") | 选取奇数位置的 a标签 元素 |
事件
事件触发的基础语法如下：
$(selector).click(function(){
// 动作触发后执行的代码!!
});这里click()为一个事件（触发器），如果选定元素被点击了，那么就会触发之后的代码中的操作。当然，如果没有后续执行的内容，则可以写为：
$(selector).click();常用的事件有：click()，dblclick()，mouseenter()，mouseleave()，hover()，submit().
| 触发器 | 触发条件 |
|---|---|
| click() | 单击 |
| dblclick() | 双击 |
| mouseenter() | 鼠标移入 |
| mouseleave() | 鼠标移出 |
| hover() | 鼠标悬停 |
| submit() | 表单提交 |
举例1：click事件
//当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素
$("p").click(function(){
$(this).hide();
});举例2：mouseenter事件
//当鼠标指针进入id为p1的元素时，浏览器弹出内容为“你好！”的弹窗。
$("#p1").mouseenter(function(){
alert('你好！');
});举例3：hover事件
//当鼠标进入在id为p1的元素时，浏览器弹出内容为“欢迎”的弹窗；
//当鼠标离开id为p1的元素时，浏览器弹出内容为“拜拜”的弹窗；
$("#p1").hover(
function(){
alert("欢迎");
},
function(){
alert("拜拜");
}
);注意：hover事件需要两个function()，一个为鼠标进入时的函数，一个为鼠标离开时的函数。
