主流浏览器                            内核    

IE                                          trident

Chrome                                 webkit/blink

firefox                                        Gecko

Opera                                      presto  

Safari                                        webkit

如何引用js？

·页面内嵌<script></script>标签

·外部引入<script scr="location"></script>

为负荷web标准（w3c标准中的一项）结构、样式、行为相分离，通常会采用外部引入。

当外部引入和页面内嵌同时使用时，只显示外部引用

变量（variable）：

    变量声明、赋值分解

    单一var

命名规则

1、变量名必须以英文字母、_、$开头

2、变量名可以不包括英文字母、_、$、数字

3、不可以用系统的关键字、保留字作为变量名

值类型——数据类型

1、不可改变的原始值  栈数据 (存放位置stack 栈)

Number String Boolean undefined null

2、引用值  堆数据（存放位置 heap 堆）

array Object function ... data RegExp

js语句基本规则

    ·语句后面要用分号结束  ";"  

    ·js语法错误会引发后续代码终止，但不会影响其他js代码块

    ·书写格式要规范，" = + / - ” 两边都应该有空格

运算操作符

"+"

    1、数学运算、字符串链接

    2、任何数据类型字符串都等于字符串

优先级“=”最弱，“（）”优先级较高

比较运算符

    ">"  "<"  "=="  ">="  "<="  "!="

·    比较的的结果为boolean值

逻辑运算符

  "&&"：    与运算依次往后比较，遇到false 直接把false的值返回 

 "||"：    或运算，依次往后比较，遇到true 返回值 

    "!"  ：    非运算 把值转换为boolean类型再取反进行输出

        ·被认为false的值：

undefined    null    NaN    ""    0    false

条件语句

    ·if、if else if 

    ·for

    ·while，do while

    ·switch case

    ·break

    ·continue 

引用值

    ·数组

    ·对象

类型转换

typeof（类名）// typeof 类名           l检查该类所属的字符类型俩种写法

      ·显示类型转换

        Number（mix）    转换为数字类型，不能转为数字一律转换为NaN

        parseInt（string，radix） 侧重点在于把整型，把该类化为整数 不会考虑false true等。其中radix作为基底，会叭处理的数以radix的基底所代表的进制算法进行转化

        parseFloat（String）  转换为浮点数类型

        toString（radix）  使用方法为 类名.toString（）转换为String类型 其中undefin、null不能用，其中radix是以数据为原型转换为radix类型的数值

        String（mix）  转化为字符串类型

        Boolean（）   转化为布尔值

    ·隐试类型转换

        isNaN（）         实现方法 内部调用Number（）去判断所得的值是否为NaN进行进一步操作

        ++\--   +\-          实现方法 内部调用Number（）后进行运算，如果类型是字符串，会输出NaN但是属性已经变成数字类型

+  字符串连接会强制吧后边的类型转化为字符串型        

             -*/%   && || ！   <  >   <=  >+   ==    !=    以上字符串都需要调用Number（）进行转化后进行比较

    ·不发生类型转化

        ·===  绝对等于

        ！== ·绝对不等于

函数表达式

1、命名函数表达式

var test = function abc() {

}

2、匿名函数表达式   ---  函数表达式

var test = function() {

}

组成形式

    ·函数名称

    ·参数

        形参

        实参 

            当形参<=实参时，俩个会有映射关系，同时发生变化

            当形参>=实参时，在<实参的部分会有映射关系、其余大于部分不做考虑

        返回值

作用域初探

    作用域定义：变量（运行期上下文）和函数生效（能被访问）的区域

    全局变量、局部变量

    作用域的访问顺序  里面可以访问到外面，外面的访问不到了里面，越里层访问的权限越大

js运行三部曲

    ·语法分析

        浏览全部代码，看看有没有特别明显的语法错误，比如 使用中文字符等等

    ·预编译

            ·函数声明整体提升

            ·变量 声明提升

    ·解释执行

预编译前奏

    1、imply global 暗示全局变量：即使任何变量，如果变量未经声明就赋值，此变量就为全局对象所有       就可以使用 window.  调用出来

    2、一切声明的全局变量，全是window的属性

        预编译发生在函数执行的前一刻

