• 1、 导入JS的三种方式
• 2、 JS的常用数据类型
• 3、 常用的数值函数
• 4、JS中的运算符的优先级
• 5、if结构、循环结构、支持的判断结果
• 6、JS中的DOM
• 7、键盘事件&确定键盘按键
• 8、事件冒泡&事件捕获&阻止默认事件
• 9、JS中数组的常用方法
• 10、Number类常用方法
• 11、String类常用方法
• 12、Date类常用方法
• 13、 正则表达式的声明
• 14、正则表达式的常用规则
• 15、JS中的面向对象和面向过程
• 16、面向对象的三大特征
• 17、什么叫封装？
• 18、JS中的this指向问题
  • 19、什么叫做继承？实现继承的几种方法？
  • 20、什么叫做闭包？
  • js事件
    • 事件对象 event
    • 事件名称

1、 导入JS的三种方式

①在HTML标签中，直接内嵌JS。<button onclick=”func()”></button>
②在HTML页面中使用包裹JS代码。

2、 JS的常用数据类型

String 字符串 “str” ‘str’
Boolean true/false
Number 数值
Object 对象
Null 特殊的空值
Undefined未定义(var声明了，但未赋值)

3、 常用的数值函数

isNaN()：检测是一个变量，是否是非数值。先用Number()函数尝试转换，如果不能转为数值，则为NaN
Number(): 转换任何数据类型，为数值。 字符串含有其他字符，不能转。 null -> 0
True=1 false=0 纯数值字符串=相应的数字 空字符串=0。 Undefined -> NaN
ParseInt():将字符串转为整数类型。
　　纯数值=数值，会抹掉小数点 空字符串 = NaN
　　包含其他字符的字符串，会截取第一个非数值字符串前面的部分
　　ParseInt只能转字符串，转其他类型，全是NaN

4、JS中的运算符的优先级

（） 小括号最高

！ ++ -- 单目运算符  
* / %  
+  -  
>  <  >=  <=  
== !=  
&&  与或同时存在时，&&比||高  
||  
= += -= *= /=   最低的是各种赋值  

5、if结构、循环结构、支持的判断结果

Boolean：false假 true真
String：空字符串为假 一切非空为真
Number： 0为假 一切非0为真
Null、Undefined、NaN： 全为假 Object：全为真

6、JS中的DOM

Document.getElementById/Name/TagName/ClassName(); //取元素节点
GetAttribute(“属性名”); setAttribute(“属性名”,”属性值”); // 取到、设置属性节点
InnerText[=“文本”] : 取到/设置 文本节点
InnerHTML[=”html代码”]: 取到/设置 元素内部的html代码
tagName： 取到当前节点的标签名
【修改样式系列】

.style.样式 = “样式值” .style.cssText = “多个CSS键值对” .className=”class名”
【层次节点系列】

　　1 .childNodes：(数组)获取元素的所有子节点 .children
　　2 .firstChild：获取元素的第一个子节点； firstElementChild
　　3 .lastChild:获取元素的最后一个子节点； lastElementChild
　　4 . parentNode:获取当前节点的父节点；
　　5 .previousSibling:获取当前节点的前一个兄弟节点
　　6 .nextSibling:获取当前节点的后一个兄弟节点
　　7 . attributes:取到所有属性节点[数组]。
【创建新增节点】

.createElement(“标签名”) 创建一个节点 .setAttribute(“”,””)给新节点设置属性 父节点.appendChild(node) 父节点最后追加新节点；
父节点.insertBefore(newNode,oldNode) 在父节点的oldNode之前插入newNode
需克隆节点.cloneNode(true/false);默认false：只克隆当前节点，而不克隆子节点；true：克隆所有子节点。
【删除替换节点】

父节点.removeChild(childNode); 从父节点删除子节点
父节点.replaceChild(newNode,oldNode); 用newNode替换掉oldNode；
【HTML-DOM 操作表格】

1、表格对象
①Rows: 取到所有行对象，数组格式；
②InsertRow(index); 在index后面插入一个新行
③DeleteRow(index); 删除表格第index+1行；
2、行对象
①Cells: 取到所有单元格对象，数组格式； rowIndex:返回当前行索引；
②InsertCell(index): 在index个单元格后，插入一个新单元格；
③DeleteCell(index): 删除index+1个单元格；
3、单元格对象
①cellIndex: 返回当前单元格索引；
②InnerText、InnerHTML：设置单元文字内容。

7、键盘事件&确定键盘按键

1、键盘事件：keyDownàkeyPressàkeyUp
2、长按时：不断的执行keyDownàkeyPress
　　有keyDown，不一定有keyUp(当按键时，鼠标将焦点点走，就没有keyUp事件)
3、确认一个按键的方法

Dom.keyDown = function(e){         
    Var evn = e||window.event;      
    Var code = evn.keyCode||evn.charCode||evn.which;      
    If(code==13){  回车  }}  

