JQUERY基础知识

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