javaScript知识体系
2022-09-19 10:28:26 0 举报
AI智能生成
javaScript课程体系,包含所有ecmaScript基础语法和dom,bom,ajax等知识点
作者其他创作
大纲/内容
DOM基础
获取dom元素
document.getElementsBy*()
document.querySelector('选择器')
常用属性
style 修改行内样式
innerText
innerHTML
value
checked
src
......
关系属性
nextElementSibiling
prevElementSibiling
parent
children
自定义属性
data-*
常用方法
操作类名
操作属性
setAttribute(key,value)
getAttribute(key)
removeAttribute(key)
元素增删
appendChild
insertBefore
append
prepend
after
before
insertAdjacentHTML
remove
cloneNode
事件类型
onclick
onmouseenter / onmouseleave
onmousedown / onmousemove / onmouseup
onfocus / onblur
onload / onscroll
onkeydown / onkeyup
事件绑定
el.onclick = function(){}
行内绑定
el.addEventListener('click',function(){})
冒泡和捕获
三大家族
offset
offsetWidth/Height
获取元素占据页面尺寸。等于 width/height + padding + border
offsetParent
返回距离元素最近的有定位的父元素,如果找不到返回 body元素,fixed元素返回 null
offsetTop/Left
返回元素与 它.offsetParent 的内容区上左边距
scroll
scrollWidth/height
返回元素内容尺寸,等于 width/height + padding
特殊情况:当内容超出时,显示内容宽高 + padding(上左);元素如果有overflow,padding(下)
scrollTop/Left
返回元素被滚动条遮挡的上左距离,是 可读写的非整数值
页面卷入上左距离
html.scrollTop/Left || window.pageX/YOffset || body.scrollTop/Left
元素滚动方法
element/window.scroll(x,y)
element/window.scrollBy(x,y)
顺滑滚动
scroll/By({ top: xx, left: xx, behavior: "smooth" })
element { scroll-behavior: smooth; }
client
clientWidth/Height
元素可视尺寸:元素.width/height + padding - 滚动条的宽度
页面可视区域
html.clientWidth/Height || window.innerWidth/Height || body.clientWidth/Height
页面滚动相关
1. 滚动进度
进度比 = 卷入的距离 / 总的可卷入距离
总的可卷入距离 = 页面高度 - 可视区域高度
2. 无限滚动
滚动条滑块与底部距离 < 阙值时,增加页面高度
滑块与底部的距离 = 页面高度 - 卷入高度 - 可视高度
clientTop/Left
返回元素上左边框的宽度
递归实现获取任意元素到页面的上左边距
实例:轮播、滚动跟随、滚动改变状态
Event
包含了与事件相关的信息组成对象,事件对象
event.type
事件类型
元素
event.target
触发事件的元素
event.currentTarget
绑定事件的元素
等同于事件函数(用JS绑定)中的 this
鼠标
event.button/which
按键
位置
pageX/Y
clientX/Y
offsetX/Y
鼠标与 event.target
screenX/Y
键盘
event.key
获取按键信息
阻止
默认
event.preventDefault() || event.returnvalue = false
直接在元素事件中 return false
冒泡
event.stopPropagation() || event.cancelBubble = true
事件委托
原理:利用事件冒泡机制以及可以获取事件触发元素的方法,得到将子元素的事件委托给父元素进行监听的方式
优点
1. 减少了DOM操作
2. 新添加的元素也有相同的事件监听
写法
1. 判断委托元素
2. 委托元素有子系元素,需要用 closest() 来获取委托元素
实例:拖拽、跟随
拖拽逻辑
1. 元素拖拽位置 = 元素起始拖拽位置 + 鼠标移动距离
鼠标移动距离 = 拖拽过程中鼠标位置 - 鼠标按下时的位置
2. 元素拖拽位置 = 鼠标与页面的距离 - 鼠标与元素的距离
BOM
浏览器对象模型,包含浏览器相关操作,实际操作API都绑定在了window上
URL介绍
组成:协议 + host + 端口号 + [路径] + [参数] + [锚点]
host - 主机地址
服务器IP
本地开服务
vscode 插件 live-server
通过 npm 安装 live-server
通过 ipconfig 命令查询IP
本地IP
127.0.0.1
localhost
局域网IP
无线网IP
域名
服务器名 + 主域
www.baidu.com
www - 服务器名
baidu.com - 主域
origin
源:协议 + host + 端口号
三者完全一致代表同源
open
url
效果类似于a标签
windowName
a标签 target属性
自定义
iframe标签name属性
windowFeature
在第二个参数是打开新页面的情况下,加上本参数就可以定制窗口
history
标签页历史记录栈,之记录过程,不记录页面信息
length
跳转的页面长度
forward/back()
前进/后退一页
go(n)
前进/后退n页
跳转超出记录栈长度,会失效
location
URL解析对象
属性
href
当前页面URL
origin
protocol
hostname
port
search
用于页面传值,中文编译 encodeURI() / decodeURI() ⭐
hash
锚点
方法
跳转
location = url
location.href = url
location.assign(url)
不带记录的跳转
location.replace(url)
刷新
location.reload(是否强制刷新)
navigator
浏览器信息
userAgent + 正则
判别浏览器类型
onLine
设备是否在线
raf
requestAnimationFrame(fn) 在浏览器下次刷新时执行函数 -- 实现流畅的动画
cancelAnimationFrame(requestId) 取消raf设定的内容
根据时间比例来设定的动画 = 时序动画
已过时间 / 总时间
扭曲时间与进程的比例,可得到不同的动画效果
jQuery
介绍:JS框架,封装了JS代码,实现了很多DOM操作的函数功能。宗旨:write less, do more。是 JS 框架,简化了DOM/JS操作
引入
1. 引入方式
下载到本地
使用 CDN
2. 引入类型
正常 - 开发版本
可以查看源码
压缩 - 生产版本
更小的体积,更快的加载速度
3. 版本
1.xx 兼容IE678,社区内容多,最好选用 1.7.0之后
2.xx 删除了IE678的支持,精简了部分API,不推荐使用
3.xx 目前仍在更新
使用
接收函数作为参数
作为入口函数使用,替代 window.onload
接收选择器作为参数
ID/类名/标签名
父类/交集/并集
+ > ~
属性
筛选
:eq(index)
:lt(index)
:gt(index)
:first/last/contains...
jQ对象
本质:由符合筛选条件的DOM元素组成的伪数组
转成DOM
$ele[index]
$ele.get(index)
DOM 转jQ
$(DOM)
特性
1. 链式调用
jQ方法多数可以返回jQ对象本身,可以继续调用其它方法进行操作
2. 隐式迭代
调用jQ方法,会默认对jQ选中的所有节点进行对应操作
jQ方法
属性操作
prop/attr
区别:prop是对 DOM 对象进行的操作,attr 是对标签属性进行的操作
prop(key)
prop(key,value)
prop({ key: value, key:value, ... })
removeProp(key)
样式操作
css(key)
css(key,value)
css({ key:value, key:value, ... })
类名
addClass()
removeClass()
hasClass()
toggleClass()
内容
html()
text()
val()
不加参数表示获取,加上参数表示设置
元素
before()
prepend()
append()
after()
replaceWith()
remove()
clone(是否克隆事件)
参数为:DOM/jQ对象/HTML字符串/普通文本
关系节点
父选择
parent()
parents()
parentUntil()
children()
前兄弟元素选择
prev()
prevAll()
prevUntil()
后兄弟元素选择
next()
nextAll()
nextUntil()
siblings()
eq(index)
find()
上述所有方法均可接收 元素选择器 作为参数
事件
$ele.事件名(事件处理函数)
$ele.on(事件名多个, [委托元素], [事件参数], 事件处理函数)
$ele.off([事件名], [委托元素], [事件处理函数名])
动画
语法
$ele.animate({ 样式终点对象 }, [duration], [easing], [callback])
样式终点值可以不带单位,或者设置为 "toggle"
颜色动画 / 更多的动画曲线需要借助插件
jquery.color.js
jquery.easing.js
动画队列
jQ给同一个元素绑定多个动画,动画会进入队列状态,按顺序执行
快捷动画
.show/hide/toogle()
.slideDown/slideUp/slideToggle()
.fadeIn/Out/Toggle()
均可接收和动画一样的参数
动画延时
delay(time)
停止
stop(stopAll?,toEnd?)
stop(true,true)
stop(true,false)
stop(false,false)
stop(false,true
finish()
注:停止可以将延时也取消
插件
Swiper 轮播
引入 css、js
复制页面代码,修改内容
根据 API 设置Swiper实例
new Swiper(容器选择器, { 配置 })
animate.css 动画样式库
预定义动画的库
@keyframes 动画名 { 进程 }
引入之后给元素添加类名即可呈现动画
1. animate__animated
2. animate__动画名
3. animate__delay-2/3/4/5s
4. animate__repeat-1/2/3/infinite
5. animate__slow/slower/fast/faster
可用CSS变量
--animate-duration: 1s;
持续时长
--animate-delay: 1s;
延时时长
--animate-repeat: 1;
次数
WOW.js 元素出场动画
1、 引入依赖的 animate.css
2、引入 wow.js
3、给页面出场动画元素添加 wow 类名以及出场的动画类名
4、初始化wow
new WOW({ 配置 }).init()
兼容新版动画库,设置 animateClass: animate__animated
变量和数据类型
变量
定义
可变的量(保存的值可以变化),设置一个变量(起个名字),让其代表某个数据
创建变量
var
var a = 3;
创建/定义/声明一个变量 a ,赋值为3
var a; a = 3;
var 声明变量的关键字
function
function foo(){}; 声明函数
变量命名规则
只能使用字母/数字/下划线_/$
严格区分大小写
不能以数字开头
不能使用js中的关键字保留字
使用驼峰命名法
firstName
getName
命名语义化/见名知意
add/insert/create
新增/插入/创建
update
更新
del/delete/remove
删除
select/query/get
查询/获取
数据类型
基本数据类型
字符串 string
数字 number
布尔值 boolean
未定义 undefined
null 空对象指针
symbol es6新增
引用数据类型
对象
{.....}
数组
[......]
函数
function foo(){.....}
数据类型转换
显式转换
其他数据类型====> string类型
1. +'' (利用字符串的拼接功能)
2. toString( )
3. String( )
一般来讲,转换为的字符串就是 自身值 加上引号
其它数据类型====> number类型
Number( )
只有纯数字字符串才能转换成 number
true==>1/false==>0
undefined==>NaN
null==>0
其它数据类型====> boolean类型
Boolean( )
undefined/null/0/NaN/空字符串''===>false
隐式转换
隐式转换采用的转换规则分别是 String() / Number() /Boolean() 三者的规则
parseInt()/parseFloat()
parseInt
把字符串变为整数
parseFloat
把字符串变为小数
专门用来对付字符串
运算符
赋值运算符 =
var a = 10;
将 = 号右边的值,赋给左边
算术运算符
+
如果有一方是字符串类型,会把参与运算的数据都变成字符串类型,执行的是拼接字符串的操作
如果参与运算的没有字符串,就转换为数字进行加法运算
-
*
/
%
取余
( )
有括号,先算括号里边的
注意: 参与算术运算的如果不是数字类型,会隐式转换成数字类型(+特殊)
自增和自减
+=
a = a + num;可以简写成: a+=num;
a = a + 1
a++
++a
两者的区分
相同点: 都实现了a的 自增1(开发常用)
不同点:
var n = a++;
n的值是 a没加1时的值
var n = ++a;
n的值是 a加1之后的值
比较运算符
存在隐式转换
>
<
>=
<=
==
!=
参与比较的如果不是数字类型,会先隐式转换成数字类型,在进行比较
如果参与比较的两边都是 string类型,就一位位比较对应的unicode编码值
严格比较
先比较数据类型,数据类型一致,再接着比
数据类型不一致,直接false
严格等于 ===
严格不等于 !==
注意:如果不等于的情况不好理解,就考虑等于的情况,再取反即可
比较运算的结果只有两个 true或者false
逻辑运算符
理解
与、且 &&
同时符合条件,才算符合条件
或 ||
只要有一个满足条件,就算满足条件
非 !
取反
短路运算
且运算
如果第一个表达式结果为false,就可以判定整体结果为false,所以后续的表达式不再执行
或运算
如果第一个表达式结果为true,就可以判定整体结果为true,所以后续的表达式不再执行
逻辑运算的结果(返回值)
整个逻辑运算的结果由哪个表达式决定,最后结果就是哪个表达式的值
且运算
表达式1&&表达式2
表达式1结果为true,返回值是表达式2的结果
表达式1结果为false,返回值是表达式1的结果
总结:遇到false就返回
或运算
表达式1||表达式2
表达式1结果为true,返回值是表达式1的结果
表达式1结果为false,返回值是表达式2的结果
总结:遇到true就返回
流程控制
选择语句
if语句
条件判断语句
if...else语句
多分支if语句
switch语句
适合场景: 罗列表达式的所有可能结果,针对不同的结果执行相应的代码
循环语句
for循环
while循环
循环嵌套
内层循环执行结束,才会开始外层循环的下一轮
退出循环
break: 退出整个循环
continue: 退出当次循环, 继续下一次循环
数组(Array)
定义
保存某一类数据的集合
引用数据类型(特殊的对象),typeof 检测数据类型时返回object
准确判断是不是数组时,可以使用instanceof
特性
索引
每个数组元素对应都有一个索引
索引从0开始,依次递增
length
数组具有长度属性,指的是数组元素的个数
一般是最大索引+1
基本使用
我们对数组的CURD都是基于索引的
获取元素
arr[index]
添加元素
arr[index] = 3;
修改元素
arr[index] = 4;
删除元素
arr.length--;可以实现删除数组最后一个元素
数组元素的遍历
for循环
数组的方法
push()/pop()/shift()/unshift()
concat()
split()/join()
sort()
reverse()
indexOf()/lastIndexOf()
slice()
splice()
.....
数组的排序和去重
排序
冒泡排序
选择排序
插入排序
....
去重
....
总结
我们从服务器获取的数据一般都是对象或者数组,而且结构层级嵌套也比较多
所以学会数组和对象的操作,根据需求把获取的数据进行相应的解析和处理,是前端开发学习的重点
JS对象
描述
简介:无序属性的集合,用于描述一个事物
属性有键值对组成
普通属性
值为函数的属性,又名方法
常规取值/赋值
. 操作符
obj.xx
obj.xx = xx
计算属性
[] 操作符,常用于属性名是 变量或表达式的返回值
obj[xx]
obj[xx] = xx
属性描述符
数据属性描述符
configurable
属性描述符是否可更改配置,属性能否被删除
enumerable
属性能否被遍历
writable
属性能否写入值
value
属性值存储的位置,默认为 undefined
访问器属性描述符
configurable
enumerable
get
监听属性被读取操作
set
监听属性写入操作,接受一个参数为 写入的值
直接在对象字面量中书写
{ get propName(){ } }
{ set propName(v){ } }
操作属性描述符方法
Object.defineProperty(对象, 属性名, { 属性描述符对象 })
Object.defineProperties(对象, { 属性名: { 属性描述符 }, ... })
限制属性
禁止扩展
Object.preventExtensions(obj)
Object.isExtensible(obj)
阻止扩展与删除
Object.seal(obj)
Object.isSealed(obj)
阻止扩展/删除/修改
Object.freeze(obj)
Object.isFrozen(obj)
对象克隆
深克隆
简单类型值属性的对象
含有引用类型属性的对象
递归深克隆
lodash的方法
浅克隆
克隆对象与源对象的存在地址相同的引用
获取所有属性
属性名
Object.keys(obj)
属性名可遍历
Object.getOwnPropertyNames(obj)
不论属性名是否可遍历
属性值
Object.values(obj)
遍历对象
for .. in ..
可以获取对象所有可访问的属性,包括 对象原型 上的属性
判断对象属性是否存在
使用 in 操作符
key in obj
删除对象属性
使用 delete 操作符
delete obj.属性名
函数
作用
1、封装代码,作为功能集
普通函数
2、创建对象
构造函数
首字母大写(人为区分)
代码中以 this 添加属性
通过 new 方式调用
属性
length
函数形参个数
name
函数名,函数名不一定可用
prototype
返回函数原型对象
生成
1、声明函数
function fnName() {}
2、函数表达式
var fnName = function(){}
区别:函数声明优先于变量声明,且带值提升。函数表达式使用变量声明
3、构造函数
形参
定义:实参的占位符,本质上是函数内声明的变量
个数
多于实参,多余的形参值为 undefined
少于实参,多余的实参被忽略,可以通过 arguments 找到
值类型
简单类型:函数内部改变不影响传入的值
引用类型:函数内部改变影响传入的值
arguments
由实参组成的伪数组
在非严格模式下,形参于arguments中对应的实参互为映射
非严格模式下 argument.callee 代表函数本身
默认参
简单类型值
三元运算式
短路语句
ES6
引用类型值
对象合并 Object.assign()
不定参
使用 arguments
ES6 剩余参数 ...参数名
函数执行上下文
1、找函数形参
2、函数内声明函数提升
3、函数内变量提升
4、实参赋值
5、函数赋值
6、执行函数
函数类别
立即执行
(function [fn](){})()
(function [fn](){}())
var fn = function(){}()
!function(){}()
闭包
定义:能访问到被销毁作用域的函数中变量的函数
作用:创建封闭环境变量或者函数
弊端:因变量无法回收,使用过多可能会导致内存溢出
递归函数
自己调用自己的函数
优化:尾递归
回调函数
执行完某个操作之后执行的函数
函数方法
call
fn.call(thisObj, arg1, arg2...)
调用函数,改变this
apply
fn.apply(thisObj, [arg1, arg2...])
常用于函数转移,将函数 this 以及 所有参数转移给另一个函数使用
bind
fn.bind(thisObj, arg1, ..arg2...)
返回一个改变了this指向的函数,可以固定一部分参数
固定部分参数的函数称为偏函数
柯里化
将 f(a,b,c..) => f(a)(b)(c)...的方式
高级柯里化
可以像原函数一样调用
可以制作偏函数
可以柯里化使用
this
普通函数:指向 window
对象方法:指向调用的对象
使用 new 方式,指向 实例(即生成的对象)
DOM事件:指向绑定事件的DOM元素
作用域
作用:提供变量查找值的顺序
词法作用域,又名静态作用域
内部变量使用声明时所在的作用域
原型
作用:自身属性可以被实例对象共享使用
原型链:一个对象的原型可以是另一个对象的实例,由此形成的递进关系称为原型链。它提供了对象访问属性的查找顺序。终点是 null
函数
fn.prototype
Object的实例
fn.__proto__
Function
通过 new 构造() 创建的对象 -- 实例
对象
obj.__proto__
Object.getProtypeOf(obj)
Object.setPrototypeOf(obj, 原型对象)
constuctor
标识原型是哪一个构造函数的原型
继承
寄生式组合继承
构造函数实现私有属性继承
构造函数原型 = { __proto__: 父类原型 } 实现父类原型属性的继承
数据结构与算法
学习准备
vscode快捷键
leecode
刷题
数据结构
数组
两数之和
二分搜索
删除有序数组中的重复项
对象
链表
环形链表
链表中间节点
栈和队列
有效的括号
树
二叉树
前中后序遍历
翻转二叉树
算法
时间和空间复杂度
递归
动态规划
AJAX
简介
在不刷新当前页面的情况下,获取另一个URL信息,并将其呈现的技术
客户端:获取数据的主机 / 服务端:分享数据的主机
服务端分享形式
1、分享文件
http://www.baidu.com/index.html
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js
2、拦截路由,设置返回内容
http://bufanui.com/h5
https://new.qq.com/ch/milite/
核心对象
new XMLHttpRequest()
属性和方法
readyState
请求进度状态码
0-4
0 未发出请求
实例.UNSENT
1 建立请求
实例.OPENED
2 发出请求
实例.HEADERS_RECEIVED
3 获得部分数据
实例.LOADING
4 获得全部数据,请求结束
实例.DONE
onreadystatechange
监听改变过程
status
标识 HTTP 状态码
200
请求成功
400
参数格式有误
404
URL问题
415
文件格式有误
500
服务器内部错误
onloadstart
发出请求前
onload
请求成功
相当于 xhr.readyState == 4
onerror
请求出现意外情况,例如断网等
onprogress
请求过程监听
event.lengthComputable
判断进度事件是否可用
event.loaded
已加载字节数
event.total
预加载字节数
onloadend
请求结束
open(method, url, 是否异步)
设置请求方式以及路径
默认为异步,同步已经被取消了
setRequestHeader(key, value)
设置请求头
身份验证
参数格式 Content-Type
text/plain 默认
application/json
application/x-www-form-urlencoded
multipart/form-data
send(请求体)
发送请求,GET请求没有请求体
jQ.ajax
相当于ajax方法的封装
$.ajax({ setting })
url
请求地址
type
请求方式
data
请求参数
contentType
请求参数类型
header
请求头设置
timeout
超时时间设置
dataType
预期服务器返回数据类型
beforeSend
发送请求前的回调
dataFilter
在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
success
请求成功的回调,默认服务器返回值为实参
error
请求失败的回调,函数默认接收三个参数
XMLHttpRequest 对象
错误信息
null
timeout
error
notmodified
parsererror
(可选)捕获的异常对象
complete
无论请求成功或失败都会执行的函数
$.post/get()
跨域
origin不一致:限制ajax访问/dom
document.domain + iframe
两个页面同主域或者同IP,可以使用此方法
postMessage
anotherWindow.postMessage(content, anotherPageOrigin)
anotherPage可以通过 window.onmessage 事件接受发来的消息
event.data
消息内容
event.source
消息来源页面的window对象
event.origin
消息来源页面的源
通过 event.source.postMessage("消息内容", event.origin); 可以传回消息
jsonp
利用 script 标签可以发出 GET 请求,不受跨域限制,且可以将得到的内容解析为 JS 执行代码的特性,实现前后端跨域请求
一般做法:前端定义好接受返回值的函数,将函数名发送给后端,后端返回一段函数调用的文本,将数据作为实参写入
CORS
直接由服务端定义,实现前端的跨域访问,最喜欢了
WebSocket
作用:实现客户端与服务端的双向通讯
用途:聊天、K线图等
使用
1. 声明实例 -- 参数:链接地址
var ws = new WebSocket(ws://xxx)
2. 过程监听
onopen
通讯建立的监听函数
onerror
通讯出现异常的监听函数
onclose
通讯关闭的监听函数
onmessage
获取到服务端消息的监听函数
event.data 获取消息内容
3. 发送数据
ws.send(数据)
4. 关闭
ws.close()
0 条评论
下一页