共计 7442 个字符，预计需要花费 19 分钟才能阅读完成。
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 回顾
百度
![]()
其中 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（具体看需求）
8.2.3 用包
根据文档使用
举例：
![]()
// 找到希望懒加载的图片并调用 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)
** 既有适合小白学习的零基础资料，也有适合 3 年以上经验的小伙伴深入学习提升的进阶课程，涵盖了 95% 以上大数据知识点，真正体系化！**
** 由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新 **
**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
## 九、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 =
(
′
b
u
t
t
o
n
′
)
c
o
n
s
o
l
e
.
l
o
g
(
(‘button’) console.log(
(′button′)console.log(btn)
let sBtn = $btn.get(1)
[外链图片转存中…(img-6LXdtWK4-1714323447501)]
[外链图片转存中…(img-7omOCsKz-1714323447502)]
[外链图片转存中…(img-tV2tS84G-1714323447502)]
既有适合小白学习的零基础资料，也有适合 3 年以上经验的小伙伴深入学习提升的进阶课程，涵盖了 95% 以上大数据知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
需要这份系统化资料的朋友，可以戳这里获取
原文地址: 学习 jQuery 初级中级高级用法 一篇就够了_jquery-3(1)
