前言：本篇文章可以带你快速上手jQuery，本文包括jQuery各种常用以及高级用法，为后续学习可以做好铺垫，知识点非常全面。
一、认识jQuery
**· **jQuery是JavaScript类库（js文件），他封装了很多简单的方法（浏览器兼容），绝大多数用来简化DOM操作。
1.1 举个例子
我们用DOM语法和jQuery语法来实现一个相同的操作，代码如下：
//DOM语法let arr = document.querySelectorAll('li')for (let i = 0; i < arr.length; i ++) {arr[i].onclick = function() {this.style.backgroundColor = '#333'}}//jQuery语法$('li').click(function() {$(this).css('backgroundColor','#333')})
二、学习前的准备
2.1 第一步：下包
我们需要把jQuery文件下载到本地
官网地址：jQueryhttps://jquery.com/
官方中文文档：
jQuery API 中文文档 | jQuery 中文网 (jquery123.com)https://www.jquery123.com/
接下来我们点击：Download jQuery
这里有两个版本，第一个是压缩的，第二个没压缩
我们选择第二个文件进行下载学习（因为源码清晰结构工整方便学习）：单击点开，CTRL + S保存文件。
如果要上线一个项目的话，我推荐大家选择第一个min版的压缩文件
2.2 第二步：导包
在需要使用jQuery的页面中导入下载好的jQuery文件
2.2.1 语法
<script src="./jQuery-3.6.1.js"></script><!-- 其中src属性里面填写jQuery文件所在位置-->
2.2.2 测试导入是否成功
<script>console.log($)</script>
在浏览器打开F12如果和下图一样返回了一个函数，说明导入成功：
以上我们的准备工作已经完成了，接下来我们开始正式的学习吧！
三、jQuery基本用法
3.1 jQuery选择器
jQuery中通过选择器来获取DOM节点，功能类似于原生的querySelectorAll方法，其所支持的选择器于CSS的选择器几乎一致。
3.1.1 语法
//语法$('选择器')
3.1.2模拟面试
提问：这个''$''表示的是什么呢？
其实这个''$''就是我们在测试导入是否成功的地方console.log打印出来的函数，简单来说他就是个函数。
3.2 jQuery对象
jQuery中利用选择器获取到的并非是原生的DOM对象，而是jQuery对象。
3.2.1示例代码
//利用jQuery 获取p标签 改变背景颜色为红色$('p').css('backgroundColor','red')
//DOM 获取P标签 改变背景颜色为 红色document.querySelector('p').style.backgroundColor = 'red'
注意：jQuery对象和DOM对象 的语法不能混用哦！
3.2.2 语法
//选择器获取$('选择器')//dom对象转换$(dom对象)
3.2.3 模拟面试
提问:jQuery对象的方法，比如CSS方法放在什么位置？
答：原型
** 提问：调用$方法传入选择器或DOM元素获取到的是什么对象？**
答：jQuery对象
3.3 事件绑定
在jQuery中以原生事件类型的名称为依据，封装了相应的事件处理方法。
3.3.1 语法
$('选择器').事件名(function () {// 逻辑 ...})
3.3.2 举例：
$('div').dblclick(function () {console.log(1)})
注意：
1、事件名开头不需要写on2、回调函数中的this就是触发时间的dom元素
3.4 链式编程
链式编程就是通过"."把多个操作（方法）连续的写下去，形成和链子一样的结构。
3.4.1 语法
$('.text').focus(function () {console.log('获取焦点')})$('.text').blur(function () {console.log('失去焦点')})
也可以这样写哦
$('.text').focus(function () {console.log('获取焦点')}).blur(function () {console.log('失去焦点')})
更简单的写法是这样的：
$('.text').focus(回调函数).blur(回调函数).change(回调函数)
3.5 内容操纵
jQuery中封装了设置和读取网页元素文本内容的方法。
3.5.1 语法
//设置$('选择器').html('内容')$('选择器').text('内容')//读取$('选择器').html()$('选择器').text()
设置时：html方法解析标签，text不解析标签。
取值时：html方法获取标签，text只获取文本。
3.5.2 模拟面试
提问：设置和读取哪一个支持链式编程？
答：设置
3.6 过滤方法
jQuery中封装了过滤方法，它可以对jQuery对象中的DOM元素再次筛选
3.6.1 语法
//匹配的第一个元素 相当于 first-child.first()//匹配的最后一个元素 相当于 last-child.last()//根据索引匹配元素.eq(索引号)
注意：
1.eq方法的索引是从0开始的2.他们三个方法返回的都是jQuery对象
3.6.2 示例
$('li').first().css('backgroundColor','red')$('li').last().css('backgroundColor','blue')$('li').eq(1).css('backgroundColor','red')
3.7 样式操纵
jQuery 中对样式的操纵进行封装，可以设置或者获取样式
3.7.1 语法
以下展示了两种表达方式，具体使用哪一种要根据公司的要求咯
// 1.键值对设置.css('样式名','值').css('color','red').css('width','200px').css('height','200')
// 2.对象方式设置.css(对象).css({backgroundColor:'red',color:'pink',width:'200px',height:'200',})
注意：数值类的样式省略单位，默认会使用px。
3.7.2 示例
$('li').css('backgroundColor','pink')$('li').css({backgroundColor:'pink',border:'10px solid yellowgreen',width:'200px',height: 200,})
3.8 属性操纵
jQuery 中对属性的操作进行封装，可以设置、获取和删除属性
大家可能忘记了属性是什么呢？我来给大家回顾一下吧！
3.8.1 回顾
<a href="http://www.baidu.com/">百度</a><img src="111.jpg" info="你是最帅的(最美的)，给个三连不过分吧哈哈哈哈"/>
其中 href、src、info都是属性，不管是原生的，还是自定义的都可以哦！
3.8.2 语法
// 1.赋值.attr('属性名','值')// 2.取值.attr('属性名')// 3.删除属性.removeAttr('属性名')
3.8.3 示例
$('a').attr('href','http://www.baidu.com/')
3.9 操纵value
jQuery中封装了操纵表单元素value属性的方法，可以取值和赋值。
3.9.1 语法
// 1.赋值.val('参数')// 2.取值.val()
3.9.2 示例
// 1.赋值$('.text').val('来个三连加关注！')// 2.取值$('.text').blur(function () {let value = $(this).val()console.log(value)}
3.10 查找方法
jQuery中封装了查找元素的方法，可以基于元素的结构关系查找新的元素。
3.10.1 语法
// 1.父元素.parent()// 2.子元素.children()// 3.兄弟元素.siblings()// 4.后代元素.find('选择器')
注意：
1.find方法需要传入选择器2.children、siblings 方法支持传入选择器
3.10.2 示例
// 1.父元素$('li').parent().css('backgroundColor','pink')// 2.子元素$('li').children().css('backgroundColor','pink')$('li').children('.jbc').css('backgroundColor','pink')// 3. 兄弟元素$('li').siblings().css('backgroundColor','pink')$('li').siblings('.jbc').css('backgroundColor','pink')// 4.后代选择器$('li').find('jbc').css('backgroundColor','pink')
3.11 操纵类名
jQuery中封装了为网页元素添加、移除、检测、切换类名的方法。
3.11.1 语法
// 1.添加类名.addClass('类名')// 2.移除类名.removeClass('类名')// 3.判断类名 返回布尔值.hasClass('类名')// 4.切换类名.toggleClass('类名')
3.11.2 示例
$('.add').click(function() {$('.text').addClass('active')})$('.add').click(function() {$('.text').removeClass('active')})$('.add').click(function() {let res = $('.text').hasClass('active')})$('.add').click(function() {$('.text').toggleClass('active')})
4. jQuery进阶
4.1 事件进阶
jQuery中封装了更为灵活的 on/off 、one方法处理DOM事件
4.1.1 语法
// 1.注册事件.on('事件名', function() {})// 2.移除指定事件.off('事件名')// 3.移除所有事件.off()// 4.注册一次性事件.one('事件名', function(){})
注意：
on, one方法回调函数中的this是触发事件的DOM元素
4.1.2 示例
$('.text').on('click',function(){console.log(1)})$('.text').off('click')$('.text').off()$('.text').one('click',function(){console.log(1)})
4.2 事件触发
jQuery中如何通过代码的方式触发绑定的事件呢？
4.2.1 语法
// 1.直接触发.事件名()// 2.trigger触发.trigger('事件名')// 3.触发自定义事件.trigger('自定义事件')// 4.注册自定义事件.on('自定义事件', function() {})
注：自定义事件是一种进阶用法，目前了解使用方法即可
4.3 window事件绑定
使用jQuery为window对象绑定事件
4.3.1 语法
// 滚动$(window).scroll(function(){})// 点击$(window).click(function(){})
4.4 获取位置
通过jQuery直接获取元素的位置
4.4.1 语法
// 取值$('选择器').offset()// 取值$('选择器').position()// 返回值{top: 126, left: 58}
注意：
1.他们之间参照物不同1）offset参照html标签2）position参照离他最近有定位的祖先元素2.margin1）offset会把外边距margin计算进去2）position以外边距margin为边界，不计算margin
4.5 滚动距离
通过jQuery获取元素的滚动距离
// 取值$('选择器').scrollLeft()$('选择器').scrollTop()// 赋值$('选择器').scrollLeft(值)$('选择器').scrollTop(值)
五、jQuery基本动画
5.1 显示和隐藏动画
通过jQuery以动画的方式切换元素的显示和隐藏
5.1.1 语法
// 显示$('选择器').show()//隐藏$('选择器').hide()//显示&隐藏$('选择器').toggle() //如果显示，调用toggle就会隐藏；如果隐藏，调用toggle就会显示
其中show、hide、toggle可以加一个持续多长时间的参数，例如：
$('.text').show(1000) //毫秒为单位
5.2 淡入&淡出动画
通过jQuery以淡入&淡出的方式切换元素的显示隐藏
5.2.1 语法
// 淡入$('选择器').fadeIn()// 淡出$('选择器').fadeOut()// 淡入&淡出$('选择器').fadeToggle()
基本用法与上述5.1的用法基本一致，也可以加参数哦！
5.3 展开&收起动画
通过jQuery以展开（高度增大-显示）&收起（高度减小-隐藏）的方式切换元素的显示隐藏
5.3.1 语法
//展开$('选择器').slideDown()//收起$('选择器').slideUp()//展开或收起$('选择器').slideToggle()
用法与上面的动画方法一样哦。可加参数。
5.4 动画队列及停止方法
通过jQuery为元素设置的多个动画会依次添加到动画队列中，并根据添加的顺序依次播放。
5.4.1 语法
// 停止当前动画$('选择器').stop()// 清空队列 在动画当前状态停止$('选择器').stop(true)// 清空队列 直接到当前动画的结束状态$('选择器').stop(true, true)
动画方法和stop方法返回的是同一个jQuery对象
5.5 自定义动画
jQuery提供了animate方法来实现更复杂的动画效果
5.5.1 语法
$('选择器').animate(动画属性)
数值类样式支持动画，支持多个
默认单位是px
支持非样式的特殊属性
持续时间的单位是毫秒
举个例子：
$('选择器').animate({width: 100,height: '100%'margin: '100px'...})
$('选择器').animate({scrollTop: 100,scrollLeft: 100})
5.6 插入节点
jQuery中封装了指定位置动态插入元素节点的方法，可以插入节点或者改变节点位置。
5.6.1 语法
//4个方法参数一样 位置不同$('父元素选择器').append(参数) //插入到父元素结尾$('父元素选择器').prepend(参数) //插入到父元素开头$('兄弟元素选择器').before(参数) //插入到兄弟元素前面$('兄弟元素选择器').after(参数) //插入到兄弟元素后面
插入节点：传入创建的DOM元素或者html结构
改变位置：传入现有的DOM元素或者jQuery对象
5.7 动画的回调函数
所有的jQuery动画方法都支持传入回调函数
5.7.1 语法
$('选择器').基础动画方法(回调函数)$('选择器').基础动画方法(持续时间, 回调函数)$('选择器').animate(属性, 回调函数)$('选择器').animate(属性, 持续时间，回调函数)
回调函数会在动画执行完毕时立刻执行。
回调函数中的this是执行动画的DOM元素
5.8 动画的延迟方法
jQuery不仅可以设置动画执行的速度，还能在动画执行前设置一定的延时
5.8.1 语法
$('选择器').delay(延迟时间).动画方法()$('选择器').delay(延迟时间).动画方法().delay(延迟时间).动画方法()
注意：延迟时间的单位是毫秒。
5.9 获取元素尺寸
5.9.1 语法
$().width() //获取内容宽度$().height() //获取内容高度$().innnerWidth() //获取内容宽度+内边距$().innnerHeight() //获取内容高度+内边距$().outerWidth() //获取内容宽度+内边距+边框$().outerHeight() //获取内容高度+内边距+边框$().outerWidth(true) //获取内容宽度+内边距+边框+外边距$().outerHeight(true) //获取内容高度+内边距+边框+外边距
六、jQuery事件
6.1 事件参数
jQuery绑定的事件中可以获取时间参数（事件对象），用法和原生js完全一致
6.1.1 语法
$('选择器').事件(function(event){event.stopPropagation() //阻止冒泡})
注意：不需要考虑兼容性，因为jQuery已经处理好时间参数的兼容性。
6.2 删除节点
jQuery中封装了动态删除元素节点的方法remove（）。
6.2.1 语法
jQuery对象.remove()
remove方法删除的是调用方法的元素节点。
6.2.2 示例
// 删除自己$('.remove').click(function() {$(this).remove()})//删除父元素$('.remove').click(function() {$(this).parent().remove()})
6.3 事件委托
直接通过on方法即可使用
6.3.1 语法
//直接绑定$('选择器').on('事件名',function(){})//事件委托$('祖先选择器').on('事件名','后代选择器',function(){})
作用：
1.可以减少事件注册。
2.可以解决动态增加后代元素的事件绑定问题。
七、入口函数
7.1入口函数原生写法
window.onload = function(){}
7.2jQuery写法
$(window).on('load',function(){})
7.3jQuery中的ready写法
//完整写法$(document).ready(dunction(){})//简化写法$(function(){})
DOM载入完毕就会执行。
八、 懒加载
jQuery的懒加载插件lazyload
8.1什么是懒加载
比如：图片用到了再去加载，常见于有大量图片的网页，比如电商网页。
8.2lazyload插件
8.2.1 下包
下载地址：
Lazy Load 中文网 | Javascript延迟加载（LazyLoad.js）图像插件 (lazyloadjs.cn)
8.2.2 导包
先导入jQuery，再导入插件，导入CSS（具体看需求）
<!--先导入jQuery--><script src="./jQuery/jQuery-3.6.1.js"></script><!--再导入lazyload插件--><script src="./assets/jQuery.lazyload.min.js"></script>
8.2.3 用包
根据文档使用
举例：
<!--图片懒加载--><img class="lazyload" data-original="./images/1.jpg" alt="" />
//找到希望懒加载的图片并调用lazyload方法$('.lazyload').lazyload()
九、jQuery更多与用法提交事件submit
利用submit事件阻止默认行为，自己获取数据并提交
9.1提交事件submit
利用submit事件阻止默认行为，自己获取数据并提交
9.1.1 语法
$('form').submit(function(event){event.preventDefault()//或者return false})
9.2 克隆
9.2.1 语法
// 不带事件.clone()// 带事件.clone(true)
方法返回的还是jQuery对象
传入true事件也会一起克隆
9.3 获取DOM对象
9.3.1 语法
//1.利用trigger触发$('video').trigger('play')//2.get方法获取.get(索引)//3.中括号获取[索引]
索引从0开始，索引号表示用哪个对象x，索引号就是index[x] - 1。（因为下标从0开始计数）
获取到的是DOM对象
9.3.2 示例
let $btn = $('button')console.log($btn)let sBtn = $btn.get(1)console.log(Btn)let pBtn = $btn[0]
9.4 表单序列化
序列化可以快速获取表单数据。
9.4.1 语法
$('form').serialize()
表单元素要有name属性才可以获取到value
获取到的数据格式是 name1 = value1&name2 = value2&.....的字符串
十、版本差异
1.x：兼容低版本的IE，最后一个版本是1.12.4
2.x：不兼容低版本IE，不更新了
3.x：不兼容低版本IE，在更新
版权归原作者 Sumpon 所有， 如有侵权，请联系我们删除。