JavaScript知识路径图，含大部分知识点
2022-03-14 18:28:19 9 举报AI智能生成
登录查看完整内容
JavaScript知识路径图，包含大部分知识点
作者其他创作
大纲/内容
文档对象模型
Document Object Model
改变HTML属性
改变HTML元素
改变CSS样式
对事件作出反应
作用
概念
getElementById()
通过ID
getElementByTagname（‘h1’）
通过标签名
getElementByClassName(’box‘)[]
通过类名
querySelector()
querySelectorAll()[]
通过选择器
得到标签
NodeList元素对象
getElementByName（）
通过name属性
查找
documen.head
document.title
document.body
document.documentElement
documen.URI
documen.documentURI
documen.baseURI
document.write
document.writeln
cookie
seession
本地存储
方法
localstorage
sessionstorage
document.cookie
http无状态
btn.value
innerTEXT
innerHTML
outerHTML
textContent
文本
attributes
parentNode父节点
childNodes
点击的元素
e.target
事件
e.type
Window
e.view
e.which
e.preventDefault（）阻止默认事件
e.stopPropagation（）阻止事件冒泡
e.cancelBubble=true 阻止冒泡 IE6-8
e.x/y
相对于电脑屏幕
e.screenX/Y
相当于文档页面 IE9+
可用于节点
e.pageX/Y
e.target
padding+width+border 获取元素位置
属性节点
style
element.style
element.currentStyle
getComputedStyle（obj，null/false）[value]
element.className
元素属性
地址
不能直接添加字符串
appendChild()
beforebegin
afterbegin
begoreend
afterend
insertAdjacentHTML（“position”，“text”）
position
appen（）
createElement（）
createTextNode（）
createAttribute（）
creatComment（）注释
增
removeChild()
删
set/getAttribute()
可用此方法创建insertAfter（）
insertBefore（new，old）
replaChild（new，old）替换
true 深拷贝
flase浅拷贝
cloneNode（参数）复制节点
改
hasChildNodes（）
一行一个
.childNodes
children
第一个子节点，包含文本空格
firstChild
lastChild
第一个元素节点
firstElementChild
lastElementChild
上一个兄弟节点
previousSibling
previousElementSibling
.nextSibling下一个兄弟节点
nextElementSibling
parentNode
parentElement
nodeType
nodeName
nodeValue
属性
element_node
1
attribute_node
2
text_node
3
cdata_section_node
4
entity_peference_node
5
entity_node
6
processing_instruction_node
7
comment_node
8
document_node
9
document_type_node
10
document_fragment_node
11
notation_node
12
节点类型
节点关系
getAttributeNode('class')
getAttribute('class')
removeAttribute('class')
hasAttribute('class')
arrtibutes[]
arrtibutes.class
arrtibutes
attributeNode（）
增div.className=“new”
删div.className=‘ ’
改div.className=“new old”
查div.className
class
add（）追加
.value替换
remove（）
replace（old，new）
toggle（“ ” ）切换
类数组.classList
data-
设置
自定义属性
属性对象
集合HTMLCollection
document.forms
document.forms.formName.elements
获取
表单
insertRow（num）
insertCell（num）
表格
document.createDocumentFragment()
动画
obj0currentStyle[属性名]
非行内样式
鼠标点击触发
onclick
双击
ondblclick
鼠标弹起触发
onmouseup
鼠标移动触发
ononmousemove
鼠标经过触发，冒泡
onmouseover
鼠标离开触发 冒泡
onmouseout
同上的效果，不冒泡
onmouseenter
鼠标离开 不冒泡
onmouseleave
鼠标按下触发
onmousedown
右键菜单
contextmenu
失去鼠标焦点触发
onblur
获得鼠标焦点触发
onfocus
UI事件
load/scroll
滚轮事件
onmousewheel
文本事件
textinput
onkeydown
onkeyoress
onkeyup
e.keyCode
组合键 需要码表
键盘
document.readyState查看状态
onreadystatechange页面状态改变
输入字符触发
合成事件
compositionstart
事件类型
焦点事件
鼠标事件
false会冒泡
true捕获
name.事件=function（）{}
动态绑定事件
执行不返回值
javascript：alert（）
alert（）
test（）
静态绑定
绑定事件
事件捕获
事件处于目标阶段
事件冒泡
利用事件捕获
事件委托
DOM事件流
e.preventDefault（）IE11
e.returnValue=false IE10以下
阻止默认行为
eventTarget.onclick=null
eventTarget.detachEvent（on+eventName，callBack，false）
删除事件
DOM
全局变量属于window属性
全局函数属于window方法
window
top
document
对象
onload
onresize
宽度
高度
screnn屏幕
窗口再屏幕上的位置
浏览器信息
返回对象
href
.search
location对象
.userAgent
nabigator对象
foeward（）下一页
back（）上一页
go（num）
histroy对象
alert（）弹窗
scroll（x，y）
confirm
prompt（）
close ()关闭自己
clearTimeout（timeID）
setInterval（)
clearInterval（timeID）
定时器
window.requestAnimationFrame(fn)
screen
Location
History
Navigator
弹出框
Timing
Cookies
BOM
.offsetParent
元素element相对带有定位父元素上方的偏移量
.offsetTop
.offsetLfeft
padding*2 + width +border*2获取自身的宽度
.offsetWidth
padding *2+height+border*2获取自身的高度
.offsetHeight
style.width带单位，不包含padding和border 可读写可获取和赋值
和style的区别
offset用于获取元素的位置 offsetLeft/Top
offset偏移量
border
.clientTop
.clientLeft
width+padding*2
.clientWidth
clientHeight
用于获取元素的大小 clientWidth/Height
client
被卷上去的上测距离
.scrollLeft
被卷上去的左测距离
.scrollTop
自身的实际宽度
.scrollWidth
自身实际高度
.scrollHeight
获取滚动距离window.pageXOffset/YOffset
scroll
兼容性
touchstart
touchmove
touchend
触摸点的列表
touches
正在触摸当前DOM元素的列 表
targetTouches
手指状态发生改变的列表
changedTouches
事件对象
meta content=“user-scalable=no”
禁止用户缩放
touch封装函数
fastclick插件
click延迟300ms解决
移动端特效
轮播图
swiper插件
自适应
搭配cssrem插件
data-dpr
font-size
flexible
插件
特效
= 【[ ] [ ]】二维数组
=new Arrary（长度）对象表达式
定义
不要求数据类型严格一致
赋值
arr[0]
访问
sort（）排序
拼接
转化为字符串
slice（开始位置，结束位置）[ )
截取
splice（参数1，参数2，参数3）
delete arr[0]
删除
pop（）删除
push（内容）
shift（）
unshift（内容）
删除和添加
Array.isArray（arr）
判断
indexOf（内容）
lastIndexOf（）
find（）
findIndex（）
includes（内容）
length
for
for...of
for...in
优化的for
forEach
遍历
map
1.Array.from（new Set（arr））ES6
2for + .arr.splice()
3.for + sort+push
4.indexof+push
5.递归
6.map
去重
Array数组
sqrt（）开方
绝对值
数学运算
默认 0-1
*10 0-9
*10+1 1-10
Math.random（）随机数
Math.sign（）
判断符号
Math.PI
圆周率
向上取整
向下取整
取整
Math.round（）
四舍五入
最大值
最小值
数值
Math
getMonth（）从0开始
getFullYear（）
getDay（）
getHour（）
getSeconds（)
getMinutes()
getMIllisecinds()
getTime（）时间戳
toString
toDateString
toLocaleDateString 年月日
toLocaleTimeString时间
格式化
new Date（）
Date日期
\\'
\\"
\
\\\\反斜杠
\\b退格
转义字符
+ 拼接
``; es6
\\ 转义字符
换行
.length
str[2]取值
长度
找不到返回 -1
search（‘内容’）返回位置
charCodeAt（）Unicode编码
String.fromCharCode（72）
charAt（2）取字符
取字符
substring（start，end，长度）
slice（start，end）
substr（start，长度）
提取字符串
replace（‘’，‘’）返回新字符串
替换
toLowCase（）
toUpperCase（）
大小写
concat（）
连接
trim（）删除头尾空格
空格处理
str.split（分隔符）
转换为数组
String字符串
内置对象
字面量
调用系统构造函数
定义构造函数
工厂方式
创建方法
删除delete
封装
重用
关键字 function
函数体{}
返回值return
具名函数
匿名函数（函数表达式）
全局作用域
局部作用域
块级作用域ES6
作用域
递归调用
形参
实参
函数内部未var声明变量，则变为全局变量
回调函数
arguments接收参数
参数
js没有重载
/**
* 方法名
*所属类名
*@param 参数类型
*return 返回值类型
*功能描述
**/
注释
函数
表达式会产生值
表达式构成语句
表达式和语句
可只定义不赋值
多个变量
字符 数字 _ $ 组成 小写驼峰
var
转为字符串
String 字符串
数值类型
数值范围
非数值
数值转换
数字Number
布尔
Null
Undefined
分支主题
简单类型
引用类型（对象）
复杂类型
undefined
boolean
string
number
object
function
检测typeof（）
数据类型
申明 不赋值
不申明 不赋值
不申明 只赋值
3个特殊情况
变量提升和预解析
变量
+
-
*
/
%取模（求余）
++和--
一元运算符
取幂**
算术运算符
=
+= -= *= /=
赋值运算符
>= <= > <
==
===
！=
！==
？？空值合并操作符
关系运算符
？： 三元运算符
条件运算符
&&与
||或
为任意数据类型两次取反，转换为布尔值
！非
逻辑运算符
非布尔值 先转换布尔值，返回原值
，逗号操作符
（）圆括号操作符
运算符（操作符）
type=“Javascript：void（alet（a））”
阻止a标签的默认行为
href=“Javascript：void（0）”
Void
alert
prompt
console.log
documen.write（）
debugger；调试
输出
if else
switch （）case ’ 1‘：
分支
while
do while
循环
break和continue
分支循环
null：空值
undefined：未初始化
null和undefined区别
toFixed(num) 方法来保留小数 结果不精确
js精度
问题
语法基础
历史
运行在客户端的脚本（script）语言
基于对象
动态性
跨平台性
可以基于Node.js（服务端开发）用作后端
是什么
ECMAScript
组成
Web APIs
行内
head中
body中
内嵌
外部
书写位置
大小写驼峰式
变量命名规范
can
has
is
函数命名
手风琴形式
函数注释
单行/多行注释
规范
基础知识
注意且重要
注意
重要 常用
# id
. class
> 子节点
+ 兄弟节点
^ 父节点
（）分组
[]属性
$ 编号
Emmet语法
JS
0 条评论
回复 删除
下一页
