数组常用函数事件集合

2个索引方法

indexOf()

lastIndexOf()

5个迭代方法

forEach()

map()

filter()

some()

every()

2个归并方法

reduce()

reduceRight()

使用forEach遍历数组，无返回值

vararr= ["a","b","c","d"];
// value 数组中每个值

// index value在数组中对应的下标

// item数组本身
arr.forEach(function(value, index, item) {
    console.log(value, index, item);
});

使用map遍历数组，返回新处理的数组

vararr= [1, 2, 3, 4];

vartest2= arr.map(function(value, index, item) {
    console.log(value, index, item);
    returnvalue * value;
});

console.log(test2);//[1, 4, 6, 19]

函数名称

描述

Length 属性

返回字符串长度

charAt(index)

查询字符串中index位置的字符

indexOf(str)

查询字符串中str字符第一次出现的位置

lastIndexOf(str)

查询字符串中str字符最后一次出现的位置

substring(start,end)

截取字符串指定开始位置和结束位置中间的字符

slice(start, end)

提取字符串指定开始位置和结束位置之间的字符

split(char)

使用指定的字符，将字符串拆分为数组

replace(src, tar)

使用指定的字符串替换原来的字符窜

match(reg)

查询指定的字符串，将查询到的字符串保存到数组中

charCodeAt(index)

将指定index位置的字符，转换成ascii码

fromCharCode(code)

将指定的ascii码转换成对应的字符

方法名称

描述

Math.random()

生成0~1之间的随机数

Math.round()

四舍五入

Math.ceil()

向上取整

Math.floor()

向下取整

Math.max()

获取指定数字中的最大数字

Math.min()

获取指定数字中的最小数字

Math.pow(x,y)

计算指定数字x的y次方

Math.sqrt(x)

计算x的平方根

创建方式

var d = new Date()

new Date(“month dd,yyyy hh:mm:ss”)

new Date(“month dd, yyyy”)

new Date(yyyy,mth,dd,hh,mm,ss)

new Date(yyyy,mth,dd)

new Date(ms)

new Date(“yyyy/MM/dd hh:mm:ss”)

函数

描述

getDate()

获取一个月中的某一天(1~31)

getDay()

获取一周中的某一天（0~6）

getMonth()

获取一年中的月份（0~11）

getFullYear()

获取当前的年份

getHours()

获取一天中的小时（0~23）

getMinutes()

获取一个小时中的分钟（0~59）

getSeconds()

获取一分钟的秒数（0~59）

getMilliseconds()

获取一秒中的毫秒数（0~999）

getTime()

获取从1970年1月1日0点到现在的毫秒数

setDate()

设置某一天

setDay()

设置星期

setMonty()

设置月份

setFullYear()

设置年

setHours()

设置小时

setMinutes()

设置分钟

setSeconds()

设置秒钟

setMilliseconds()

设置毫秒

setTime()

通过毫秒数设置日期时间

toString()

获取字符串日期时间

toTimeString()

获取字符串时间

toDateString()

获取字符串日期

鼠标事件

onclick

鼠标单击

ondblclick

鼠标双击

onmousedown

鼠标按键按下

onmouseup

鼠标按键抬起

onmousemove

鼠标在元素上移动

onmouseout

鼠标移出

Onmouseenter

鼠标移入

键盘事件

Onkeydown

键盘按键按下

Onkeyup

键盘按键抬起

onkeypress

键盘按键按住

表单事件

Onblur

失去焦点

Onfocus

获取焦点

Onchange

内容修改

Onsubmit

表单提交

在数组的末尾添加数据

push(args)

在数组的末尾移除数据

pop(args)

在数组末尾添加数据

push(args)

在数组开头移除数据

shift(args)

同时JS提供了一个unshift()方法，功能和shift(args)刚好相反，是在数组开头增加数据的方法。

函数名称

描述

alert()

警告对话框

confirm()

确认对话框

prompt()

交互对话框

setInterval()

定时器函数

setTimeout()

延时器函数

clearInterval()

清除定时器

clearTimeout()

清除延时器

moveBy()

扩展 moveBy() 方法可相对窗口的当前坐标把它移动指定的像素。

moveTo()

