基础语法
申明变量
var绝对不用，const优先，再是let
建议数组和对象使用const，因为他们存储的都是地址，只要地址不变，就不会报错
获取DOM对象
document.querySelector('css选择器') //选择一个
document.querySelectorAll('css选择器') //选择多个，返回一个伪数组
操作元素内容
对象.innerText = "***" //显示纯文本，不解析标签
对象.innerHtml = "***" //能识别文本，能解析标签
操作元素属性
// 操作元素常用属性
对象.属性 = 值
// 操作元素样式属性
对象.style.样式属性 = 值
对象.className = 'active' //直接替换
对象.classList.add('类名') //追加一个类
对象.classList.remove('类名') //删除一个类
对象.classList.toggle('类名') //切换一个类，有就删，没就加
自定义属性
**格式：**data-自定义属性
**获取：**对象.dataset.自定义属性
定时器-间歇函数
开启定时器
setInterval(函数, 间隔时间)
关闭定时器
let 变量名 = setInterval(函数，间隔时间)
clearInterval(变量名)
DOM事件基础
事件监听
方法一：
对象.on事件 = function(){}
方法二（推荐使用，on方法会被覆盖，addEventListener方法可绑定多次）：
对象.addEventListener(‘事件类型’, 要执行的函数)
事件类型
鼠标事件
click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开
焦点事件
focus 获得焦点
blur 失去焦点
键盘事件
keydown 键盘按下触发
keyup 键盘抬起触发
文本事件
input 用户输入事件
事件对象
元素.addEventListener('click', function(e){})
// e便是事件对象，一般命名为event, ev, e，为这个对象里有事件触发时的相关信息
console.log(e.type)
// 获取当前事件类型
console.log(e.clientX/clientY)
// 获取光标相对于浏览器可见窗口左上角的位置
console.log(e.offserX/offsetY)
// 获取光标相对于当前DOM元素左上角的位置
console.log(e.key)
// 获取用户按下的键盘值，现在不提倡使用keyCode
环境对象
环境对象this是当前函数运行时所处的环境
谁调用，this就是谁
回调函数
把函数作为另外函数的参数传递，这个函数就是回调函数，一般匿名函数比较多
DOM事件进阶
事件流
简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父
事件捕获
对象.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
// 第三个参数默认false代表冒泡阶段触发，true代表捕获阶段触发
对象.on事件
// 只有冒泡阶段，没有捕获
事件冒泡
当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
阻止事件流动
对象.stopPropagation()
解绑事件
对象.on事件 = null
对象.removeEventListener(事件类型, 事件处理函数)
鼠标经过事件的区别
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave不会有冒泡效果（推荐）
事件委托
原理：使用事件冒泡的特点
做法：给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
const ul = document.querySelector('ul')
ul.addEventListener('click',function(e){
if (e.target.tagName === 'LI'){ // 通过对象.target.tagName找到真正触发的元素
this.style.color = 'red'
}
})
其他事件
页面加载事件
- load
- DOMContentLoaded HTML文档加载解析完成后，无需等待样式表、图像加载完毕，就能触发
页面滚动事件
**事件名：**scroll
对象.scrollLeft/scrollTop //对象被卷去的大小
document.documentElement.scrollTop/scrollLeft //页面滚动的大小
对象.scrollTo() //滚动到指定坐标
元素尺寸与位置
**事件名：**resize
clientWidth和clientHeight
// 获取元素的可见部分宽高（不包含边框，margin，滚动条等）
offsetWidth和offsetHeight
// 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetLeft和offsetTop
// 获取元素距离自己定位父级元素的左、上距离
// 找到有定位的父级元素
// offsetLeft和offsetTop 注意是只读属性
getBoundingClientRect()
// 不受父级元素定位的影响
日期对象
实例化
// 获取当前时间
const date = new Date()
// 获取指定时间
const date = new Date('2008-8-8')
日期对象方法
date.toLocaleString() // yyyy/mm/dd hh:mm:ss
date.toLocaleDateString() // yyyy/mm/dd
date.toLocaleTimeString() // hh:mm:ss
时间戳
使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助时间戳完成。
什么是时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式。
// 三种方式获取时间戳
// 1.使用 getTime()方法
const date = new Date()
cosole.log(date.getTime())
// 2.简写 +new Date()
console.log(+new Date())
// 3.使用 Date.now()
console.log(Date.now())
注意:
- 第三种方法无需实例化
- 但是只能得到当前的时间戳,而前面两种可以得到指定时间的时间戳
DOM节点
DOM节点的分类
元素节点 比如DIV标签（重点）
属性节点 比如class属性
文本节点 比如标签里面的文字
查找节点
父节点查找：
子元素.parentNode
- 找不到返回null
子节点查找：
childNodes
- 获得所有子节点、包括文本节点（空格、换行）、注释节点等
父元素.children（重点）
- 仅获得所有元素的节点
- 返回一个伪数组
兄弟节点查找
下一个兄弟节点
- nextElementSibling
上一个兄弟节点
- previouslementSibling
增加节点
创建节点
- document.createElement(‘标签名’)
追加节点
-
插入到父元素的最后一个子元素
父元素.appendChild(要插入的元素)
-
插入到父元素中某个子元素的前面
父元素.insertBefore(要插入的元素, 在哪个元素前面)
克隆节点
元素.cloneNode(布尔值)
若为true，则代表克隆时回包含后代节点一起克隆（深克隆）
若为false，则代表克隆时不包含后代节点（浅克隆）
删除节点
父元素.removeChild(要删除的元素)
- 如不存在父子关系则删除不成功
移动端事件
touchstart
- 手指触摸到一个DOM元素时触发
touchmove
- 手指在一个DOM元素上滑动时触发
touchend
- 手指在一个DOM元素上移开时触发
Window对象
BOM（浏览器对象模型）
像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window
定时器-延时函数
// 设置延时函数
setTimeout(回调函数, 等待的毫秒数)
//清除延时函数
let timer = setTimeout(回调函数, 等待的毫秒数)
clearTimeout(timer)
JS执行机制
先执行执行栈中的同步任务
异步任务放入任务队列中
执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，放入执行栈中，开始执行。
location对象
href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
search 属性获取地址中携带的参数，符号 ？后面部分
hash 属性获取地址中的啥希值，符号 # 后面部分
reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新（CTRL+F5）
navigator对象
// 检测 userAgent(浏览器信息(Android、iPhone、chrome))
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})();
// 下面这两句代码的含义一样
!function(){}() === (function(){})()
histroy对象
history的数据类型时对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，入前进、后退、历史记录等
方法：
- back() 后退功能
- forward() 前进功能
- go(参数) 前进后退功能，参数如果是1前进1个页面，如果是-1后退1个页面
本地存储
介绍
- 数据存储再用户浏览器中
- 设置、读取方便、甚至页面刷星不丢失数据
- 容量较大，sessionStorage和localStorage约5M左右
分类
sessionStorage（了解）
特性：
- 生命周期为关闭浏览器窗口
- 在同一窗口（页面）下数据可以共享
- 一键值对的形式存储使用
localStorage
**作用：**可以将数据永久存储再本地（用户的电脑），除非手动删除，否则关闭页面也会存在
**特性：**可以多窗口（页面）共享（同一浏览器可以共享）、以键值对的形式存储使用
//存储数据
localStorage.setItem(key,value)
//获取数据
localStorage.getItem(key)
//删除本地存储
localStorage.removeItem(key)
存储复杂数据类型
存
// 语法：JSON.stringify
const data = {
name: 'aaa',
price: 1999
}
localStorage.setItem('data',JSON.stringify(data))
取
// 语法：JSON.parse(JSON字符串)
const obj = JSON.parse(localStorage.getItem('data'))
console.log(obj)
正则表达式
参考文档
- MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
- 正则测试工具: http://tool.oschina.net/regex
作用
- 表单验证（匹配）
- 过滤敏感词（替换）
- 字符串中提取我们想要的部分（提取）
语法
定义正则表达式语法：
const 变量名 = /表达式/
判断是否有符合规则的字符串：
regObj.test(被检测的字符串)
//返回true or false
检索（查找）符合规则的字符串：
regObj.exec(被检测字符串)
//匹配成功返回一个数组，否则返回null
元字符
-
边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
- ^ 表示匹配行首的文本（以谁开始）
- $ 表示匹配行尾的文本（以谁结束）
- ^& 表示精确匹配
-
量词（表示重复次数）
- ***** 重复零次或更多次
- + 重复一次或更多次
- ? 重复零次或一次
- {n} 重复n次
- {n,} 重复n次或更多次
- {n,m} 重复 n到m次
-
字符词
-
[] 匹配字符集合
-
[] 里面加上 - 连字符，表示一个范围
-
[] 里面加上 ^ 取反符号
-
[] 里面加上 . ，匹配除换行符之外的任何单个字符
-
预定义类
\d 匹配0-9之间的任一数字，相当于[0-9]
\D 匹配所有0-9之外的字符，相当于 [ ^ 0-9]
\w 匹配任一的字母、数字和下划线，相当于[a-zA-Z0-9_]
\W 匹配除字母、数字和下划线以外的字符，相当于[ ^a-zA-Z0-9_]
\s 匹配特殊字符（包括换行符、制表符、空格符等），相当于[\t\r\n\v\f]
\S 匹配非特殊字符的字符，相当于[ ^\t\r\n\v\f]
-
-
修饰符
语法：/表达式/修饰符
i是单词ignore的缩写，正则匹配时字母不区分大小写
g是单词global的缩写，匹配所有满足正则表达式的结果（不加只会匹配一个）
字符串replace(/正则表达式/, '替换的文本')
扫一扫
2975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