4、判断组合键原理：声明多个组合键对应的标志变量(全局变量，默认为0)， 当按键keyDown时，对应的标志变量为1；当按键Up时，对应的标志变量置0；通过判断多个标志变量，是否同时为1，进而判断按键是否同时按下。

8、事件冒泡&事件捕获&阻止默认事件

【事件冒泡】

当触发某DOM元素的事件时，如果祖先元素存在同类型事件。则，事件会从当前元素开始，逐个往上触发所有祖先元素的同类型事件。

如何添加事件，会导致事件冒泡：
DOM0模型，均为事件冒泡；
IE中使用.attachEvent()添加的事件，均为冒泡；
其他浏览器，.addEventListener添加的事件，当第三个参数为false时，为冒泡；
如何阻止事件冒泡：
IE浏览器中：将e.cancelBubble属性设为true；
其他浏览器：调用e.stopPropagation();方法
【事件捕获】

与冒泡相反，当触发某元素事件时，会从根节点开始， 逐个向下触发祖先元素的同类型事件，直到当前DOM为止。

如何产生事件捕获：
使用addEventListner()添加事件，并且将第三个参数设置为true
【阻止各种标签的默认事件】

IE浏览器中：将e.returnValue属性设为false；
其他浏览器：调用e.preventDefault();方法

9、JS中数组的常用方法