扩展 方法可把窗口的左上角移动到一个指定的坐标。

resizeBy()

扩展 resizeBy() 方法用于根据指定的像素来调整窗口的大小。

注意： 此方法定义指定窗口的右下角角落移动的像素，左上角将不会被移动(它停留在其原来的坐标).

resizeBy(width,height)

参数

描述

width

必需。要使窗口宽度增加的像素数。可以是正、负数值。

height

可选。要使窗口高度增加的像素数。可以是正、负数值。

resizeTo()

扩展

方法用于把窗口大小调整为指定的宽度和高度。

语法

window.resizeTo(width,height)

参数

说明

width

必需的。设置窗口的宽度，以像素为单位

height

必需的。设置窗口的高度，以像素为单位

scrollBy()

扩展

scrollBy() 方法可把内容滚动指定的像素数。

注意： 要使此方法工作 window 滚动条的可见属性必须设置为true！

语法

scrollBy(xnum,ynum)

参数

描述

xnum

必需。把文档向右滚动的像素数。

ynum

必需。把文档向下滚动的像素数。

scrollTo()

扩展

scrollTo() 方法可把内容滚动到指定的坐标。

语法

scrollTo(xpos,ypos)

参数

描述

xpos

必需。要在窗口文档显示区左上角显示的文档的 x 坐标。

ypos

必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

open()

扩展

innerHeight

属性，浏览器可视区域高度

innerWidth

属性，浏览器可视区域宽度

• screen对象（了解）

名称

描述

availHeight

返回显示屏幕高度（不包含状态栏）

availWidth

返回显示屏幕宽度（不包含状态栏）

height

返回显示屏幕高度

width

返回显示屏宽度

• location对象（了解）

获取部分页面属性

console.log(location.hostname);//获取打开文件主机名称

console.log(location.pathname);//获取打开文件的路径描述

console.log(location.port);//获取打开文件的网络端口

console.log(location.protocol);//获取打开文件的协议名称

console.log(location.href);//获取打开文件的url

• navigator对象（了解）

获取浏览器信息

console.log(navigator.appCodeName);//浏览器代号Mozilla

console.log(navigator.appName);//浏览器名称 Netscape

console.log(navigator.appVersion);//浏览器版本 5.0

console.log(navigator.cookieEnabled);//启用cookie操作true

console.log(navigator.platform);//硬件平台win32

console.log(navigator.userAgent);//用户代理Mozilla/5.0...

console.log(navigator.systemLanguage);//语言环境 zh-CN

• history对象（了解）

名称

描述

back()

后退到上一个页面

forward()

前进到下一个页面

go(index)

跳转到指定的访问历史页面

函数名称

描述

getElementById()

根据id属性获取标签

getElementsByTagName()

根据标签名称获取标签

getElementsByClassName()

根据class属性获取标签

getElementsByName()

根据name属性获取标签

  

getAttribute()

获取属性值

setAttribute()

设置属性值

removeAttribute()

移除属性

  

tagName

获取标签名称

innerHTML

操作标签内容

innerText

操作标签内容（非W3C规范）

id

获取id属性

title

获取标题

  

style

获取样式

currentStyle

获取样式

getComputedStyle()

获取样式

  

offsetTop

获取元素距离父元素顶部的距离

offsetLeft

获取元素距离父元素左边的距离

  

nodeType

节点类型

1. 元素节点
2. 属性节点
3. 文本节点

8注释节点

9文档节点

console.log(uname.nodeType);// 1
console.log(uname.getAttributeNode("name").nodeType);//2
console.log(container.firstChild.nodeType)// 3

属性/函数名称

描述

offsetWidth

获取元素宽度；包含padding值\border值

offsetHeight

获取元素高度；包含padding值\border值

offsetTop

获取元素距离浏览器顶部的距离

offsetLeft

获取元素距离浏览器左边的距离

备注：如果父元素进行了relative/absolute定位，offsetTop/offsetLeft就是相对父元素的顶部和左边的距离，如果父元素默认定位，就是相对浏览器窗口的距离

属性/函数名称

描述

hasChildNodes()

判断是否包含子节点，返回一个布尔值

children

获取元素所有的子元素节点集合/数组

childNodes

