1.栈：简单数据类型放到栈里
2.堆：引用数据类型存放到堆里（在栈里放一个地址，指向堆）
const对于数组和对象
//错误写法
const names=[]
names=[1,2,3]
const obj={}
obj={
uname:'a'
}
//正确写法
const name=[]
names[0]=1
names[1]=2
names[2]=3
const obj={}
obj.uname='b'
HTML标签-->DOM对象
DOM树：将HTML文档以树状结构表现出来
document是DOM提供的一个对象，所有网页元素都在里面
随机数：Math.floor(Math.ramdom())
function getRandom(N,M){
return Math.floor(Math.random()*(M-N+1))+N
}
const num=parseInt(Math.random()*Array.length)
删除元素:arr.splice(从哪开始删，删几个)
模板字符串用``反引号
设置类名：div.className='nav box'
const box = document.querySelector('.box')
//追加add()，类名不加点，并且是字符串
box.classList.add('active')
//删除remove()，类名不加点，并且是字符串
box.classList.remove('box')
//切换类toggle()，有就删除，没有就加上
box.classList.toggle('active')
//选出第三个li
const li=document.querySelector('li:nth-child(3)')
全选单选按钮
bt.checked=true
禁用按钮
写在标签内，如<button class="btn" disabled>倒计时(60)</button>
bt.disabled=true
自定义属性以data-开头
//获取自定义属性
div.dataset//将div所有data属性作为集合
//获取其中的值，比如div有个date-id，那么写成div.dataset.id
定时器
//开启定时器
//setInterval(函数,间隔时间(毫秒))
setInterval(function(){
console.log('一秒执行一次')
},1000)
//想要一秒调用一次函数，写的是函数名，不加小括号
function fn(){
console.log('1')
}
setInterval(fn,1000)
//定时器返回的是一个id数字,所以关闭定时器方法如下：
let n=setInterval()
//clearInterval(变量名)
clearInterval(n)
//按钮倒计时案例
window.onload=function(){
let bt=document.querySelector('.btn')
let i=5
let n=setInterval(function(){
i--
bt.innerHTML=`倒计时(${i})`
if(i==0){
clearInterval(n)
bt.disabled=false
bt.innerHTML='同意'
}
},1000)
}
##报错Uncaught TypeError: Cannot set property 'innerHTML' of null，可能是一开始就加载js，导致没获取到元素
让js代码放到页面最后再加载
window.onload=function(){
}
事件监听
元素对象.addEventListener('事件类型'，要执行的函数)
例：
bt.addEventListener('click',function(){
bt.style.display="none"
})
CSS cursor属性：
cursor 属性规定要显示的光标的类型（形状）
| url | 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 |
|---|---|
| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（南）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
事件类型
click鼠标点击
mouseenter鼠标经过(推荐)
mouseleave鼠标离开
mouseover和mouseout会有冒泡效果，不推荐
focus获得焦点
blur失去焦点
keydown键盘按下触发
keyup键盘离开触发
input输入文本事件
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
New：HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| autofocus | 规定当页面加载时，文本区域自动获得焦点。 | |
| number | 规定文本区域内可见的宽度。 | |
| disabled | 规定禁用文本区域。 | |
| form_id | 定义文本区域所属的一个或多个表单。 | |
| number | 规定文本区域允许的最大字符数。 | |
| text | 规定文本区域的名称。 | |
| text | 规定一个简短的提示，描述文本区域期望的输入值。 | |
| readonly | 规定文本区域为只读。 | |
| required | 规定文本区域是必需的/必填的。 | |
| number | 规定文本区域内可见的行数。 | |
| hard soft | 规定当提交表单时，文本区域中的文本应该怎样换行。 |
事件对象：事件绑定回调的第一个参数就是事件对象
一般命名event,ev,e
元素.addEventListener('click',function(e){
})
部分常用属性：
type：获取当前事件类型
clientX / clientY：获取光标相对于浏览器可见窗口左上角的位置
offsetX / offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下的键盘值（如下判断按下什么键）
const input=document.querySelector('input')
input.addEventListener('keyup',function(e){
console.log(e.key)
if(e.key==='Enter'){
console.log('按下回车键')
}
})
去除字符串两侧空格（中间空格不会去除）：str.trim()
环境对象：this（它代表当前函数运行时所处的环境）
-
谁调用this，this就指向谁
普通函数里this指向window
回调函数：如果将函数A作为参数传递给函数B时，函数A为回调函数
例：function作为参数传给addEventListener，function就是回调函数
input.addEventListener('keyup',function(e){
console.log(e.key)
if(e.key==='Enter'){
console.log('按下回车键')
}
})
用伪类选择器选出勾选框是否被选中：
document.querySelector('.check:checked')
//做全选按钮时可加.length判断几个框被选中
document.querySelector('.check:checked').length
事件流
1.捕获阶段（从大往小找）
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制（true/false默认是false）)
2.冒泡阶段（从小往大）
<script>
const fa=document.querySelector('.fa')
const son=document.querySelector('.son')
fa.addEventListener('click',function(){
alert('ba')
},)
son.addEventListener('click',function(){
alert('son')
})
</script>
//输出son-ba
阻止冒泡
因为事件默认就有冒泡，很容易影响到父级元素
//语法：事件对象.stopPropagation()
//例：
son.addEventListener('click',function(e){
alert('son')
e.stopPropagation()
//获取事件对象(e)，可阻止事件流动传播和冒泡
// 查文档时加[]的参数表示可以省略的参数
事件解绑
//1
<script>
const btn=document.querySelector('button')
btn.onclick=function(){
alert('点击')
}
//移除事件
btn.onclick=null
//2
function fn(){
alert('点击')
}
btn.addEventListener('click',fn)//匿名函数无法解绑
btn.removeEventListener('click',fn)
</script>
事件委托：
利用事件冒泡解决，减少次数，提高性能
例如：ul下有一堆li，要对所有li做出操作，则可以对ul进行操作，使li冒泡到ul，若想知道点击了什么，则可以用e，e.target就是目标，还可获取tagName
阻止默认行为
例如表单提交，a链接跳转
from.addEventListener('submit',function(e){
e.preventDefault()
})
其他事件
页面加载事件：
等待页面所有资源加载完毕再执行
window.addEventListener('load',function(){
})
img.addEventListener('load',function(){
//等待图片加载完毕后再去执行里面代码
})
document.addEventListener('DOMContentLoaded',function(){
//当HTML文档被完全加载和解析后DOMContentLoaded事件被触发，无需等待表，图像等完全加载
})
页面滚动事件
window.addEventListener('scroll',function(){
//当页面滚动时触发，元素.scrollLeft,scrolltop,可获取元素滚动的位置，整个页面滚动了多少用document.documentElement.scrollTop,可直接给document.documentElement.scrollTop赋值
})
document.body
获取html
document.documentElement