预编译四部曲

    1、生成AO对象

    2、找形参和变量声明，将变量和形参名作为AO属性名，值为undefined

    3、形参和实参的值相统一

    4、在函数体里面找函数声明，值赋予函数体

闭包

    当内部函数保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄漏。

闭包的作用

    ·实现公有变量

    ·可以做缓存（存储结构）

    ·可以实现分装，属性私有化

    ·模块化开发，防止污染全局变量

立即执行函数：

        ·定义：此类函数没有声明，在一次执行后即释放。适合做初始化工作。

                写法1、（function （）{}（））

                写法2、（function（）{}）（）

              ··只有表达式才能被执行符号执行

复习：

使用function test（）{}     这种方法创建的函数称为函数声明

使用var test = function（）{}   这种方式建立的称为函数表达式

作用域精解    

        ·运行期上下文：当函数执行时，会创建一个人称为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时执行的执行上下文都是独一无二的，所以多次调用一个函数会导致建立多个执行上下文，函数每次执行时。都会把新生成的执行上下文，填充到作用域链的最顶端。当执行完毕，它所产生的执行上下文被销毁。

        ·查找变量：从作用域链的顶端依次向下查找

面试题积累：

使用原生js,addEventListener,给每个li绑定一个click事件，并且输出他们的顺序

<ul>

<li>a</li>

<li>a<li>

<li>a<li>

<li>a<li>

</ul>

简答方法  ：使用闭包以及立即执行函数的特性，在每次执行for循环时，产生的 全新的AO进行操作

<script>

function test() {

            var liCollection = document.getElenmentsByTagName('li');  

for(var i=0;i<liCollection .length;i++){

    (function(j){

            liCollection[j].onclick = function() {

            console.log(j);

                        }

                }(i))

        }

}

test();

</script>

对象

1、用你已经学习的知识点，描述下你心中的对象

对象是一个具有自己独立属性的容器

2、属性的增、删、改、查

3、对象的创建方法

        ·字面量

var obj = new object{}

        ·构造函数

            ·系统自带

            ·自定义

为了与方法函数构造区分，对象构造使用大驼峰构造方法，只要是单词，每个单词首字母都需要大写

    例：   function Obj（）{

            this.name:"赋值"    在这种方法构造的对象中，应该使用this.来进行赋值

       }

var Obj1 = new Obj{}

构造函数内部原理

    ·1、在函数体最前面隐式的加上this={}

    ·2、执行this.xxx = xxx;

    ·3、隐式的返回this

包装类

new String();

new boolean();

new Number();

原型

    ·1、定义:原型function对象是一个属性，他定义了构造函数制造出的对象的公有祖先。通过构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。

    ·2、利用原型的特点和概念，可以提取公有属性。

原型链：

    ·如何形成原型链？类似像继承一样。

每个子类的实例对象都包含一个内部属性 _proto_ 属性，该属性包含一个指针，指向父类的prototype，即原型对象。若父类的原型对象的 _proto_ 属性再指向上层函数，即爷爷类的prototype，层层往上，就成了原型链。

    ·原型链上的属性的增删改查

改变this指向

call需要把实参按照形参的个数传进去

call的使用方法

apply需要穿一个arguments  实参列表

apply使用方法

圣杯模式（有残余问题，没有完全理解）//3.28号已解决

function inherit(Target, Origin){

        //    先创建一个中间件来接收父极的proterype

    function F() {}    

    //    让F的proertype指向父集

        F.protertype = Origin.protertype

    //    new一个F 产生一个带有新的父集且与父集没有链式关系的protertype

        Target.protertype = new F()；

    //    更改子集中protertype的原型指向为自身

        Target.protertype.constuctor = Target; 

    //    可以写可不写，查询你真正继承的父集

        Target.protertype.uber = Origin.protertype;

}

命名空间

管理变量，防止污染全局，适用于模块化开发

对象的枚举

for in

        1、hasOwnPreoperty

        2、in

        3、instacnceof

    A   instanceof   B