获取元素所有的子节点集合/数组

firstChild

获取元素第一个子节点

firstElementChild

获取元素第一个子元素节点

lastChild

获取元素最后一个子节点

lastElementChild

获取元素最后一个子元素节点

previousSibling

获取元素前一个兄弟节点

previousElementSibling

获取元素前一个兄弟元素节点

nextSibling

获取元素后一个兄弟节点

nextElementSibling

获取元素后一个兄弟元素节点

parentNode

获取元素的父节点

textContent

操作(获取/设置)元素内容

属性/函数名称

描述

createElement(tagName)

根据名称创建一个元素节点

createTextNode(text)

根据文本创建一个文本节点

insertBefore(new,old)

在指定的节点前面添加节点

appendChild(child)

在子节点的末尾追加节点

replaceChild(new,old)

使用新的节点替换指定的节点

removeChild(child)

移除指定的子节点

className

设置标签class属性样式值

事件对象的常规操作方式如下：

属性

描述

type

事件类型，如onclick事件为click

button

声明被按下的鼠标键，整数，0代表左键，1代表中键，2代表右键；这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。

老版本IE：1鼠标左键2鼠标右键3左右同时按4滚轮5左键加滚轮6右键加滚轮7三个同时

clientX

事件触发后鼠标相对浏览器左上角的x距离

clientY

事件触发后鼠标相对浏览器左上角的y距离

offsetX

事件触发后鼠标相对父元素左上角的x距离

offsetY

事件触发后鼠标相对父元素左上角的y距离

pageX

事件触发后鼠标相对浏览器左上角的x距离

pageY

事件触发后鼠标相对浏览器左上角的y距离

x

事件触发后鼠标相对浏览器左上角的x距离[IE兼容，FireFox不兼容]

y

事件触发后鼠标相对浏览器左上角的y距离[IE兼容，FireFox不兼容]

  

keyCode

获取键盘按键对应的ascii码

which

获取键盘按键对应的ascii码

  

网页中的事件，通常包括鼠标相关事件、键盘相关事件、页面元素事件等等

事件名称

描述

onload

页面加载事件

onunload

页面卸载事件

  

onclick

鼠标单击事件

ondblclick

鼠标双击事件

  

onmousedown

鼠标按键按下事件

onmouseup

鼠标按键抬起事件

onmousepress

鼠标按键按住事件

  

onmouseover

鼠标进入元素内部事件

onmouseenter

鼠标进入元素内部事件

onmouseout

鼠标离开元素事件

onmouseleave

鼠标离开元素事件

onmousemove

鼠标在元素上移动事件

onmousewheel

鼠标滚轮事件

  

onfocus

获取焦点事件

onblur

失去焦点事件

onchange

内容修改事件

更多事件和相关操作，请参考如下资源：

DHTML手册

http://www.runoob.com

1. 1. 1. 事件委托

需求：页面上要显示一个非常长的树形菜单，每个菜单点击的时候，如果有子菜单，当菜单被点击时展开子菜单或者收缩子菜单

 

解决方案：获取所有的菜单标签，通过循环给每个li菜单添加单击事件，在事件处理函数中进行判断，有子菜单进行展示/隐藏。

=========================

var _lis = document.getElementsByTagName(“li”);

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

_lis[i].onclick = function() {

     //子菜单操作

}

}

主要操作要点：

• 获取目标对象
  • var t = event.target || event.srcElement
• 获取目标对象的标签名称
  • var tagName = t.nodeName;
• 通过字符串的小写转换函数进行比较
  • str.toLowerCase() :将str所有字符全部转换成小写

解决方案：

=========================

var _ul = document.getElementById(“menu”);

_ul.onclick = function(e) {

    e = e || e.event;

var t = e.target || e.srcElement;

if(t.nodeName.toLowerCase() == “li”){

    //事件操作

}

}

1. 1. 1. JSON对象/构造函数

JSON：一种数据表示格式

JSON对象的表示语法

var对象名称 = {

属性名称=属性值,

属性名称=属性值,

......

}

代码案例：

var hanBin = {

“name”:”寒冰”,

“defend”:80,

“attack”:180

};

console.log(hanBin.name, hanBin.defend, hanBin.attack);