学习笔记：jQuery（尚硅谷）

发表于 2021-03-21 更新于 2023-01-31 分类于学习笔记阅读次数：

本文字数： 8.5k 阅读时长 ≈ 8 分钟

介绍

本文主要记录在学习尚硅谷的 jQuery 课程时的一些笔记
尚硅谷前端学科全套课程请点击这里进行下载，提取码：afyt

一、基础知识

官网地址：点击这里
jQuery 是一个优秀的 JS 函数库，封装了 BOM、DOM 等相关操作（CRUD）
特性：HTML元素选取（选择器）、HTML元素操作、CSS操作、HTML事件处理、JS动画效果、链式调用、读写合一、隐式遍历（迭代）、浏览器兼容、易扩展插件、ajax封装

1.版本之间的区别

1.x：兼容老版本IE、文件更大
2.x：部分IE8及以下不支持，文件小，执行效率更高
3.x：完全不再支持IE8及以下版本，提供了一些新的API，提供不包含ajax/动画API的版本

2.原生JS和jQuery的区别

这里主要谈 window.onload 与 $(document).ready() / $(function(){})
window.onload：
- 包括页面的图片加载完后才会回调（晚）
- 只能有一个监听回调（其余的会覆盖）
$(document).ready()：
- 等同于: $(function(){})
- 页面加载完就回调（早）
- 可以有多个监听回调

3.基本操作

(1).引入 jQuery 库

可选如下两种方式：

1).服务器本地库

使用 <script> 标签从本地引入

2).CDN 远程库

项目上线时，一般使用比较靠谱的CDN资源库，用来减轻服务器压力
BootCDN：查看链接

(2).使用 jQuery

我们需要使用 jQuery 核心函数和 jQuery 核心对象
- jQuery 核心函数：向外直接暴露的 $/jQuery
- jQuery 核心对象：执行jQuery函数返回的对象，我们一般在对象名前加 $ 符号来标明
案例文本请点击这里查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）

二、核心函数

1.使用方式

(1).作为一般函数调用

语法：$(param)
参数为函数：当DOM加载完成后，执行此回调函数（文档加载完成的监听）
参数为选择器字符串: 查找所有匹配的标签，并将它们封装成jQuery对象
参数为DOM对象: 将dom对象封装成jQuery对象
参数为html标签字符串(用得少): 创建标签对象并封装成jQuery对象

(2).作为对象使用

语法：$.xxx()
$.each(): 隐式遍历对象/数组
$.trim(): 去除两端的空格

2.选择器

选择器本身只是一个有特定语法规则的字符串，没有实质用处
它的基本语法规则使用的就是CSS的选择器语法，并对其进行了扩展
只有调用$(), 并将选择器作为参数传入才能起作用
$(selector)作用：根据选择器规则在整个文档中查找所有匹配的标签的数组, 并封装成jQuery对象返回

(1).基本选择器

#id：id选择器
element：元素选择器
.class：属性选择器
*：任意标签
selector1,selector2,selectorN：取多个选择器的并集(组合选择器)
selector1selector2selectorN：取多个选择器的交集(相交选择器)

(2).层次选择器

ancestor descendant：在给定的祖先元素下匹配所有的后代元素
parent>child：在给定的父元素下匹配所有的子元素
prev+next：匹配所有紧接在 prev 元素后的 next 元素
prev~siblings：匹配 prev 元素之后的所有 siblings 元素

(3).过滤选择器

在原有选择器匹配的元素中进一步进行过滤的选择器
多个过滤选择器不是同时执行的，而是依次过滤的

a).基本

:first：获取匹配的第一个元素
:last：获取匹配的最后一个元素
:not(selector)：去除所有与给定选择器匹配的元素
:lt/gt(index)：匹配所有小于/大于给定索引值的元素

b).内容

:contains(text)：匹配包含给定文本的元素

c).可见性

:hidden：匹配所有不可见元素，或者type为hidden的元素

d).属性

[attribute]：匹配包含给定属性的元素
[attribute=value]：匹配给定的属性是某个特定值的元素

(4).表单选择器

a).表单

:input：匹配所有 input, textarea, select 和 button 元素
:text：匹配所有的单行文本框
:checkbox：匹配所有复选框
:submit：匹配所有提交按钮

b).表单对象属性

:enabled：匹配所有可用元素
:disabled：匹配所有不可用元素
:checked：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected：匹配所有选中的option元素

3.工具