A对象 是不是 B构造函数造出来的

看A对象的原型链上 有没有 B原型

克隆

深度克隆 

数组常用方法

    ·改变原数组

push:向数组后一位添加一位

pop：删除数组最后一位

unshift：在数组前面添加一位

shift：在数组前面删除一位

try catch用法

try {

}catch(e){

}

   1、 当try里面的发生错误，不会执行错误后的try里面的代码

    2、会直接执行catch里的代码，其中catch(e) e就是系统把error.message  +  error.name 封装好传给e，以供后续的使用

    3、当catch里面的执行完后，再执行后面的代码

Error.name的六种值对于的信息：

1、EvalError： eval（）的使用与定义不一致

2、RangeError：数值越界

3、ReferenceError：非法或不能识别的引用数组

4、SyntaxError：发生语法解析错误

5、TypeError：操作数类型错误

6、URIError：URI处理函数使用不当

ES5严格模式

"use strict";    //在页面的最顶端添加，表示启动es5.0的语法

es5中with的使用

不在兼容es3的一些不规范语法，使用全新的es5规范

俩种用法：

    ·全局严格模式

    ·局部函数内严格模式

为什么使用字符串：原因时，可以向下兼容，就算你的浏览器不支持es5，也不会产生错误

特殊语法：不支持with,arguments.callee,func.caller.

    变量赋值提前必须声明

    局部this必须被赋值，赋值什么就算什么

    拒绝重复属性和参数

DOM——>Document Object Model

Dom：定义了表示和修改文档所需的方法。DOM对象几位宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。

查

查看元素节点：

    document：代表整个文档

    document.getElementById('')：通过id选择元素

    document.getElementsByTagName('')：通过标签名选择元素

    document.getElementsByClassName(''):通过classname选择元素

    document.querySelector(): css选择器

    document.querySelectorAll()： css选择器

遍历节点树：

    parentNode:父标签

    childNodes：子节点们

    firstChild： 第一个子节点

    lastChild： 最后一个子节点

    nextSibling：后一个兄弟节点

    previousSibling：前一个兄弟节点

基于元素节点树的遍历

    parentElement: 返回当前元素的父元素

    children：只返回当前元素的元素子节点

    firstElementChild：返回的是第一个元素节点

    lastElementChild：返回的是最后一个元素节点

    nextElementSibl/previousElementSibling：返回后一个/前一个兄弟元素

    节点的四个属性：

    nodeName：元素的标签名，以大写形式表示，只读

    nodeValue： Text节点或者comment节点的文本内容可读写

    nodeType：该节点的类型，只读

    attributes：element节点的属性集合

        节点的一个方法

            Node.hasChildNodes() : 他有没有子节点

DOM结构树

        图中为一系列继承关系

    1、getElementById方法定义在Document.protetype上，Element节点上不能使用

    2、getElementByName方法定义在HTMLDocument.protetype上，即非html中的document不能使用

    3、getElementByTagName方法定义在Document.protetype和Element.protetype上

    4、HTMLDocument.prototype定义了一些常用的属性，body和head分别指代html文档中的<body><head>标签

    5、Document.prototype上定义了documentElement属性，指代文档的根元素，html文档中，他总是指代<html>元素

增

    document.createElement(): 创造元素节点

    document.creatTextNode()：创建文本节点

    document.createComment()：创建注释节点

    document.createDocumentFragment()： 创建节点碎片

插

    PARENTNODE.appendChild()：任何一个元素节点都有这个appendChild，相当于push

    PARENTNODE.insertBefore(a,b)：把a节点插在b节点之前

删

    parent.removeChild();  父节点删除子节点

    child.removue();    子节点自己进行删除

替换

    parent.replaceChild(new,origin)：    

DOM基本属性

Element节点的一些属性

    innerHTML：获取其中html，并且可以直接覆盖式的修改

    innerText（火狐不兼容）/textContent（老版本IE不支持）

Element节点的一些方法

    ele.setAttribute()：给该节点身上添加一些元素

    ele.getAttribute()：获取该元素身上的一些元素

日期对象

日期对象是系统提供好的

    看w3c的api

