既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
一、认识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文件下载到本地
官网地址：jQuery
https://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以动画的方式切换元素的显示和隐藏
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
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以动画的方式切换元素的显示和隐藏
[外链图片转存中...(img-LD4zBs7W-1715621537975)]
[外链图片转存中...(img-ljVX5KsW-1715621537975)]
**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**
**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
扫一扫
803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