$.each()：遍历数组或对象中的数据
$.trim()：去除字符串两边的空格
$.type(obj)：得到数据的类型
$.isarray(obj)：判断是否是数组
$.isFunction(obj)：判断是否是函数
$.parseJSON(json): 解析json字符串转换为js对象/数组

三、核心对象

即执行 jQuery 核心函数返回的对象
jQuery 对象内部包含的是 DOM元素对象的伪数组（可能只有一个元素）
jQuery 对象拥有很多有用的属性和方法，让程序员能方便的操作 DOM
特点：
- 链式调用：调用 jQuery 对象的任何方法后返回的还是当前 jQuery 对象
- 读写合一：读内部第一个 dom 元素、写内部所有的 dom 元素

0.伪数组

是一个Object对象
有length属性、数值下标属性
没有数组特别的方法：forEach()、push()、pop()、splice()
自定义伪数组如下：

let weiArr = {};
weiArr.length = 0;
weiArr[0] = 'wrysmile';
weiArr.length = 1;
weiArr[1] = 980378775;
weiArr.length = 2;
for(let i = 0; i < weiArr.length; i++){
	let obj = weiArr[i];
	console.log(i,obj);
}

1.基本行为

~~size()~~/length: 包含的 DOM 元素个数（注意：size()在jQuery1.8已废弃）
[index]/get(index): 得到对应位置的DOM元素
each(): 遍历包含的所有DOM元素
index(): 得到在所在兄弟元素中的下标

2.属性

(1).操作任意属性

attr()：设置或返回被选元素的属性值
removeAttr()：从每一个匹配的元素中删除一个属性
prop()：获取在匹配的元素集中的第一个元素的属性值

引申：attr和prop的区别

attr() 操作属性值为非布尔值的属性
prop() 操作属性值为布尔值的属性，如 checked, selected 或者 disabled

(2).操作class属性

addClass()：为每个匹配的元素添加指定的类名
removeClass()：从所有匹配的元素中删除全部或者指定的类

(3).操作HTML代码/文本/值

html()：取得第一个匹配元素的html内容
val()：获得匹配元素的当前值

3.CSS

(1).读取/设置css样式

css()：设置css样式/读取css值
设置多个样式时，应当封装为一个对象
注意：当设置CSS样式中的宽高时，可以不写 px 单位

(2).读取/设置标签的位置

offset()：相对页面左上角的坐标
position()：相对于父元素左上角的坐标
scrollTop()：获取匹配元素相对滚动条顶部的偏移
- 得到页面滚动条的坐标：$(document.body).scrollTop()+$(document.documentElement).scrollTop()
- 设置滚动条的新坐标：$('body,html').scrollTop(60)
scrollLeft()：获取匹配元素相对滚动条左侧的偏移

(3).读取/设置标签的尺寸

heigh()/width()：只计算内容尺寸
innerHeight()/innerWidth()：计算内部尺寸（height/width + padding）
outerHeight()/outerWidth()：计算外部尺寸（height/width + padding + border）
outerHeight(true)/outerWidth(true)：计算外部尺寸（height/width + padding + border + margin）

4.筛选

(1).过滤

作用：在 jQuery 对象中的元素对象数组中过滤出一部分元素来，并封装成新的 jQuery 对象返回
下面中前三个是通过下标来过滤，后三个是根据选择器来过滤
- first()：获取第一个元素
- last()：获取最后一个元素
- eq(index|-index)：获取第N个元素
- filter(selector)：筛选出与指定表达式匹配的元素集合
- not(selector)：删除与指定表达式匹配的元素
- has(selector)：保留包含特定后代的元素，去掉那些不含有指定后代的元素

(2).查找

作用：在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
- children()：查找当前元素的子标签中符合条件的元素
- find()：查找当前元素的后代标签中符合条件的元素
- parent()：查找当前元素的父元素
- prevAll()：查找当前元素之前所有的同辈元素
- nextAll()：查找当前元素之后所有的同辈元素
- siblings()：查找当前元素前后所有的兄弟元素

5.文档

(1).添加节点

append(content)：向当前匹配的所有元素内部的最后插入指定内容
prepend(content)：向当前匹配的所有元素内部的最前面插入指定内容
before(content)：将指定内容插入到当前所有匹配元素的前面
after(content)：将指定内容插入到当前所有匹配元素的后面

(2).替换节点

replaceWith(content)：用指定内容替换所有匹配的标签
replaceAll(selector)：用匹配的元素替换掉所有 selector 匹配到的元素

(3).删除节点

empty()：删除所有匹配元素的子元素
remove()：删除所有匹配的元素

6.事件

