JS
常用函数
定时器
setInterval（‘函数名’，时间）
clearInterval()
canvas
方法
getContext（）
获得渲染上下文和它的绘画功能
fillRect（x,y,width,height）
填充矩形
strokeRect（x,y,width,height）
不填充矩形
clearRect（x,y,width,height）
属性
height
width
DOM
概念
Document Object Model
文档对象模型
作用
改变HTML属性
改变HTML元素
改变CSS样式
对事件作出反应
查找
通过ID
getElementById()
得到标签
通过标签名
getElementByTagname（‘h1’）
通过类名
getElementByClassName(’box‘)[]
通过选择器
querySelector()
querySelectorAll()[]
得到标签
通过name属性
getElementByName（）
NodeList元素对象
元素属性
documen.head
document.title
document.body
document.documentElement
documen.URI
documen.documentURI
documen.baseURI
document.write
document.writeln
document.cookie
cookie
创建
删除
设置expires时间
path
告诉浏览器cookie的路径
seession
localstorage
本地存储
方法
getItem（）
setItem（“name”，name.value）
removeItem（”name“）
sessionstorage
http无状态
属性节点
btn.value
文本
innerTEXT
innerHTML
加入
outerHTML
替换
textContent
attributes
parentNode父节点
childNodes
e.target
e.target
点击的元素
this返回绑定的事件
e.type
事件
e.view
Window
e.which
e.preventDefault（）阻止默认事件
e.stopPropagation（）阻止事件冒泡
e.cancelBubble=true 阻止冒泡 IE6-8
e.x/y
e.screenX/Y
相对于电脑屏幕
e.pageX/Y
相当于文档页面 IE9+
可用于节点
padding+width+border 获取元素位置
style
style
element.style
行内（可以直接获取）
element.currentStyle
非行内样式
对象（默认+所有样式）
只兼容IE
getComputedStyle（obj，null/false）[value]
非行内样式
兼容火狐谷歌，不兼容IE
element.className
地址
方法
增
appendChild()
不能直接添加字符串
insertAdjacentHTML（“position”，“text”）
beforebegin
afterbegin
begoreend
afterend
position
appen（）
createElement（）
createTextNode（）
createAttribute（）
creatComment（）注释
删
removeChild()
改
set/getAttribute()
insertBefore（new，old）
可用此方法创建insertAfter（）
replaChild（new，old）替换
cloneNode（参数）复制节点
true 深拷贝
flase浅拷贝
节点关系
hasChildNodes（）
属性
.childNodes
一行一个
children
firstChild
第一个子节点，包含文本空格
lastChild
firstElementChild
第一个元素节点
lastElementChild
previousSibling
上一个兄弟节点
previousElementSibling
.nextSibling下一个兄弟节点
nextElementSibling
parentNode
parentElement
nodeType
nodeName
nodeValue
概要
节点类型
1
element_node
2
attribute_node
3
text_node
4
cdata_section_node
5
entity_peference_node
6
entity_node
7
processing_instruction_node
8
comment_node
9
document_node
10
document_type_node
11
document_fragment_node
12
notation_node
属性对象
方法
getAttributeNode(‘class’)
getAttribute(‘class’)
setAttribute(‘class’,‘new’)
removeAttribute(‘class’)
hasAttribute(‘class’)
属性
arrtibutes
arrtibutes[]
arrtibutes.class
arrtibutes
attributeNode（）
nodeType
nodeValue
nodeName
class
增div.className=“new”
删div.className=‘ ’
改div.className=“new old”
查div.className
类数组.classList
add（）追加
.value替换
remove（）
replace（old，new）
toggle（“ ” ）切换
自定义属性
data-
设置
setAttribute（）
dataset.inde=
类数组DOM
表单
document.forms
集合HTMLCollection
获取
document.forms.formName.elements
通过下标访问表单内元素
name访问
id访问
表格
insertRow（num）
insertCell（num）
num从0开始
动画
document.createDocumentFragment()
非行内样式
obj.getComputedStyle（obj,伪类（没有为null））[属性名]
obj0currentStyle[属性名]
事件
事件类型
onclick
鼠标点击触发
ondblclick
双击
onmouseup
鼠标弹起触发
ononmousemove
鼠标移动触发
onmouseover
鼠标经过触发，冒泡
onmouseout
鼠标离开触发 冒泡
onmouseenter
同上的效果，不冒泡
onmouseleave
鼠标离开 不冒泡
onmousedown
鼠标按下触发
contextmenu
右键菜单
onblur
失去鼠标焦点触发
onfocus
获得鼠标焦点触发
load/scroll
UI事件
onmousewheel
滚轮事件
textinput
文本事件
键盘
onkeydown
onkeyoress
onkeyup
组合键 需要码表
e.keyCode
onreadystatechange页面状态改变
document.readyState查看状态
compositionstart
合成事件
输入字符触发
概要
焦点事件
鼠标事件
绑定事件
动态绑定事件
add/removeEventListener(‘click’,name,false)
false会冒泡
true捕获
name.事件=function（）{}
静态绑定
javascript：alert（）
执行不返回值
alert（）
test（）
DOM事件流
事件捕获
事件处于目标阶段
事件冒泡
事件委托
利用事件捕获
阻止默认行为
e.preventDefault（）IE11
e.returnValue=false IE10以下
删除事件
eventTarget.οnclick=null
eventTarget.detachEvent（on+eventName，callBack，false）
BOM
概念
Broswer Object Model
js对浏览器互动
window
全局变量属于window属性
全局函数属于window方法
对象
window
top
document
top==window
事件
onload
1.window.οnlοad=fn
2.window.addE…Lis(‘load’,fn(){})
3.fn test(){} window.addEL(“load”,test)
onresize
属性
浏览器信息
宽度
outerWidth窗口宽度
innerWidth文档宽度
documenElement.clienWidth页面
高度
outerHeight 窗口高度
innerHeight文档高度
documenElement.clienHeight页面
screnn屏幕
availWidth显示屏幕 除windows任务栏外
screnn.width
窗口再屏幕上的位置
windo.screenLeft
windo.screenTop
location对象
返回对象
href
.search
获取？以及后面的name值
nabigator对象
.userAgent
histroy对象
foeward（）下一页
back（）上一页
go（num）
方法
alert（）弹窗
scroll（x，y）
confirm
prompt（）
open(url，‘’,‘height=200,width=20px,top=20…’)
close ()关闭自己
定时器
setTimeout （fn,毫秒数）
只执行一次
clearTimeout（timeID）
timeID是setTimeout的返回值
setInterval（)
clearInterval（timeID）
timeID是setInterval返回值
动画
window.requestAnimationFrame(fn)
screen
Location
History
Navigator
弹出框
Timing
Cookies
tips
禁止选中文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
正则表达式
概念
构成搜索模式的字符序列
语法
/pattern/modifiers
创建
1.字面量
regex=/abc/
.test（‘aabcd’）
2.RexExp构造函数
new RegExp（‘abc’）
.test（‘aabcd’）
方法
String.search（）
replace（）
test（）
exec（）
返回数组 有g使用这个
console.dir（）打印
属性
String.match（）
在非全局时，没有g和exec（）相同 全局没有附加信息
lastIndex 可读可写
修饰符
i
执行对大小写不敏感匹配
g
执行全局匹配查找所有匹配而非第一个匹配后停止，非全局不能重复调用
lastIndex会返回下一次要开始匹配的下标
m
执行多行匹配
转义字符
字面量用
RegExp()用\
^ $ ? + { [ | \ ( ) . *
模式
括号
[abc]
查找方括号之间的任何字符
[0-9]
查找任何从0-9的数字
（x|y）
查找由 | 分隔任何选项
\ 1 引用第一个被分组的串
反向引用
捕获 &1 2 3
与reggxp中第1 …子表达式相同的文本
结合str.replace（）自定义字符串
str.replace(regexp | substr, newSubStr | function)
（？：）非捕获型
（？=）向前瞻望
（？!）向后瞻望
元字符
. 点 查找单个字符 除换行 结束符
\d数字
\D 非数字
\w 数字字母下划线
\s 空白字符
\S非空格
\b 单词边界 有分割
\n
\u unicode编码
\x ASCII
| 或者 选择匹配
^脱字符 不是
位于中括号里面
任意字符
预定义类
Quantifiers定义量词
边界量词
^字符串开始位置
$字符串结束位置
重复量词
（n{3,5}）n出现3到5次
等效于？ =={0,1}
* 0或多次
+ 一或多次
？0-1次
贪婪模式 默认
匹配到不能匹配
/a+？/
匹配最大化
惰性模式
匹配最小化
量字符加？变为非贪婪模式
特效
offset偏移量
.offsetParent
.offsetTop
元素element相对带有定位父元素上方的偏移量
.offsetLfeft
.offsetWidth
padding2 + width +border2获取自身的宽度
.offsetHeight
padding 2+height+border2获取自身的高度
和style的区别
style.width带单位，不包含padding和border 可读写可获取和赋值
offset用于获取元素的位置 offsetLeft/Top
client
.clientTop
border
.clientLeft
border
.clientWidth
width+padding2
clientHeight
width+padding*2
用于获取元素的大小 clientWidth/Height
scroll
.scrollLeft
被卷上去的上测距离
.scrollTop
被卷上去的左测距离
.scrollWidth
自身的实际宽度
.scrollHeight
自身实际高度
获取滚动距离window.pageXOffset/YOffset
兼容性
移动端特效
事件
touchstart
touchmove
touchend
事件对象
touches
触摸点的列表
targetTouches
正在触摸当前DOM元素的列 表
changedTouches
手指状态发生改变的列表
click延迟300ms解决
禁止用户缩放
meta content=“user-scalable=no”
touch封装函数
fastclick插件
插件
swiper插件
轮播图
flexible
自适应
搭配cssrem插件
data-dpr
font-size
内置对象
Array数组
定义
=[ 1,2,3]
= 【[ ] [ ]】二维数组
=new Arrary（长度）对象表达式
字面量表达式
赋值
不要求数据类型严格一致
访问
arr[0]
方法
sort（）排序
数值 默认从小到大
倒序
比较函数
sort（fn （）{ return b-a}）
比较字符串
sort（fn 自定义）
reverse 倒序排序
拼接
arr1.concat（arr2）
返回新数组，不改变原数组
转化为字符串
. join（）默认，间隔
. toString（)
. toString(默认十进制)
. toString(8)八进制
截取
slice（开始位置，结束位置）[ )
也能实现删除
删除
splice（参数1，参数2，参数3）
参数1：开始的坐标
参数2：number
参数3：值
delete arr[0]
删除和添加
pop（）删除
push（内容）
shift（）
unshift（内容）
从第一个 数据结构 先进先出 队列结构（排队）
最后一个 数据结构 先进后出 栈结构
判断
Array.isArray（arr）
查找
indexOf（内容）
返回内容的下标
lastIndexOf（）
find（）
findIndex（）
includes（内容）
写函数
属性
length
小 截取
大 值为空
0 清空
概念
稀疏数组
遍历
for
for…of
for…in
in判断对象中的属性
“name” in window
优化的for
forEach
map
键值对
val，index
去重
1.Array.from（new Set（arr））ES6
2for + .arr.splice()
3.for + sort+push
4.indexof+push
5.递归
6.map
Math
数学运算
pow（2,3）2的3次方
== ES6 **
sqrt（）开方
绝对值
Math.abs（-4）
Math.random（）随机数
默认 0-1
10 0-9
10+1 1-10
随机范围
（） 范围长度 + 开始数值
判断符号
Math.sign（-4）
负数 -1
正数 1
( 0 ) 0
( -0 ) -0
（）空 NaN
(’ -4 ‘) -1
(字符串) NaN
( NaN ) NaN
数值
圆周率
Math.PI
取整
向上取整
Math.ceil（5.47）//6
向下取整
Math.floor（5.77） //5
四舍五入
Math.round（）
最大值
Math.max（1,2,3）
最小值
Math.min（1,2,3）
数组 Math.max.apply（【】）
Date日期
方法
getMonth（）从0开始
getFullYear（）
getDay（）
getHour（）
getSeconds（)
getMinutes()
getMIllisecinds()
getTime（）时间戳
格式化
toString
toDateString
toLocaleDateString 年月日
toLocaleTimeString时间
返回毫秒
定义
new Date（）
参数
年月日
年月
单个数值毫秒
String字符串
转义字符
’
"
\n
\反斜杠
\b退格
换行
+ 拼接
``; es6
\ 转义字符
长度
.length
str[2]取值
方法
查找
indexOf（’‘,指定位置）指定字符串首次出现的位置
lastIndexOf（’',指定位置）
找不到返回 -1
search（‘内容’）返回位置
取字符
charCodeAt（）Unicode编码
String.fromCharCode（72）
charAt（2）取字符
提取字符串
substring（start，end，长度）
slice（start，end）
可用作删除
substr（start，长度）
替换
replace（‘’，‘’）返回新字符串
大小写
toLowCase（）
toUpperCase（）
连接
concat（）
空格处理
trim（）删除头尾空格
转换为数组
str.split（分隔符）
对象
创建方法
字面量
={}
调用系统构造函数
=new Object（）；
定义构造函数
function Obr（参数1，参数2）{}
工厂方式
funtion stu（参数）{}；
方法
删除delete
delete obj.name
函数
作用
封装
重用
关键字 function
函数体{}
返回值return
没有return 则 undefined
结束函数
返回值
具名函数
函数声明提升
匿名函数（函数表达式）
没有函数声明提升
作用域
全局作用域
局部作用域
块级作用域ES6
let/const
递归调用
结束条件
参数
形参
默认形参
短路运算符 a=a||0
三元运算符a=undefined ？ 0：a
if 判断undefined
ES6 fn（a=0，b=0）
实参
函数内部未var声明变量，则变为全局变量
回调函数
arguments接收参数
类数组
具有数组特性 获取长度 参数个数 不是数组
js没有重载
注释
/*
* 方法名
*所属类名
*@param 参数类型
*return 返回值类型
*功能描述
**/
语法基础
表达式和语句
表达式会产生值
表达式构成语句
变量
var
可只定义不赋值
多个变量
字符 数字 _ $ 组成 小写驼峰
数据类型
简单类型
String 字符串
转为字符串
变量 . toString（）
String（变量）
+拼接字符串 *
.length
数字Number
数值类型
整数
浮点数
Infinity超过数值范围
Number.isFinite（）是否为数字和有限值
十进制 八进制整数 十六进制整数
数值范围
最小Number_MIN_VALUE
最大Number_MAX_VALUE
判断isFinay（）
非数值
NaN
isNaN（）
数值转换
Number（）
parseInt（）
parseInt（string，radix）
radix进制 默认10
string 不为数字返回NaN
parseFloat（）
js隐式转换(- * / +)
布尔
Boolean（）函数
数字-->布尔
null和Undefined都会转换为false
字符串-->布尔
对象为true
Null
Undefined
复杂类型
引用类型（对象）
Object（数组/对象/函数...）
检测typeof（）
undefined
boolean
string
number
object
function
3个特殊情况
申明 不赋值
不申明 不赋值
不申明 只赋值
变量提升和预解析
运算符（操作符）
算术运算符
+
-
*
/
%取模（求余）
++和--
一元运算符
取幂**
隐式转换
赋值运算符
=
+= -= *= /=
关系运算符
>= <= > <
==
===
！=
！==
？？空值合并操作符
条件运算符
？： 三元运算符
逻辑运算符
&&与
||或
！非
为任意数据类型两次取反，转换为布尔值
非布尔值 先转换布尔值，返回原值
，逗号操作符
（）圆括号操作符
Void
type=“Javascript：void（alet（a））”
href=“Javascript：void（0）”
阻止a标签的默认行为
输出
alert
prompt
console.log
confirm
documen.write（）
debugger；调试
分支循环
分支
if else
switch （）case ’ 1‘：
循环
for
while
do while
break和continue
问题
null和undefined区别
null：空值
undefined：未初始化
js精度
toFixed(num) 方法来保留小数 结果不精确
基础知识
历史
是什么
运行在客户端的脚本（script）语言
基于对象
动态性
跨平台性
可以基于Node.js（服务端开发）用作后端
组成
ECMAScript
DOM
BOM
Web APIs
书写位置
行内
内嵌
head中
body中
外部
规范
变量命名规范
大小写驼峰式
函数命名
can
has
is
手风琴形式
注释
函数注释
单行/多行注释
854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
