复习总结
- js几种写法
-
- 内部
-
- 外部
-
- 行内
-
- js作者
- 布兰登·艾克
- 布兰登·爱奇
- js三大核心
- ECMAScript
- DOM
- BOM
- 变量
- 给数据定义一个别名
- 看到var关键词,计算机就会使用一次内存
- 基础数据类型
- number(数字)
- string(字符串)
- Boolean(布尔值)
- null(空)
- undefined(未定义)
- 复杂数据类型/引用数据类型、复合数据类型
- Object、function、Array、Date、RegExp
- 数据类型转换
- Number()、parseInt()、parseFloat()
- toString()
- Boolean()
- 隐式类型转换
- 除了加法
- 保留几位小数
- toFixed(2)
- 命名规范
- 驼峰命名
- 命名规则
- 不建议使用中文
- 不能数字开头
- 可以是使用 _ $
- 大小写有区分
- 不能使用关键字、保留字
- class、var、function、const……
- 运算符
- 算数运算符
+-*/%
- 比较运算符
- < > == >= <= != === !==
- 赋值运算符
- = += -= *= /= %=
- 逻辑运算符
|| && !
- 自增、自减
- 前置先计算后输出 ++i
- 后置先输出后计算 i++
- 算数运算符
真: true、非0数字、非空字符串
假: false、0、空字符串、null、undefined、NaN
- NaN
- 数字类型
- 不等于自己
- isNaN 检测NaN
- isNaN(12) -> false
判断(分支结构)
if( ){ }
if( ){ }else{ }
if( ){ }else if( ){ }else{ }
switch
switch(变量){case 值: 语句;brea;case 值: 语句;brea;……}
三元运算/三目运算/三运运算
__ ? ___ : ___
-
循环
- 1.初始化
- 2.条件
- 3.语句
- 4.自增
-
for(一般固定次数)
-
while(一般不固定次数)
-
do…while(必定执行一次)
-
breal
- 结束
-
continue
2. 跳过本次循环 -
函数
- 声明
- function name(){}
- var name = function(){}
- 调用
- 声明式搁哪都行
- 赋值式只能在定义之后
- 声明
-
函数概念
- function计算机申请一块空间
- js里的一级公民
-
参数
- arguments 伪数组
-
预解析
- 提前解析代码
- 变量 声明式函数
- 范围不会超过函数、不会超过script标签
- 提前解析代码
-
作用域
- 全局
- 所有函数以为的变量
- 生命周期:会话级
- 局部
- 函数内部的变量
- 生命周期: 函数执行完
- 全局
-
递归
- 自己调用自己
-
对象
- 无序数组集合
- new object{}
- 只能使用for in循环
- for(let attr in obj){obj[attr]}
-
数组
- [ ]
- new Array()
- 一个参数长度、多个参数内容
- push 后面添加
- pop 后面删除
- unshift 前面添加
- shift 前面删除
- reverse 翻转数组
- concat 连接数组
- splice 切
- sort 排序
- join 数组转字符串
- indexOf 查找 返回下标
- slice 切
-
排序
- 冒泡
- 选择
- 归并
- 快速
-
ES5 新增方法
- foreach
- map 循环返回一个新数组
- some 一个条件成立就返回true
- every 所有条件都成立返回true
-
严格模式
- 放到最上面
- ‘use strict’
- 不要写完再加
-
ASCII
-
字符串
- indexOf 查找返回下标
- lastindexOf 查找最后一个
- charAt 给下标 返回字符
- charCodeAt 返回ASCII
- toUpperCase 大写
- toLowerCase 小写
- subString 切
- subStr 切
- slice 切
- split 转成数组
- concat 连接
var time = 1000
setInterval(function(){
time = 5000
console.log(time)
},time)
定时器的时间是1000
因为定时器有注册机制
一旦注册就不可更改
- 日期对象
- new Date(年,月-1,日,时,分,秒,毫秒)
- 获取
getFullYear()
getMonth()
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
getMiniSeconds()
getTime() 格林威治时间☞现在(毫秒)
- Math
- Math.random() 随机数左开右闭
- max min 最大、最小
- ceil round floor 向上、四舍五入、向下取整
- abs 绝对值
- PI Π
- sqrt 开根号
- pow 幂
BOM
- 弹出框
alert、confirm、prompt
- 打开
- window.open
- 关闭
- window.close()
- navigator 浏览器信息
- userAgent 版本信息
- appName 浏览器名称
- appVersion 版本号
- platform 系统版本
- location 地址栏信息
- href 地址
- reload 刷新
- history 浏览器历史记录
- back 返回
- forward 潜进
- go( 数字 )
- 浏览器事件
- onload onscroll onresize
- 浏览器大小 window.innerWidth/innerHeight
- 获取滚动距离
- document.documentElement.scrollTop || document.body.scrollTop
- 定时器
- 开启
setInterval() setTimeout()
- 关闭
clearinterval()
clerTimeout() - 定时器先关后开
- 开启
DOM
-
获取元素
- document.querySelector
- document.querySelectopAll
- document.getElementById()
- document.getElementsByClassName
- document.getElementsByTagName
- document.getElementsByName
-
操作属性
- className、id、style、type、value、innerHTML、innerText、width、height、title、alt、href、src
-
自定义属性
- getAttribute
- setAttribute
- removeAttribute
-
获取元素节点
- children
- parentNode
- firstElementChild 第一个子节点
- lastElementChild 最后一个子节点
- previousElementSibling 上一个兄弟节点
- nextElementSibling 下一个兄弟节点
-
获取文本节点
- childNodes
- firstChild
- lastChild
- previousSibling
- nextSibling
-
查看节点类型
- nodeType
1 元素
2 属性
3 文本
8 注释 - nodeName
- nodeValue
- nodeType
-
创建节点
- document.createElement(‘div’)
-
克隆元素
- obj.cloneNode(true)
-
添加元素
- appendChild
- insertBefore
-
替换元素
- replaceChild(obj.)
-
删除元素
- removeChild(obj)
-
元素信息
- obj.offsetWidth / offsetHeight 盒子模型
- obj.scrollWidth / scrollHeight 宽高+padding
- obj.clientWidth / clientWidth 宽高
- obj.offsetLeft / obj.offsetTop 父元素定位距离
- obj.getBoundingClientRect().left / top / right / bottom 获取绝对距离、不兼容ie
-
浏览器事件
- onload onresize onscroll
-
鼠标事件
- onclick、onmouseover、onmouseenter、onmousemove、onmouseleave、onmouseblclick、oncontextmenu、onmousedown、onmouseup、onmousescroll
-
键盘事件
- onkeydown、onkeyup
-
表单事件
- oninput、onchange、onsubmit、onblur、onfocus
-
动画事件
- ontransitionend、onanimationed
-
移动端事件
- ontouchstart ontouchmove ontouchend
-
事件对象
- ev||event
- 事件函数提供的对象
- ev.target||ev.srcElement (事件委托)
- ev.offsetX / Y 鼠标距离元素
- ev.pageX / Y 页面左上角
- ev.clientX / Y 可视区距离
- ev.cancelBubblue = true 阻止事件冒泡
- ev.stopPropagation() 阻止事件冒泡
- ev.preventDefault() 阻止浏览器默认行为
- return false 组织浏览器默认行为
-
事件监听
- addEventListener
-
事件流
- 根据事件绑定的第三个参数
- 冒泡、捕获
正则表达式
//
new RegExp()- 元字符
- \s 空白字符
- \S 非空白字符
- \w 数字字母下划线
- \W 非数字字母下划线
- \d 数字
- \D 非数字
- . 所有
- 限定符
- *出现0次到无限次
- +出现一次到无数次
- ?出现0-1次
- {n,m}出现n-m次
- 边界符
- ^ 开头
- $ 结尾
- 特殊符号
- \ 转义
- ()任选一组
- |或、
- [ ]任选一个 [^0-9]非0-9
- 方法
- exec 选中返回第一个值
- test 返回布尔
- 字符串方法
- match() 匹配
- search() 搜索
- 匹配符号
- i忽略大小写
- g全局
ES6
- 变量
- let
- 没有预解析
- 常量
- const
- 一旦定义无法更改
- 对象或数组可以改变里面的内容
- 没有预解析
- 不可以重名
- 块级作用域
- { }
- 箭头函数
- ( )=>{ }
- 解构赋值
- 数组和对象
- [item1, item2 …] = arr
- {name1, age …} = obj
- 展开运算
- […arr]
- {…obj}
- 合并运算
- function(…arg){ console.log(arg) } ->数组
- 模板字符串
- 反引号``
- 拼接${变量}
- this 指向
- 普通函数 window
- 事件函数 发生事件的元素
- forEach window
- attaEvent window
- 定时器 window
- 对象函数 对象自己
- 箭头函数 指向父级
- new对象 指向函数名
- 改变this指向
- call、apply、bind
- call(this, item1, item2 …)
- apply(this, [item1, item2 …])
- bind(this)(item1, item2 …)
- 检测数据类型
- Object.prototype.toString.call()
运动
面向对象
- 特性
- 封装
- 继承
- 多态
- 核心
- 高内聚低耦合
- 抽象
- 自定义构造函数
- 函数变成对象
- this指向对象
- 原型
- prototype 函数的一个对象,里面装一堆方法
- 对象属性
- proto 对象的一个属性
- 原型链
- 先看自己有没有这个属性,自己没有找父对象有没有这属性
- ES6
constructor(item){ 构造函数 } 方法(){} 方法(){} } new name(item)