(1).事件处理

on()：在选择元素上绑定一个或多个事件的事件处理函数
off()：在选择元素上移除一个或多个事件的事件处理函数
click()：触发每一个匹配元素的click事件
mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件
mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件

(2).事件切换

hover()：同时绑定鼠标移入和移出监听，它只需要接收两个回调函数

(3).事件委派(委托)

a).简介

将多个子元素的事件监听委托给父辈元素处理，并且将监听回调加在了父辈元素上
当操作任何一个子元素时，事件会冒泡到父辈元素上面去
父辈元素不会直接处理事件，而是根据 event.target 得到发生事件的子元素，通过这个子元素调用事件回调函数
优势：新增的元素没有事件监听、减少监听的数量

b).委派方法

delegate()：设置事件委托，参数为(childrenSelector, eventName, callback)
undelegate()：移除事件委托

(4).事件对象

event.clientX/Y：事件坐标，相对视口左上角
event.pageX/Y：事件坐标，相对页面左上角
event.offsetX/Y：事件坐标，相对元素左上角
event.stopPropagation()：阻止事件冒泡
event.preventDefault()：取消事件的默认行为

引申：区别 mouseover 与 mouseenter

mouseover: 在移入子元素时也会触发，对应 mouseout
mouseenter: 只在移入当前元素时才触发，对应 mouseleave
- hover() 使用的就是 mouseenter() 和 mouseleave()

引申：区别 on(‘xxx’,fun) 与 xxx(fun)

前者通用但编码麻烦
后者编码简单，但有的事件没有对应的方法

7.效果

以下效果都可以不传参数（代表默认值），也可以传数字、字符串、回调函数
- 数字：动画效果时长
- 字符串：需要传入固定字符串 —— slow、normal、fast
- 回调函数：动画执行完毕的回调

(1).淡入淡出动画

不断改变元素的透明度来实现的
fadeIn()：实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数
fadeOut()：实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数
fadeToggle()：开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数

(2).上下滑动动画

不断改变元素的高度来实现的
slideUp()：动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数
slideDown()：动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
slideToggle()：切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数

(3).显示隐藏动画

不断改变元素的尺寸和透明度来实现
show()：(不)带动画的显示隐藏的匹配元素
hide()：(不)带动画的隐藏显示的元素
toggle()：(不)带动画的切换显示/隐藏

(4).自定义动画

animate()：自定义动画效果的动画，里面可以传一个对象用来设置动画结束时的样式，这里不需要设置单位
stop()：停止动画

四、多库共存

如果我们的项目中需要引入多个库且其中都使用到了 $ 来进行调用，就会存在冲突，导致其余库和jQuery库无法执行
jQuery 库中可以使用相应的 API 来释放 $ 的使用权，让另一个库可以正常使用，此时 jQuery 库就只能使用 jQuery 来进行调用了
jQuery.noConflict() ：释放使用权

五、jQuery插件

1.扩展插件

扩展jQuery的工具方法：jQuery.extend(object)
扩展jQuery对象的方法：jQuery.fn.extend(object)
案例：将全选、全不选、反选封装到扩展插件中供别人使用
- 请点击这里查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）

2.jQuery插件

是基于 jQuery 编写的扩展库，官方插件地址请点击这里

(1).jquery-validation

功能：是一款表单验证插件
- 一种声明式验证：程序员只需要声明各种验证规则。可以自定义验证错误信息
可参考菜鸟教程进行学习

!插件使用方法

去Github下载该插件最新版（jQuery官网已不再更新该插件了，所以需要自行去Github上下载）
将如下3个 js文件引入到自己的项目里
- jquery-1.xx.x.js：jQuery的js库
- jquery.validate.js：验证的js库
- messages_zh.js：错误信息的中文提示库
可以对照该插件的 demo 直接在标签中设置相应的属性
设置好后需要调用一下该插件才可以正常运行

1	$('form的id').validate();

也可以在以上的代码中传入一个对象，在对象中设置规则或者错误信息提示规则等

$('#form').validate({
	messages: {
		username: {
			required: '必须的哈哈哈',
			minlength: '你不够长'
		}
	}
});

(2).jquery UI

功能：可以构建精选的用户界面交互，效果，小部件和主题等
请点击这里进行相应主题的下载
将如下3个 js文件引入到自己的项目里
- jquery-1.xx.x.js：jQuery的js库
- jquery-ui.js：该插件的js库
- jquery-ui.css：该插件的css文件
想要用哪个UI组件，就去刚刚下载的插件中去直接复制然后自行修改样式
- 例如：Accordion为手风琴式效果，主要用来实现导航的切换
然后使用 jQuery 对象调用相应方法即可

