JQUERY
JQuery简介
jQuery是什么？有什么用，跟js的关系
jQuery是一个JavaScript库，它简化了客户端JavaScript编程的过程，特别是针对HTML文档遍历和操作、事件处理、动画效果和Ajax操作。
使用jQuery可以更容易地编写可维护的JavaScript代码，同时提高了跨浏览器的兼容性
jQuery安装方式
三种方法
1.从官网下载 jQuery 库，然后引入到页面中。
2.使用命令安装 jQuery，例如 npm install jquery
3.从 CDN 中载入 jQuery， 比如从 百度 中加载 jQuery。
jQuery引入方式
引入位置尽量靠前
jQuery选择器
1.基本选择器
$("#id") //ID选择器
$("div") //元素选择器
$(".classname") //类选择器
$(".classname,.classname1,#id1") //组合选择器
2.层次选择器
$("#id>.classname ") //子元素选择器
$("#id .classname ") //后代元素选择器
$("#id + .classname ") //紧邻下一个元素选择器
$("#id ~ .classname ") //兄弟元素选择器
jQuery CSS设置
1.单条css如何设置
$(".box").css("backgroundColor","red");//这个方法只能添加一个属性
2.多条css同时，如何设置
$(".box").css({backgroundColor:"red",fontSize:"20px:});//这个方法可以添加多个CSS样式属性
文档处理
append,prepend,after,before
//添加元素 append(),prepend(),after(),before()
$('ul').append('<li>append</li>')//往ul里卖弄的后面添加标签
$('ul').prepend('<li>prepend</li>')//往ul里面的前面添加标签
$('ul').before('<h2>before</h2>')//往ul前面
$('ul').after('<h2>after</h2>')//往ul后面
事件
ready()有什么用，跟传统的js中load事件有什么区别
ready()用于在 DOM 文档加载完成后执行回调函数。与传统的 JavaScript 中的 load 事件相比，ready() 方法会更快地触发，因为它只需要等待 DOM 树构建完成，而不必等待所有的资源，如图片、视频等都加载完毕。
传统的 JavaScript 中，我们可以通过 window.onload 事件来监听页面元素和资源的完全加载。但是，该事件仅在所有元素和资源都加载完毕后才会触发，这可能需要较长的时间，尤其是当页面包含大量或者较大的资源时，
或者网络连接不佳时，这个事件的延迟会更加明显。因此，ready() 方法会更快地触发回调函数，从而提高网页的响应速度。
on,off
on() 和 off() 是 jQuery 框架中用于事件绑定和解除的方法。
on() 方法用于向一个或多个元素附加事件处理程序,off() 方法用于从元素中删除先前添加的事件处理程序.
例子：
$('button').on('click', function() {
console.log('Button clicked!');
});
//在这个例子中，我们选择所有 button 元素，调用 on() 方法来附加一个点击事件处理程序。当任何一个 button 被点击时，
回调函数将会被执行，输出 'Button clicked!'。
$('button').off('click');
//在这个例子中，我们选择所有 button 元素，调用 off() 方法来删除之前添加的点击事件处理程序。
这意味着，当任何一个 button 被点击时，没有回调函数将被执行。
hover
hover() 事件是 jQuery 框架中的一种特定于鼠标的事件。它会在鼠标悬停在目标元素上时触发，并且可以指定两个回调函数，分别对应鼠标进入和离开时的操作。
click,onmouseover等等
click() 和 mouseover() 事件是 jQuery 框架中的两种常见事件类型，它们分别对应鼠标点击和悬停在目标元素上时的操作。
click() 事件会在鼠标单击目标元素时触发。例如：
$('button').click(function() {
console.log('Button clicked!');
});
在这个例子中，我们选择所有 button 元素并调用 click() 方法来附加一个点击事件处理程序。当任何一个 button 被单击时，回调函数将会被执行，输出 'Button clicked!'。
mouseover() 事件会在鼠标悬停在目标元素上时触发。例如：
$('button').mouseover(function() {
console.log('Mouse over button!');
});
在这个例子中，我们选择所有 button 元素并调用 mouseover() 方法来附加一个悬停事件处理程序。当鼠标进入任何一个按钮的边界框时，回调函数将会被执行，输出 'Mouse over button!'。
效果
show，hide,toggle
slideDown,slideUp,slideToggle
fadeln,fadeOut,fadeTo,fadeToggle
1.show
显示隐藏的匹配元素。
<p style="display: none">Hello</p>
$("p").show()
2.hide
隐藏显示的元素
$("p").hide()//隐藏所有段落
3.toggle