JS
ECMAScript:语法范围
变量,函数名:
名字由字母、数字、下划线、$组成，第一位不能是数字，变量名区分大小写
驼峰式命名：userLastName
运算符：
= : 赋值，结果是等号右侧的值
>、<、>=、<=进行数值比较
==、===判断是否相等，===对比数据类型和值
数据类型:
string number Boolean null undefined
栈：桥（从上到下按格排列）先进后出
Array Object function
typeof可以验证除Array、object以外的数据类型
引用数据类型储存的是一个指向，指到实际的值（堆里），比较时按地址比较
判断：if switch 三元运算符：只能执行一句话 列：x>5&&console.log(1);
wsitch(变量){
case1;
//执行
break;//终止当前条件
default: //其他情况,相当于else
}
三元运算符，于if相比智能执行单条语句
&&，逻辑与（and）
智能执行单条语句，可能引起运算顺序错误，不能执行return语句
循环
for(){}
continur;跳出本次循环，进入下一次循环
6.7号
while(条件){执行}
do{执行}while(条件),限制性，在判断，最少执行一次
数学函数
取最大值:Math.max(1,2,3,4)
取最小值:Math.min(1,2,3,5)
取整数:
向上:Math.ceil(3.1)
向下:Math.floor(4.9)
四舍五入:Math.round(2.9)
绝对值：Math.abs(-5)
随机值：Math.random()，值是0-1之间的小数 0000
Math.random()取值0-1（不包含0,1），x10之后范围是0-10(不包含0,10)，
最后向下取整，范围0-9
设置box的随机背景+
Math.random()*255 0-255
6.8
for循环只有一句语句的话可以不加{}
列：
for(var a=0;a<2;a++)
for(var a=0;a<2;a++)
for(var a=0;a<2;a++)
for(var a=0;a<2;a++)
for(var a=0;a<2;a++)
for(var a=0;a<2;a++){
}
字串符:
表现形式：用""或者''包裹的数据
特征：长度，length， String的实例属性
方法：
1、获取字符串中某字符串的位置(索引，从0开始)
最后一个字符的位置是 字符串长度-1
匹配不到，结果是-1
通常用indexOf()是否等于-1来验证是否包含某字符
str.indexOf("s");
2、从后向前获取字符串中第一次匹配到的某字符串的位置
str.lastIndexOf()
与indexOf的区别，仅仅是查找方向相反
indexOf()和lastIndexOf()验证的是===
3、获取某位置的字符
①、str[索引]，类似获取数组元素
②、str.charAt(索引)
4、截取字符串
①、str.substring(开始索引，结束索引-不会被选中)
只有
②、str.substr(开始索引，要截取的长度)
只有开始索引，从此位置截取到字串符末尾
③、str.slice(开始索引，结束索引-不会被选中)
只有开始索引，从此位置截取到字符串末尾
，如果开始没有开始索引，复制整个字符串
获取扩展名
从.的位置开始向后截取
获取.的位置上：
5、字符串的拼接
+
引号嵌套：单引号里面用双引号，双引号里面用单引号
双引号里的双引号需要转义 \" \"
多行字符串末尾加转义字符\,能在字符串中保留格式
concat:链接,将多个字符串拼接成一个新的字符串
，str1.concat(str2,str3...,strn)
6.分隔字符串，将字符串分割成数组
tt.splice(分隔符),
分隔符可以是空字符串翻转字符串:将字符串分隔成数组，
再将数组翻转，然后拼成字符串
7.转换大小写
转大写:tt.toUpperCase()0
转小写:tt.toLowerCase()
8、查找位置 tt.search()
indexOf()查找具体字符串cha
search()查找具体字符串或同类型
(符合正则表达式条件)字符串
9、查找替换
将符合条件的字符串替换指定的字符串，不改变原字符串
tt.replace(要查找的，要替换成什么)，默认只替换第一次匹配的内容
tt.replaceAll(要查找的，要替换成什么),默认全部替换
/\d/g 或者/[0-9]/g
如果用正则表达式replaceAll一定用g，replace不用g同样仅替换第一次匹配
正则表达式/\d/
6.9
数字 number
整数、小数、支持+-*/
转换方式
强制转换：将数字转成字串符String(数字)
将字符串转换成数字Number(str)
parseInt(str)3.1415926535897932384626(str)
parseInt和parseFloat区别：
parseInt转换之后不保留小数
第一位是非数字，转换结果为NaN
Number和parseInt与、parseFloat的区别
number只能转换纯数字字符串，
如果有非数字，结果是NaN
隐式转换：数字+""
字符串转数字：
/1 -0 *1
包含非数字，转换结果是NaN
数字转小数，或者保留小数位数：
toFixed(小数位数)
作用：
整数后面补0
精确小数位数(四舍五入)
检测一个数字是否为有效数字
isNaN(要检验的数字)
，结果是true，证明不是有效数字
NaN：not a number，但是数据类型是number
Number()
parseInt()
parseFloat()
isNaN()
toFixed()
6.10
函数 function
作用：有利于多次调用，执行重复的语句
定义方式：
1、函数声明
function 函数名(){
执行语句
}
2、表达式
var xy=function(){
执行语句
}
3、构造函数创建
var f=new Function()
函数声明与函数表达式的区别：
函数声明会在预编译阶段前置，
在var的后面，在所有语句执行之前
函数表达式类似于遍历声明，var提升之后，
没有赋值之前无法获取函数
函数调用：函数名()
作用域：
全局作用域：
script标签下的环境，全局作用域下声明的变量或函数，
能在任何区域使用
函数作用域：
function的内部环境，函数作用域中声明的变量
或函数(局部变量)，只能在函数内部使用
函数里为声明直接赋值的变量，称为自由变量，当函数调用
后，自由变量自动变为全局变量。(严格模式"usestrict"下，
自由变量报错)
var声明的变量与直接赋值的变量(自由变量)区别在于var声明
的变量不能通过delete删除
作用域链：
使用变量时，如果函数内部不存在，向外层函数查找该变量，
...一直到全局作用域，还未找到，则是undefined(就近原则)
回调函数：
某操作执行完之后，执行的语句立即执行
函数(自执行函数)：
(function(){
console.log(123);
})()
优点：
1、避免污染全局
2、形成闭包环境，可以传参数
缺点：
没有函数名，无法重复使用
函数重点一:参数
形参：创建函数式设置的变量，形式参数
实参：函数调用时，用来替换形参的数据，实际参数
函数重点二:返回值
返回值指的是函数的执行结果，如果没有retarn，
返回值默认为undefined
retarn之后的语句不再执行
retarn只能出现在函数里
6.11
函数特性一:实参列表 arguments
与形参无关，只能出现在函数里
函数特性二：参数的默认值
a=a\||1: a是undefined, unll,0, "",a=1
null运算符 a=a??1
a是
数组
作用：可以存储多个值
只要用于存储多个同类型的值
数组是一个引用类型，变量存储的是一个指向
值和引用的区别：
传值：只能更改整个值，对其他变量不产生
影响 比较的是值
引用传递：比那两代表了已给指向，指到一个地址，
通过变量改变数据一部分时，相当于修改对应地址上的
数据，凡是指向该地址的变量，访问到的结果都是跟改后
的结果， 比较的是地址，每一个引用类型数据都有一个不
同的地址，所以引用类型数据比较
数组格式：
[数组元素1，数组元素2，...数组元素n]
验证数组:
Array.isArray([1,2]);结果是true或false
数组翻转:[1,2,3].reverse()
数组拼接成字符串:[1,2,3].join("-")
str.spltca
数组创建方式：
var arr=[1,2]
var arr2=new Array(1,2)
数组的特长：
数组的长度：数组元素的个数
数组的索引：每个元素对应的位置，从0开始，到长度-1
数组元素的访问方式：
var arr=[1,2,3];
vat[0]
遍历数组：
1、for循环
数组拼接
1.concat:
数组元素的增加：
利用数组长度为索引，在末尾添加新元素
索引>(大于)数组长度是，会在数组中产生空元素
arr.push();//在数组元素的末尾添加新元素，返回
值是数组长度
arr.unshift(item1,item2...,itemN);//
在数组元素前面添加
数组元素的删除：
arr.pop();尾部删除元素，返回被删除的元素
arr.shift();头部删除元素，返回被删除的元素
任意位置添加或删除元素：
arr.splice(开始索引,要删除的长度，
[用来补位的---可以有也可以没有])
删除:
arr.splice(开始索引，要删除的长度),
返回值是被删除的元素组成的数组
在某位置前添加：
arr.splice(索引,0,用来添加的内容)
替换:
arr.splice(开始索引,要删除的长度，
用来补位的内容)
数组元素empty：
没有元素，但是占据了一个位置[,,,,]
数组排序：
arr.sort(function(a,b){
retarn a-b; //升序
}
6.14
数组遍历一:
map:用于数组元素的修改，生成由返回值组成的新数组,
map里用retarn
forEach：用于遍历、展示，也可以用于元素修改
item:数组的每一个元素
index:和item对应的索引，index是遍历时释放
的数据，代表索引
第三个值:正在遍历的数组
(function(所有跟上面一个意思))
数组遍历二:排序
arr.sort(function(a,b){
retarn a-b; //升序
}
数组遍历三:
some:用于检测数是否符合条件的元素，有一个
符合，结果就为true 一真则真
数组遍历四：
every:用于检测数组中的元素是否全部符合条件，
全部符合，结果为true
全真才真，一假则假
数组遍历五:
filter:从数组中筛选出符合条件的元素，组成新的数组
数组遍历六、七
reduce、reduceRight:获取数组元素的和，或者对数组中的
字符串拼拼接
start:初始值，数字求和，初始值默认为0
函数里的参数
a:每次累加之后的值
b:当前元素
c:当前元素对应的索引
d:数组
e:初始值 e就是结尾加的数
其他的方法里面没有a
对象 {属性:值，属性:值}
6.15
对象，表现形式{属性名:值，属性名:值}
访问方式，用 .(点)获取属性值或设置属性的值
6.16
用户与页面之间的交互
dom文档对象模型 document object model
时间——重点
1、dom元素的获取:
通过id获取:document.getElementById(id名)--
单个元素
通过class获取:document.getElementsByClassName
(class名)--多个元素，类数组或伪数组(有索引，有
length，但不是数组组)
通过标签获取:document.getElementsByTagName(标签名)[0]
--多个元素
body:document.body--直接获取body
通过name属性来获取:document.getElementsByNamen("x")
--多个元素
通过选择器获取：document.querySelectior(选择器)
---单个元素
通过选择器获取:document.querySelectorAll(选择器)-
--多个元素(即使是id，结果也是一个集合)
HTMLcollection
arguments实参列表，有索引，有长度，是伪数组
arguments只能用在函数里，函数外作为变量处理
Nodelist
结构 表现 行为导致结构或表现发生变化
内容
dom.innerText:获取或设置dom元素里的文本(忽略html标签)
设置内容时，将标签作为文本处理
dom.innerHTML:获取或设置dom元素中的html内容
将标签都生效
dom.outerHTML:获取或设置dom元素的html内容(包含自身的标签)
设置innerHTML或者innerText时，会重新渲染页面，
所以尽量避免使用innerHTML+=(
集体实现是遍历时将字符串存在变量里，
便利结束之后，将字符串一次性
赋值给innerHTML)
设置dom样式
设置样式:
dom.style.css属性名=值
获取样式
通过.style方式只能获取到内联样式中的属性
getComputedStyle(dom).css属性,可以获取内联样式中的属性、
style标签中的属性、外部css的属性、默认属性
属性
自定义属性：标签不支持的、x abcd a-c
设置：dom.setAttribute("属性",值)，
值最终是字符串形式
获取：dom.getAttribute("属性名")
可以获取或者设置自身属性
删除：dom.removeAttribute("属性名")
可以获取、设置或删除自身属性
自身属性：标签支持的、id class title
设置：dom.属性名=值
获取：dom.属性名
删除：delete dom.属性名
6.17
元素之间获取：列如当前元素是ele
父元素：ele.parentNode
子元素：ele.childNodes,列表形式，包含文本节点，注释
节点和标签节点
ele.children,列表形式,仅包含标签节点
上一个元素：ele.previousSibling
ele.previousElementSibling
下一个元素：ele.nextSibling
ele.nextElementSibling
第一个子元素：ele.firstChild
包含文本、注释、标签
ele.firstElementChild--第一个标签子元素
最后一个子元素：ele.lastChild
ele.lastElementChild--最后一个标签子元素
节点类型：
文本节点：3
标签：1
属性：2
注释：8
思考：如何找到ele前面(后面)所有的标签元素，添到数组里，即
ele的兄弟元素(同辈元素)
如果上一个元素不是null，江上一个元将添进数组，将上一个
元素指向上一个元素的上一个
dateset:能获取或设置自定义属性，要求格式为data-属性名
比如：boxdataset.a=100;结果就是在box的标签上
生成一个data-a=100 属性
6.18
结果：获取的索引是i的组中值
原因：时间出发时，for循环已经结束
解决方法：
1、es6中用let
2、
3、利用闭包函数解决
4、事件委托
将事件委托给外层元素，当事件触发时会根据事件源判断触发对象
核心原理：事件冒泡+事件对象
优势：
避免大量绑定事件
动态生成的元素也具有事件
解决改变html内容之后事件丢失的问题
事件冒泡：事件在触发时，会向外传播，外层元素如果具有相同
的事件，会自动被触发
标签上的click只能绑定一次
js中的dom.onclick只能绑定一次，第二次绑定会把第一次覆盖
取消事件 dom.onclick=null
dom.addEventListener("事件类型",回调函数,冒泡
或捕获)实现多次绑定，第三个参数是布尔值，默认是flase，
指事件冒泡，true指事件捕获，设置在外层元素上
e.stopPropagation();阻止冒泡
addEventListener实现多次绑定
取消 removeEventListener("事件类型",获取函数)
事件捕获：从外向内触发
IE绑定事件：
dom.attachEvent
没有第三参数
6.21
阻止默认行为
e.preventDefault(); //阻止默认行为
e.returnValue=flase; 0 //IE低板浏览器
return flase; //另外一种阻止默认行为的方式
阻止事件冒泡
e.stopPopagation();IE78
e.cancelBubble=true;标准浏览器
常用的事件类类型
拖放 drag drop
鼠标滑过 mouseover
鼠标移出 mouseout
鼠标进入 mouseenter
鼠标离开 mouseleave
enter和over区别：
mouseenter,mouseleave不会出发事件冒泡
父子元素之间切换状态不会触发对方的事件
mouseover和mouseout存在事件冒泡，在父子元素和子子元素
之间切换时会持续触发事件
鼠标移动 mousemove
应用：获取鼠标位置
位置获取：
event.clientX,event.clientY
event.pageX,event.pageY
page和client区别：
pafeXY用文档左上角作为0,0
clientXY用当前显示窗口左上角作为0,0
如果没有滚动条时，page和client取值相同
点击 click 支持鼠标+手指
双击 dblclick
开头要加on
键盘
keydown+keypress+keyup
手指
touchstart touchmove touchend
鼠标点击：
mousedown+mouseup
event
clientx
pagex
stopPropagation
preventDefault
srcElement
keyCode
onload 记载
onreadystatechange
focus
blur
input
change
select
//setTimeout:经过多久执行，只执行一次
//清除：clearTimeout(setTimeput的编号)
6.23
html属性
disabled不可用，没有事件
bom:
6.30
方法：
添加：
push(item1，...，itemN)，尾部添加新元素
pop(),删除最后一个元素，返回删除的元素
unshift(tiem,...tiemN),头部添加
shift()，删除第一个
splice(索引，要删除的长度，要添加的元素)--》
至当前索引的前面
7.2 下午
alert(提示内容)，警告窗口
缺点:
1、无法展示完整数据 [object Object]
2、阻塞模式,页面无法渲染
3、界面无法
confirm(查询的内容)，
提示确认内容，返回值来自窗口中的确定(true)和取消(flase)按钮
prompt(标题，要输入的内容)，返回输入的内容，没内容则返回null
4d9b98fa0b5a 7 月前
d753750b9663 7 月前