3.原生js插件

(1).layDate

功能：一款被广泛使用的高级 Web 日历组件
请点击这里进行下载
将 layDate 下的所有文件全都复制到自己的项目中
将 laydate.js 引入到自己的项目中
创建一个表单元素并给其绑定一个id
使用如下语法进行调用：

1
2
3

laydate.render({
	elem: 'id选择器'
});

六、案例分析

1.多Tab切换功能

(1).思路

a).Tab实现

将Tab放入多级列表中，将Tab对应的内容放在盒子容器中
使用定位使两个内容连接在一起
使用 display 属性来控制内容的显示与否

b).切换Tab实现

先给3个li添加点击监听
隐藏当前已显示的内容
显示对应内容的div，得到当前点击的li在兄弟中的下标
找到对应内容的div并修改 display 属性

(2).代码

请点击这里查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）

2.回到顶部功能

瞬间滚动到顶部只需要将 scrollTop 值设置为0即可，以下主要说的是平滑滚动到顶部

(1).思路

获取到总距离、总时间、间隔时间、间隔距离等数据
使用循环定时器不断滚动
当到达顶部时，停止定时器

(2).代码

请点击这里查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）

3.爱好选择功能

(1).思路

点击’全选’: 选中所有爱好，并勾选’全选/全不选’
点击’全不选’: 所有爱好都不勾选，并取消勾选’全选/全不选’
点击’反选’: 改变所有爱好的勾选状态，并更新’全选/全不选’的选中状态
点击’全选/全不选’: 选中所有爱好, 或者全不选中
点击某个爱好时，必要时更新’全选/全不选’的选中状态
点击’提交’: 提示所有勾选的爱好

(2).代码

请点击这里查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）

4.表单的添加删除功能

(1).思路

添加功能：
- 先收集表单中需要填写的数据
- 生成对应的<tr>标签结构，并插入到表单的的<tbody>中
- 给新添加的<tr>标签中的超链接设置点击事件，并传入删除的回调函数
- 清除表单输入框中的内容
删除功能：
- 找到表单后代中所有的超链接元素
- 为这些超链接元素绑定点击事件，并传入删除的回调函数
删除的回调函数：
- 使用 confirm() 方法来提示用户是否删除
- 取消默认行为
- 将删除功能中的回调函数单独封装出来，用来供添加功能使用

(2).代码

请点击这里查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）

(3).代码优化

以上的思路是将点击事件绑定给了当前元素，在新增元素时，需要额外的代码去将点击事件绑定给新加元素
可以使用事件委派来优化代码，将点击事件绑定给其父元素，优化后的页面代码如下：
请点击这里查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）

5.轮播图自动切换功能

轮播图虽然展示出来可能比较单调，就是一直轮播，但是其中的小逻辑也很多，我们可以分步骤来逐步实现
前端的HTML、CSS相关编写不赘述，主要讲述JS逻辑

(1).思路

我们一般将相关功能放入匿名函数中，使其在页面加载完成以后才会加载
在实现功能前，我们最好先在全局中定义好我们需要的全局变量
首先先给轮播图左右的按钮绑定点击事件，使其平滑切换到下(上)一页
其次实现无限循环切换，即第一页的上一页为最后页，最后一页的下一页是第一页
- 这里主要是在结构中单独在将最后一张图片复制到第一位，把第一张图片复制到最后一位，在到达这一位置时，迅速切换图片下标，做到无缝切换
一般轮播图都会自动进行切换，这时就需要用定时器来使其自动切换
但是在其自动切换时当用户的鼠标进入图片区域时，自动切换就会停止；当鼠标离开后，又开始自动切换
切换图片的时候下面的导航点也需要跟随图片进行切换，这里就需要使导航点的下标和图片的下标保持一致
导航点不仅会自动切换，还会跟随用户的点击切换到相应的图片，这里就需要对上面的逻辑进行一定程度的修改
最后我们需要对功能进行一定程度的测试，发现快速点击左右按钮时会出现半个图片，这里我们只需要设置个状态来判断是否点击即可

(2).代码

请点击这里查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）

6.导航栏显示折叠功能

(1).思路

只要找到需要显示或折叠的多级列表
给这个多级列表绑定hover()事件
在移入移出时调用上下滑动动画即可（为了功能的完美体验，应该在每次动画前都停止到之前的所有动画）

(2).代码

请点击这里查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）