前言：本篇文章可以带你快速上手jQuery，本文包括jQuery各种常用以及高级用法，为后续学习可以做好铺垫，知识点非常全面。

一、认识jQuery

1.1 举个例子

二、学习前的准备

2.1 第一步：下包

2.2 第二步：导包

2.2.1 语法

2.2.2 测试导入是否成功

三、jQuery基本用法

3.1 jQuery选择器

3.1.1 语法

3.1.2模拟面试

3.2 jQuery对象

3.2.1示例代码

3.2.2 语法

3.2.3 模拟面试

3.3 事件绑定

3.3.1 语法

3.3.2 举例：

3.4 链式编程

3.4.1 语法

3.5 内容操纵

3.5.1 语法

3.5.2 模拟面试

3.6 过滤方法

3.6.1 语法

3.6.2 示例

3.7 样式操纵

3.7.1 语法

3.7.2 示例

3.8 属性操纵

3.8.1 回顾

3.8.2 语法

3.8.3 示例

3.9 操纵value

3.9.1 语法

3.9.2 示例

3.10 查找方法

3.10.1 语法

3.10.2 示例

3.11 操纵类名

3.11.1 语法

3.11.2 示例

4. jQuery进阶

4.1 事件进阶

4.1.1 语法

4.1.2 示例

4.2 事件触发

4.2.1 语法

4.3 window事件绑定

4.3.1 语法

4.4 获取位置

4.5 滚动距离

五、jQuery基本动画

5.1 显示和隐藏动画

5.1.1 语法

5.2 淡入&淡出动画

5.2.1 语法

5.3 展开&收起动画

5.3.1 语法

5.4 动画队列及停止方法

5.4.1 语法

5.5 自定义动画

5.5.1 语法

5.6 插入节点

5.6.1 语法

5.7 动画的回调函数

5.7.1 语法

5.8 动画的延迟方法

5.8.1 语法

5.9 获取元素尺寸

5.9.1 语法

六、jQuery事件

6.1 事件参数

6.1.1 语法

6.2 删除节点

6.2.1 语法

6.2.2 示例

6.3 事件委托

6.3.1 语法

七、入口函数

7.1入口函数原生写法

7.2jQuery写法

7.3jQuery中的ready写法

八、懒加载

8.1什么是懒加载

8.2lazyload插件

8.2.1 下包

8.2.2 导包

8.2.3 用包

九、jQuery更多与用法提交事件submit

9.1提交事件submit

9.1.1 语法

9.2 克隆

9.2.1 语法

9.3 获取DOM对象

9.3.1 语法

9.3.2 示例

9.4 表单序列化

9.4.1 语法

十、版本差异

一、认识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、事件名开头不需要写on

2、回调函数中的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.margin

1）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，在更新

学习jQuery初级中级高级用法 | 一篇就够了

一、认识jQuery

1.1 举个例子

二、学习前的准备

2.1 第一步：下包

2.2 第二步：导包

2.2.1 语法

2.2.2 测试导入是否成功

三、jQuery基本用法

3.1 jQuery选择器

3.1.1 语法

3.1.2模拟面试

3.2 jQuery对象

3.2.1示例代码

3.2.2 语法

3.2.3 模拟面试

3.3 事件绑定

3.3.1 语法

3.3.2 举例：

3.4 链式编程

3.4.1 语法

3.5 内容操纵

3.5.1 语法

3.5.2 模拟面试

3.6 过滤方法

3.6.1 语法

3.6.2 示例

3.7 样式操纵

3.7.1 语法

3.7.2 示例

3.8 属性操纵

3.8.1 回顾

3.8.2 语法

3.8.3 示例

3.9 操纵value

3.9.1 语法

3.9.2 示例

3.10 查找方法

3.10.1 语法

3.10.2 示例

3.11 操纵类名

3.11.1 语法

3.11.2 示例

4. jQuery进阶

4.1 事件进阶

4.1.1 语法

4.1.2 示例

4.2 事件触发

4.2.1 语法

4.3 window事件绑定

4.3.1 语法

4.4 获取位置

4.5 滚动距离

五、jQuery基本动画

5.1 显示和隐藏动画

5.1.1 语法

5.2 淡入&淡出动画

5.2.1 语法

5.3 展开&收起动画

5.3.1 语法

5.4 动画队列及停止方法

5.4.1 语法

5.5 自定义动画

5.5.1 语法

5.6 插入节点

5.6.1 语法

5.7 动画的回调函数

5.7.1 语法

5.8 动画的延迟方法

5.8.1 语法

5.9 获取元素尺寸

5.9.1 语法

六、jQuery事件

6.1 事件参数

6.1.1 语法

6.2 删除节点

6.2.1 语法

6.2.2 示例

6.3 事件委托

6.3.1 语法

八、懒加载