html 之 jQuery库
一、jQuery介绍
1、库就类似于是Python中的模块，简称为jq
2、jQuery就是js、css等的封装版本，只要一封装，写法较简单
3、jQuery是一个轻量级的、兼容多浏览器的JavaScript库，封装版本的js。
4、jq的优势
-
简化 DOM 操作： jQuery 提供了简单易用的选择器和 DOM 操作方法，使得在 HTML 文档中查找元素、修改元素属性、样式、内容等操作变得非常简单。
-
跨浏览器兼容性： jQuery 能够处理不同浏览器之间的差异，使开发者不必为了适应不同浏览器而写大量的兼容性代码。
-
动画和效果： jQuery 提供了丰富的动画和效果方法，帮助开发者轻松实现页面元素的淡入淡出、滑动、展开等效果，使页面更具交互性。
-
AJAX 支持： jQuery 简化了 AJAX 调用，使得通过 JavaScript 和服务器进行数据交换变得更加简单，能够轻松实现异步加载数据和无刷新页面。
-
事件处理： jQuery 提供了方便的事件处理方法，能够轻松绑定和解绑事件，简化了事件处理的过程。
-
插件丰富： jQuery 生态系统中有大量的插件可供使用，这些插件提供了各种各样的功能，包括图表绘制、表单验证、日期选择等，极大地丰富了开发者的选择。
-
轻量级： 尽管功能强大，jQuery 本身的文件大小相对较小，这有助于加快页面加载速度，并降低网络传输成本。
-
易于学习和上手： jQuery 的语法简单明了，对于初学者来说学习曲线较为平缓，开发者可以快速上手使用 jQuery 开发网页。
-
社区支持： jQuery 拥有庞大的社区支持，开发者可以轻松找到解决问题的资源和文档。
5、jq的版本
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，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
6、学习网站
官方网站：https://jquery.com/
中文文档：https://jquery.cuishifeng.cn/
jquery (v3.6.4) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
二、jQuery 对象
1、jQuery对象就是通过jQuery包装DOM对象后产生的对象
2、标签对象:直接就是通过各种选择器得到的标签
# 标签对象不能够直接使用jQuery库提供的很多方法
3、jQuery基础语法
$的含义
jQuery("#i1").html();
$("#i1").html();
# 以上两行代码的意思是一样的
jQuery === $
# 以后的代码里都使用$符号代替jQuery
jQuery基础语法
jQuery("selector").action();
$("selector").action();
4、基本选择器
id、class、标签选择器
var div1 = $("#d1"); ----------->S.fn.init [div#d1]-------->jQuery对象
var div = document.getElementById('d1');--->拿到的是一个标签对象
# jQuery对象和标签对象之间的相互转换
jQuery对象转为标签对象----------------->直接通过索引取值得到标签对象
标签对象转为jQuery对象---->$(document.getElementById('d1')) --->使用jQuery把DOM包起来-------->就可以使用jQuery提供的方法了
var div = document.getElementsByClassName('c1')[0];
var div1 = $(".c1");
console.log(div1);
var div = $('div');
console.log(div);
# 配合使用的
$("div.c1") // 找到有c1 class类的div标签
$('div#d1')
# 通用选择器
$("*")
组合选择器
$('#d1,.c1,p') # 并列+混用
$('div span') # 后代
$('div>span') # 儿子
$('div+span') # 毗邻
$('div~span') # 弟弟
基本筛选器
三、