.splice(index,num)：从index开始，删除num个元素；
push(n):数组最后插入一个元素 pop():删除数组最后一个元素
unshift(n):在数组第0位插入一个元素 shift():删除数组第一个元素
sort([functuion]): 默认按照ASCII码值排序，可以传入回调函数进行排序； 升序降序排列： function(a,b){ Return a-b; //升序 return b-a;//降序 }
Reverse: 数组反转
Join([‘分隔符’])：将数组以指定分隔符链接为字符串，不填默认用“,”
Concat(arr1,arr2,[arr3,[arr4,[……]]]):链接多个数组(如果数组为多维数组，只拆第一层[])
indexOf(n):查询元素在数组的第一个下标 lasrIndexOf(n):查询元素在数组最后一个下标
slice(begin,end); 截取数组从begin开始，到end的子数组，左闭右开。

10、Number类常用方法

.toString():转为字符串 ， 相当于num+””
.toFixed(n):将数字转为字符串，保留n位小数，四舍五入
.valueOf():返回Number对象的基本数字值

11、String类常用方法

.split(“char”); 将字符串通过指定字符分割为数组;如果传入””,则将所有字符放入数组；
.indexof(char): 查询某个字符，在字符串的下标；
.charAt(index): 截取字符串的第index个字符
. substring(begin,end):截取字符串从begin开始，到end的子串。左闭右开
.replace(old,new):将字符串的old部分子串，替换为new(如果old是字符串，只替换第一个符合要求的子串；如果old是正则，则按照正则要求替换 //g ,替换全局) .toLowerCase() 所有字符转为小写；
.toUpperCase() 所有字符转为大写;

12、Date类常用方法

.getFullYear(): 获取4位年份
.getMonth(): 获取月份 0~11
.getDate(): 获取一月中的某一天 1~31
.getDay(): 获取一周中的某一天 0~6
.getHours() 返回 Date 对象的小时 (0 ~ 23)
.getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
.getSeconds() 返回 Date 对象的秒数 (0 ~ 59)

13、 正则表达式的声明

① 字面量声明： /[正则表达式]/[表达式模式g/i/m]
② new关键字实现：var reg = new regExp(“正则表达式”,”表达式模式”);
[表达式模式]：
　　g:全局匹配。默认只匹配第一项符合要求；
　　i: 忽略大小写。默认要求大小写一致；
　　m:多行匹配。(当字符串分为多行时，多行匹配默认，会有多个开头结尾。默认，一个字符串不管分多少行，只有一个开头一个结尾。)

14、正则表达式的常用规则

匹配的数据：
　　/d 数字0-9 相当于[0-9] /D 非数字0-9 相当于[^0-9]
　　/w 字母、数组、下划线 [0-9a-zA-z_] /W 非字母、数字、下划线 [^0-9a-zA-z_]
　　/s 任何空字符 /S 非空字符 . 除了换行符的任意字符
特殊符号：
　　[] 需要匹配的数据 () 分组，使用|的时候进行分组
　　| 或，两边都可以。默认从头到尾分两块，如果用(a|b)，则只匹配()里面部分
　　^ 在[]内部，表示整个[]内部取非；在正则表达式开头，表示整个字符串的开始；
　　$ 表示整个正则模式的结束。
匹配次数：
　　{} 表示匹配前面部分的次数。 {3,5} 3-5次 {3,} 3或多次 {3} 匹配3次
　　？ 匹配前面部分0-1次 +： 1或多次 *：匹配任意次数

15、JS中的面向对象和面向过程

面向过程是指专注于如何去解决一个问题的过程步骤。
面向对象是指专注于由哪一个对象来解决这个问题。

16、面向对象的三大特征

继承、封装、多态

17、什么叫封装？

封装分为方法的封装和属性的封装
方法的封装是指将类内部的函数进行私有化处理，不对外提供调用接口，无法在类外部使用
属性的封装是指将类中的属性进行私有化处理，对外不能直接使用对象名访问，而是提供set/get方法，让外部使用set/get方法，来对属性进行操作

18、JS中的this指向问题

总的来说，就是谁最终调用函数，this就指向谁！
This指向的规律:
　　①通过函数名()调用的，this永远指向window
　　②通过对象.方法调用的，this指向这个对象
　　③函数作为数组的一个元素，用数组下标调用的，this指向这个数组
　　④函数作为window内置函数的回调函数(setTimeout,setInterval)使用，this指向window
　　⑤函数作为构造函数，使用new关键字声明，this指向新new出的对象

19、什么叫做继承？实现继承的几种方法？

继承:使用一个子类，继承另外一个父类，那么子类就可以自动拥有父类的所有属性和方法
①通过扩展object实现继承
②使用原型实现继承
③使用call、apply、bind实现继承
通过扩展object实现继承:

通过循环，将父类对象的所有属性和方法，全部赋给子类对象。关键点在于for-in循环，及时不扩展object，也能通过简单的循环实现操作
使用原型实现继承:

将父类对象，赋值给子类的prototype，那么父类对象的属性和方法就会出现在子类的prototype中。那么，实例化子类时，子类的prototype又会到子类对象的__proto__中，最终，父类对象的属性和方法，会出现在子类对象的__proto__对象中。
使用call、apply、bind实现继承:

通过函数名调用这三个函数，可以强行将函数中的this指定为某个对象

20、什么叫做闭包？

在函数内部，定义一个子函数，子函数可以访问父函数的私有变量。可以在子函数中进行操作，最后将子函数return返回

js事件

我们都知道，有两种事件流，一个是冒泡一个是捕获。捕获就是从body开始到你触发事件的节点，从外到内的一个过程。 冒泡呢，与之相反，从你触发的节点开始，一级一级往外，直到body，是一个从内到外的过程。他们的顺序是先捕获，再冒泡。

在addEventListener中addEventListener（event事件名称，function回调函数，是否在捕获或冒泡阶段执行）第三个参数可以改变事件触发时机。

事件对象 event

div.onclick=function(event){}这个里面的event就是事件对象，我这里说几个常用的。

event.preventDefault() //阻止默认事件，表单提交，a标签。
event.stopPropagation() //阻止传递下去，一帮用在一些自定义组件上，比如遮罩隐藏，在弹框上就要阻止传递了。
event.target //触发事件的元素，事件委托会用到。

事件名称

通用事件
load 加载成功，window.load(function(){}),还有一个与之类似的DOMContentLoad当DOM加载完成之后触发。
unload 与之相反，卸载的时候
error 发送错误的时候，这个比较有意思。img触发error之后使用一张占位图。监听全局的错误提示，然后统计汇总，比如fundebug，也可以自己根据特性写一个针对公司项目的。
scroll 滚动的时候触发，无限滚动之类的一些效果
resize 放大缩小窗口的时候发生变化，和上面的scroll都需要注意去抖， 鼠标事件

click 单击事件，在DOM上单击鼠标时候触发。用户在完成一次mousedown和mouseup之后触发click。触发顺序是：mousedown -> mouseup -> click。
mousedown和mouseup 鼠标按下和弹起，使用频率不是很高。可以做一下拖动之类的效果。
mouseout和mouseover 鼠标移出和移入，使用起来会有冒泡的问题，可以使用延时的方法解决
mouseleave和mouseenter 鼠标移除和移除，解决了冒泡的问题。
mousemove 鼠标移动
键盘通用事件

keydown 按下键盘
keypress 中间的一个事件
keyup 抬起键盘
textInput 是对keypress的补充，用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件。
compositionstart 在IME的文本复合系统打开时触发，表示要开始输入了。当你使用输入法的时候会触发一下
compositionupdate 在向输入字段中插入新字符时触发。
compositionend 在IME的文本复合系统关闭时触发，表示返回正常键盘的输入状态。
控件事件

input 当内容发生改变的时触发，有可能是代码触发的改动兼容ie的话input propertychange
change 当失去焦点时，内容改变触发
blur 失去焦点触发
focus 获得焦点触发
DOM变动事件
DOMNodeInserted 插入节点时触发，appendChild这种
DOMNodeRemoved 移除节点时触发，removeChild
DOMSubtreeModified 发生变化最后会触发
DOMNodeInsertedIntoDocument
DOMAttrModified
DOMCharacterDataModified
触摸事件 移动端
touchstart 触摸
touchmove 触摸时移动
touchend 移开
手势 gesturestart - gesturechange - gestureend

相关链接:
js基础入门
js数组
js流程控制
js函数
js网页交互
js内置对象
js浏览器对象 BOM对象
js DOM对象

读源码，学JavaScript
前端开发相关速查表（Cheatsheets）整理集合