JS定时器

setInterval(): 每个setInterval都有一个唯一标识，可以通过这个唯一标识，对这个定时器进行消除

var timer = setInterval(function () {    //创建一个定时器

    if(i++ < 10){

        clearInterval(timer);      //清除这个 setinterval

    }

},1000)    //没1000毫秒执行一圈

setTimeout():推迟一段时间再运行  同样的也有clearTimeout（）方法

    这些方法都是全局对象window上的方法，内部函数this指向window

注意：

setInterval("console.log("引号中的代码会以js的形式进行执行")",1000);

这种写发，逗号前的引号会以js代码的格式进行执行

DOM操作css

dom.style.prop  //可读可写，写在行间距里面的样式

    注意：

            1、碰到类似background-color类似的属性名需要改写为小驼峰式命名方法backgroundColor

            2、遇到float类似的系统保留字，需要改写为cssFloat。

查询计算样式：

    window.getComputedStylr(elem, null)   //获取到当前显示的elem所有的样式

    window.getComputeStyle(elem, null)["所查询的属性"]   

事件

如何绑定事件处理函数

    1、ele.onxxx = function (event){}

    ·兼容性好，但是一个元素的同一个事件上只能绑定一个处理函数

    2、obj.addEventListener(type, function, false);

    ·IE9以下不兼容，可以为一个事件绑定多个处理程序

    3、obj.attachEvent('on' + type, function)

    IE独有，一个事件同样可以绑定多个处理函数

减除事件处理程序

    1、ele.onclick = false/ '' / null

    2、ele.removeEventListener(type, function, false)  //若绑定匿名函数，则无法减除

    3、ele.detachEvent('on' + type, function)    //若绑定匿名函数，则无法解除

事件处理模型——事件冒泡、捕获

    事件冒泡：

        结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

    事件捕获：

        结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）

        ~触发顺序：先捕获，后冒泡

focus，blur，change，submit，reset，select等事件不冒泡

取消冒泡

    ·W3C标准： event.stopPropagation（）

    ·IE独有 event.cancelBubble = true;

组织默认事件：

默认事件——表单提交，a标签跳转、右键菜单等

    1、return false; 以对象属性的方式注册的事件才生效

    2、event.preventDefault(); W3C标准，IE9以下不兼容

    3、event.returnValue = false;兼容id

事件对象

event || window.event 用于IE

事件源对象兼容写法：

事件委托

利用事件冒泡和事件源对象进行处理

优点：    1、性能 不需要循环所有的元素，一个个绑定事件

                2、灵活 当有欣的子元素时，不需要重新绑定事件

鼠标事件

click、mousedown、mousemove、mouseup、contextmenu(右键呼出菜单)、mouseover（鼠标覆盖）、mouseout（鼠标离开）、mouseenter（鼠标覆盖）、mouseleave（鼠标离开）

用button来区分鼠标的按键  （左键：0 ，右键: 2 滚轮为1）

DOM3标准规定：onclick事件只能监听左键，只能通过mousedown和mouseuo来判断鼠标键

如何解决mousedow和click事件： 可以设置俩个时间戳，通过对俩个时间的判断可以得出是拖拽还是点击事件

键盘事件

keydown keyup keypress

keydown > keypress > keyup

    keydown可以响应任意键盘按键，keypress只可以响应字符类按键

文本操作事件

oninput（文本框里的内容每次输入时都会触发）、focus、blur、change（会对比获得焦点和失去焦点时的文本内容，发生改变时触发）

JSON

JSON时一种传输数据的格式（以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json时用来传输的）

JSON.parse();  把String样式的数据，转换为JSON形式

JSON.tringify(); 把json类型数据转换为string

异步加载js

js加载缺点：加载工具方法没必要阻塞文档，过得js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。并且有些工具方法需要按需加载，用到在加载，不用不加载。

javascript异步加载的三种方案：

    1、defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用，也可以将代码写到内部。

    2、async 异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script标签里（执行时不阻塞页面）

    3、创建script。插入到DOM中，加载完毕后callback；

JS加载时间线

    正则表达式