javascript

声明函数：

function 函数名（）{}
var 函数名=function(){}

伪数组

arguments

预解析

1. js运行引擎js分两步：预解析代码执行

（1）预解析：js引擎会把js里面的所有的var还有function提升到当前作用域的最前面（2）代码执行：按照书写顺序从上往下依次执行

2. 预解析分为：变量预解析（变量提升）和函数解析（函数提升）

（1）变量提升就是把所有变量声明提升到当前作用域的最前面，不提升赋值操作（2）函数提升就是把所有函数声明提升到当前作用于的最前面，但是不调用

创建数组

1.var arr=[] 2.var arr=new Array[]

创建对象

1、利用new Object（）；

var pink=new Object（）; pink.name= pink.age= pink.sayhi=function（）{}

2、利用构造函数创建对象

function Person（name，age，sex）{ this.name=name; this.age=age; this.sex=sex; this.sayHi=function(){} }

3、利用字面量创建对象

var star={ name:'pink', age='18', sex='男', sayHi:function(){} }

遍历对象

for（变量 in 对象名）{} for （var k in obj）{}//k指属性名，obj[k]是属性值

事件基础

事件三要素

事件源事件类型事件处理程序如果想要某个表单被禁用不能再点击 disabled 我们想要这个按钮 button禁用 btn.disable=true活着this.disable=true(this指向事件函数的调用者btn 通过className更改元素类名：this.className = 'change';

自定义属性操作

1、获取元素的属性值（1）、element.属性（2）、element.getAttribute('属性') 2、设置元素属性值（1）、element.属性='值' 注意类名要用className （2）、element.setAttribute('属性','值'） 注意类名要用class不要用className 3、移出属性 element.removeAttrbute('属性') 注意：带有Attribute主要是自定义属性，自定义属性一般带有data-index,如data-index

节点操作

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。元素节点 nodeType为1 属性节点 nodeType为2 文本节点 nodeType为3（文本节点包括文字、空格、换行等）

父节点：node.parentNode 注意：parentNode属性返回某节点的父节点，是最近一个父节点。

子节点：node.childNode 注意：childNode属性返回第一个子节点。parentNode.lastChild返回最后一个子节点。 parentNode.children（是一个只读属性，返回所有子元素节点。他只返回子元素节点，其余节点不返回） parentNode.fristElementChild返回第一个子元素节点 兄弟节点：node.nextSibling node.previousSibling(兄弟元素节点) node.nextElementSibling node.previousElementSibling(兄弟元素节点)

创建节点

document.createElement('tagname')

添加节点

node.appendChild(child) 将一个节点添加到指定父节点的子节点列表末尾。类似于长CSS里面的after伪元素。 node.insertBefore(child,指定元素) 将一个节点添加到指定父节点的指定子节点列表前面。类似于长CSS里面的before伪元素。

DOM核心：创建、增、删、改、查属性操作和事件操作。

注册事件（绑定事件）

传统注册方式

（1）利用on开头的事件onclick （2）或者btn.onclick=function(){} （3）特点：注册事件的唯一性（4）同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

方法监听注册方式

（1）w3c标准推荐方式（2）addEventListener()他是一个方法，IE9之前可使用attachEvent()代替（3）特点：同一个元素同一个事件可以注册多个监听器（4）按顺序依次执行 (i)监听方式eventTarget.addEventListener(type,lister[,useCapture]) type:事件类型字符串，比如 click 、mouseover ，注意这里不要带 on listener：事件处理函数，事件发生时，会调用该监听函数 useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习 (ii)eventTarget.attachEvent(eventNameWithOn, callback) eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。该方法接收两个参数： eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on callback：事件处理函数，当目标触发事件时回调函数被调用.注意：IE8 及早期版本支持

删除事件方式（解绑事件）

传统注册

eventTarget.onclick = null;

方法监听

eventTarget.removeEventListener(type, listener[, useCapture]); eventTarget.detachEvent(eventNameWithOn, callback);

DOM事件流

e.target和this的区别：

this是事件绑定的元素，这歌汉书的调用者(绑定这个事件的元素) e.target是事件触发的元素

事件对象的常见属性和方法

阻止事件冒泡

标准写法 e.stopPropagation() 非标准写法 e.cancelBubble=true;

事件委托

事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点

var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，点我应有弹框在手！');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';

鼠标事件对象

常用键盘事件

监盘事件对象

BOM

窗口加载事件

一、window.onload=function(){} 或者window.addEventLister("load",function(){}) window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。
如果使用 addEventListener 则没有限制

二、document.addEventListener('DOMContentLoaded',function(){}) DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。 Ie9以上才支持如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

调整窗口大小事件

window.onresize = function(){} 或者window.addEventListener("resize",function(){}); window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。注意：

只要窗口大小发生像素变化，就会触发这个事件。
我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

定时器

window 对象给我们提供了 2 个非常好用的方法-定时器。 setTimeout() setInterval()
window.setTimeout(调用函数, [延迟的毫秒数]); setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。注意：

window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
延迟的毫秒数省略默认是 0，如果写，必须是毫秒。
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

停止定时器

window.clearTimeout(timeoutID) clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。注意：

window 可以省略。
里面的参数就是定时器的标识符。

setInterval（）定时器

window.setInterval(回调函数, [间隔的毫秒数]); setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。注意：

window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取字符串 '函数名()' 三种形式。
间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。 4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。常用于倒计时

Javascript