数组常用函数事件集合
2017-01-02 17:26
232 查看
2个索引方法 | indexOf() |
lastIndexOf() | |
5个迭代方法 | forEach() |
map() | |
filter() | |
some() | |
every() | |
2个归并方法 | reduce() |
reduceRight() |
使用forEach遍历数组,无返回值 |
var arr = ["a", "b", "c", "d"]; // value 数组中每个值 // index value在数组中对应的下标 // item 数组本身 arr.forEach(function (value, index, item) { console.log(value, index, item); }); |
使用map遍历数组,返回新处理的数组 |
var arr = [1, 2, 3, 4]; var test2 = arr.map(function(value, index, item) { console.log(value, index, item); return value * 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 | 属性,浏览器可视区域宽度 |
名称 | 描述 |
availHeight | 返回显示屏幕高度(不包含状态栏) |
availWidth | 返回显示屏幕宽度(不包含状态栏) |
height | 返回显示屏幕高度 |
width | 返回显示屏宽度 |
获取部分页面属性 |
console.log(location.hostname);// 获取打开文件主机名称 console.log(location.pathname);// 获取打开文件的路径描述 console.log(location.port);// 获取打开文件的网络端口 console.log(location.protocol);// 获取打开文件的协议名称 console.log(location.href);// 获取打开文件的url |
获取浏览器信息 |
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 |
名称 | 描述 |
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 | 节点类型 元素节点 属性节点 文本节点 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 |
事件委托
需求:页面上要显示一个非常长的树形菜单,每个菜单点击的时候,如果有子菜单,当菜单被点击时展开子菜单或者收缩子菜单 |
解决方案:获取所有的菜单标签,通过循环给每个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”){ // 事件操作 } } |
JSON对象/构造函数
JSON:一种数据表示格式JSON对象的表示语法
var 对象名称 = { 属性名称=属性值, 属性名称=属性值, ...... } |
var hanBin = { “name”:”寒冰”, “defend”:80, “attack”:180 }; console.log(hanBin.name, hanBin.defend, hanBin.attack); |
相关文章推荐
- php中的常用数组函数(五)(数组中获取键名集合)
- javascript技巧及常用事件方法集合(全)
- asp常用函数集合,非常不错以后研究第1/4页
- PHP常用函数之数组篇
- 部分Dojo常用函数简介(五)——事件处理以及Ajax I/O函数扩展
- php中常用数组函数
- 基于php常用函数总结(数组,字符串,时间,文件操作)
- strcat,strcpy,strcmp,strlen4个常用字符串处理函数的数组与指针简单实现方法~
- PHP中的数组操作函数集合
- 数组之--字符串常用函数
- Jquery -> 常用数组函数
- asp常用函数集合,非常不错以后研究第1/4页
- 简单常用JS函数集合大全107个
- PHP常用的数组操作函数
- 常用的事件属性函数
- asp制作中常用到的函数库集合第1/8页
- delphi常用函数、属性、事件参考手册
- delphi常用函数、属性、事件参考手册 (转)
- php数组常用函数