1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
| # |注意:本篇笔记存在大量的自定义格式,请详细阅读下面的说明, 避免可能会产生的语法上的理解错误和歧义。
# |说明:"本页面笔记代码所使用格式:" #+[中文名称+代码本体]+代码举例+
# |说明:本笔记临时使用"t"作为"数值,属性"的通用命名
# |说明:本笔记临时使用"h"作为"函数(function)"的通用命名
# |说明:本笔记临时使用"I"作为"脚本,数值,属性"的通用格式,(I)可以是您的任意脚本
—————————————————————————————————————————————————————————————————————————————————————————————————————————————
# |前置知识点：
# |JS中的六种数值类型：1.string(字符串) 2.Number(数值) 3.Boolean(布尔值) 4.Nu11(空值) 5.Undefined(未定义) 6.Object(对象)
# |JS中的引号规范：1.在JS中字符串需要使用引号引起来 2.使用双引号或单引号都可以，但是不要混着用 3.引号不能嵌套，双引号不能放双引号，单引号不能放单引号 4.在字符串中我们可以使用\作为转义字符来输入特殊字符等 如:(\"表示" |\'表示' |\n表示换行 |\t表示制表符 |\\表示\)
# |JS中所有的数值都是Number类型:包括整数和浮点数(小数)
# |JS中可以表示的数字的最大值:Number.MAX VALUE = Infinity 表示正无穷
# |JS中可以表示的数字的最小值:-Number.MAX VALUE = -Infinity 表示负无穷
# |非数字变量前加"+"可以转为数字型
# [赋值-计算] var t = 00
# |[数据-常规] var t = 00 或 "00" 或 true
# |[数据-合成] var t = {t1:00 t2:"00" t3:true}
# |[数据-空值] var t = null 或 undefined
—————————————————————————————————————————————————————————————————————————————————————————————————————————————
# |JS引入:[内联式引入] <script var t = 0: ></script> //在html文档的script标签里直接写入js
# |JS引入:[外部引入] <script src="./xx.js"></script> //在html文档的script标签内引入外部js表
变量———————————————————————————————————————————
# [全局变量: var] var t = 1
# [局部变量: let] let t = 1
# [局部常量: const] const t = 1
# [变量提升: console.log] console.log(t); var t =1
# [输出后台: console.log] console.log(t)
# [输出弹窗: alert] alert(t)
# [输出页面: document.write] document.write(t)
# [输入弹窗: prompt] t =prompt('T')
数值———————————————————————————————————————————
# [数据-检查: typeof] typeof t;
# [数据-查询: length] t.length
# [计算-常规] t1 + t2
# [计算-自增] ++t
# [计算-变体] t1 += t2
# [计算-比较] t1 > t2
# [计算-取反] !t
# [条件-且] t1 < t2 && t1 = t2
# [条件-或] t1 < t2 || t1 = t2
判断———————————————————————————————————————————
# [判断-单条件: if] if(t1 == t2){I}
# [判断-多条件: if/else] if(t1 == t2){I1}else{I2}
# [判断-三元运算] t1 == t2 ? I1:I2
# [判断-多条件: switch/case;break] switch(t){case a:I1;break;case b:I2;break;case c:I3;break;default:I4}
# [循环-单条件: for] for(初始值;条件;迭代因子){I}
# [循环-单条件: while] while(条件){I}
# [循环-跳过本轮: break] for(初始值;条件;迭代因子){I;break}
# [循环-终止本轮: continue] for(初始值;条件;迭代因子){I;continue}
# [获取指定位置数值: charAt] t.charAt(I)
# [数值合并-不运算: concat] t1.concat(t2,I)
# [数值截取: substring] t.substring(I1,I2)
# [数值截取: substr] t.substring(I1,I2)
# [数值查找: indexOf] t.indexOf("I1",I2)
# [清除前后空格: trim] t.trim()
# [清除头部空格·ES6: trimStart] t.trimStart()
# [清除尾部空格·ES6: trimEnd] t.trimEnd()
# [数值分割-部分: split] T.split("|",I)
# [数值分割-全部: split] T.split("")
数组———————————————————————————————————————————
# [数组] t = ["I1","I2","I3","I4"]
# [数组-遍历: ...] for(let i=0;i<t.lenget;i++){T= t[i]}
# [数组-判断: Array.isArray] Array.isArray(t)
# [数组-增加尾: push] t.push("In")
# [数组-删除尾: pop] t.pop("In")
# [数组-删除头: shift] t.shift("In")
# [数组-增加头: unshift] t.unshift("In")
# [数组-删除指定: splice] t.splice(I,t)
# [数组-遍历清空: shift] while(t = I.shift()){console.log(t)}
# [数组-元素组合: join] t.join()
# [数组-翻转排列: reverse] t.reverse()
# [数组-元素查找: indexOf] t.indexOf(I1,I2)
# [数组扩展ES6-展开符号: ...t] t= [1,2,3,4]
# [数组扩展ES6-运算符号替代: ] Math.max.apply(null,arr) ==> Math.max(...a)
# [数组扩展ES6-类数组转换: ]
# [数据结构ES6-Set添加: set] t = new set()
# [数据结构ES6-Set-数组元素去重: set] t1=[1,2,3] ; t2 = new set(t1)
# [数据结构ES6-Set-字符串字符去重: set] t1= [1,2,3] ; t2 = ([...new set("abcabcdd")].join(""))
# [数据结构ES6-Set-数据判断: set] t= new set();t.add(100);t.add(200);t.delete(100);a=t;var t2=t.has(100);console.log(flag);
# [数据结构ES6-Set-清除所有成员: clear] t= new set();t.add(100);t.add(200);t.delete(100);s.clear()
# [函数-公式: function] function + 函数名称(函数变量,函数变量) + {函数变量组成的公式}
# [函数-示范: function] function h(I1+I2){t I1+I2}
# [函数-参数引入: function] function h(I1,I2){t I1+I2}
参数改变: h(I1,I2)，
# [函数扩展ES6-箭头函数: =>] h= function(x,y){return x+y;} 相当于 h =(x,y)=> x+y
# [对象-声明调用: key-value] t= {t1:I1,t2:I2}
# [对象扩展ES6-简洁表示法: ] return {x=1, y=2} ===> function getPoint(){const x=1;const y= 10;return {x, y};}getPoint()
# [数学-绝对值: Math.abs] Math.abs.t
# [数学-最大值: Math.max] Math.max.t
# [数学-最小值: Math.min] Math.min.t
# [数学-向下取整: Math.floor] Math.floor.t
# [数学-向上取整: Math.ceil] Math.ceil.t
# [数学-伪随机小数: Math.random] Math.random()
# [数学-伪随机整数: function getRandomArbitrary()] function getRandomArbitrary(min,max){let h= Math.random()*(max-min)+min}
# [时间-系统时间: data] console.log(Data.now())
# [仓库盒子: container] container.
#
#
# [文档获取-document: document] a= document
# [元素获取-标签: document.getElementsByTagName("")] a= document.getElementsByTagName("t")
# [元素获取-class: document.getElementsByClassName("")] a = document.getElementsByClassName("t");
# [元素获取-name: document.getElementsByName("")] a= document.getElementsByName("t")
# [元素获取-id: document.getElementsById("")] a= document.getElementsById("t")
# [元素获取-H5新增: document.querySelector()] a= document.querySelector(".t")
# [元素获取-H5新增: document.querySelectorAII()] a= document.querySelectorAII(".t")
# [元素放置: .appendChild()] t1.appendChild(t)的作用是把t标签放入t1标签中
# [元素创建-生成节点: createElement] a= document.createElement('t')
# [元素创建-成成文本: createTextNode] a= document.createTextNode('t')
# [元素创建-生成属性: createAttribute] a= document.createAttribute('t')
# [元素操作-id更改: .id] t1.id = "t2"
# [元素操作-添加样式: .className] t.className = "t1 t2"
# [元素操作-添加或删除] [.classList] t1.classList.add("t2")
# [元素操作-标签读取: .innerHTML] t.innerHTML
# [元素操作-文本读取: .innerText] t.innerText
# [位置获取-元素位置: Element.clientHeight, Element.clientWidth] a= Element.clientHeight.t
# [位置获取-视口高度: document.documentElement.clientHeight] a= document.documentElement.clientHeight
# [位置获取-网页高度: document.body.clientHeight] a= document.body.clientHeight
# [位置获取-滚动高度: document.documentElement.scro1lTop] a= document.documentElement.scro1lTop
# [CSS操作-网页style: setAttribute] t.setAttribute("style""t1;t2;t3")
# [CSS操作-元素style: .style] a= document.querySelector("t").style
# [CSS操作-cssText: csstext] a= document.querySelector("t").style
# [事件方式-HTML事件: onclick] function hhh1(){a=1+2} http[button>:|<onclick>=："hhh1"
# [事件方式-DOM0级事件: onclick] var t=document.getElementsById("t"); t.onclick=function(){a=1+2}
# [事件方式-DOM2级事件: addEventListener] var t=document.getElementsById("t"); t.addEventListener("click",function(){a=1+2}
# [事件对象-Event-属性: Event.Target] var t=document.getElementsById("t"); t.onclick = function(event){Event.Target.innerHTML="0"}
# [事件对象-Event-查询: Event.type] var t=document.getElementsById("t"); t.onclick = function(event){a= Event.type}
# [事件对象-Event-阻止事件: event.preventDefault] var t=document.getElementsById("t"); t.onclick = function(event){event.preventDefault}
# [事件对象-Event-阻止冒泡: event.stopPropagation] var t=document.getElementsById("t"); t.onclick = function(event){event.stopPropagation}
# [事件操作-鼠标事件: click] 事件注意选择合适的事件方式执行函数|可选择鼠标事件
on+
click:按下鼠标时触发
dblclick:在同一个元素上双击鼠标时触发
mousedown:按下鼠标键时触发
mouseup:释放按下的鼠标键时触发
mousemove:当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发
mouseenter:鼠标进入一个节点时触发，进入子节点不会触发这个事件
mouseleave:鼠标离开一个节点时触发，离开父节点不会触发这个事件
mouseover:鼠标进入一个节点时触发，进入子节点会再一次触发这个事件
mouseout:鼠标离开一个节点时触发，离开父节点也会触发这个事件
wheel:滚动鼠标的滚轮时触发
# [事件操作-键盘事件: key]
on+
keydown:按下键盘时触发
keypress:按下有值时的健触发
keyup:松开键盘时触发的事件
keycode:每个键唯一标识ASCII码
# [事件操作-表单事件: key]
on+
input:内容输入改变时触发
select:选中输入时内容触发
Change:内容完全输入或修改回车后触发，或内容失去焦点后触发
reset: 重置表单时触发,同时返回默认值
submit: 将数据提交至服务器时触发
# [滚动事件-: window.onscro1l = showTop] window.onscroll=debounce(scrollHandle,t)
# [事件操作-事件代理-delegation: ...] var ul= document.querySelector('ul');ul.addEventListener('click',function(event){3if(event.target.tagName.toLowercase()==='i'){}})
# [定时器-延时执行-Setlnterval: ...] hhh(function(){console.1og("定时器")，1000)
# [定时器-间隔执行-Setlnterval: ...]
# [防抖事件1-滚动时间检测: ]
|window.onscroll=debounce(scrollHandle,t)
|function debounce(t1,t2){var timer = null;return function(){if(timer){clearTimeout(timer)}timer = setTimeout(t1,t2)}
|window.onscroll=debounce(scrollHandle,t)
|function scrollHandle(){var scrollTop =document.documentElement.scrollTop;a=scrollTop;}
# [防抖事件2-节流函数: ]
|function throttle(t1,t2){var valid = true;return function(){if(!valid){return false;}valid = false;setTimeout(function(){t1();valid = true;})}}
|window.onscroll=scrollHandle
|function scrollHandle(){var scrollTop =document.documentElement.scrollTop;a=scrollTop;}
|window.onscroll=debounce(scrollHandle,t)
# [命令行指令集-CMD]:
|打开命令行窗口:"win+r"
|选择盘符:"盘符名"+"冒号"
|查看盘符及目录下文件与文件夹:"dir"
|清空命令行信息:"cis"
|进入文件夹或目录:"cd"
|快速补全:"tab"
|创建文件夹: "mkdir"
|查看历史输入过的命令:上下按键
# [解构赋值: ...]:格式: const+{需要简化省略的词}=属性名称
# [遍历循环: ...]for (let i of 't'){console.1og(i);}
# [字符串模板]:
|var t1 ="t1.com"
|var t2 ="t"
|var ta = "<a href ='"+ t1 +"'>"+ t2 +"</a>"
|var tb =`<a href ="${t1}">"${t2}"</a>"`
# [字符串查查找]:
|includes():返回布尔值，表示是否找到了参数字符串
|startsWith():返回布尔值，表示参数字符串是否在原字符串的头部
|endswith():返回布尔值，表示参数字符串是否在原字符串的尾部
# [字符串重复: repeat] a= t.repeat(?)
# [字符串补全: padStart(),padEnd()] a= t1.padStart(?位数,'要补的参数')]
# [字符串空格去除: trimStart(),trimEnd()] a= t.trimStart()
# [字符串下标索引: at] t.at(?)
# [promise-异步操作: promise] const promise = new Promise{function(resolve, reject){}}
# [Async-同步操作: Async] function print(){setTimeout(() =>{console.1og(“定时器");},1000) console.1og("He11o");}
print() //Async可以将函数从异步操作变为同步操作
# [Class-类方法: Person]class Person{constructor(name,age) ;{this.name = name;this.age = age} //创建类
# [constructor: constructor] //类的默认方法，通过new命令生成对象实例时自动调用该方法。
# [Class-类属性: ]
# [MODULE语法-export-模块命令: export]
|//export命令导出变量
|export var firstName ='sxt'
|export var lastName =itbaizhan';
|export var year = 2000;
|//export命令导出函数
|export function add(x，y){return x+y;}
# [MODULE语法-import-模块命令: impor]//使用 expon 命令定义了模块的对外接口以后，其他js文件就可以通过 impor 命令加载这个模块
|// name.js
|export var firstName ='sxt';
|export var lastName ='itbaizhan';
|export var year =2000;
|//main.js
|import {firstName,lastName,year }from'./profile.js';
|//如果想为输入的变量重新取一个名字，impon 命令要使用as关键字，将输入的变量重命名
|// value.js
|export var value = 1;
|// main.js
|import {value as val }from'./value.js';
|//除了指定加载某个输出值，还可以使用整体加载，即用星号(·)指定一个对象，所有输出值都加载在这个对象上面
|// circle.js
|export function area(radius){return Math.PI *radius * radius;}export function circumference(radius){return 2 *Math.PI * radius;}
# [MODULE语法-exportdefault-模块命令: exportdefault]//不用阅读文档就能加载模块，为模块指定默认输出。
|//export-default.js
|export defaut function(){console.1og('foo');}
|//其他模块加载该模块时，impon 命令可以为该匿名函数指定任意名字
|//import-default.js1
|import customName from'./export-default';customName();//'foo'
|
wechat
alipay
