JavaScript工作中常用到的方法

常用方法

数学方法

编号	方法名	解释
1	abs	绝对值
2	ceil	进一取整
3	floor	舍去取整
4	round	四舍五入取整
5	random	获取0到1的随机数
6	sqrt	开平方
7	pow(m,n)	m的n次幂
8	max	最大值
9	min	最小值
10	toFixed()	括号代表留几位小数
11	Infinity	无限大

字符串方法

编号	方法名	解释
1	trim	去除字符串两边的空白字符串
2	toLowerCase	将字符串转为小写
3	toUpperCase	将字符串转为大写
4	split	使用指定字符将字符串分割成数组
5	search	查找字符串，支持正则查找
6	replace	字符串替换
7	charAt	返回指定索引位置的字符
8	repeat	重复字符串
9	parseInt	将字符串转为整数

10 parseFloat() 将一个字符串转换成一个浮点数字

数组方法

编号	方法名	解释
	every: 循环在第一次 return false 后返回
	some: 循环在第一次 return true 后返回
	filter: 返回一个新的数组，该数组内的元素满足回调函数
	map: 将原数组中的元素处理后再返回
	reduce: 对数组中的元素依次处理，将上次处理结果作为下次处理的输入，最后得到最终结果。
1	unshift	在数组的头部插入元素
2	shift	将数组头部的元素弹出
3	push	在数组的尾部插入元素
4	pop	弹出数组尾部元素
5	join	使用字符串将数组拼接为字符串
6	toString	将数组转为字符串,数组在转为字符串的时候会默认调用该方法
7	splice(start, length)	从索引为start的位置截取长度为length长的数组元素，改变原数组
8	concat	合并数组
9	slice(start,end)	截取数组，不会改变原数组,取头不取尾
10	indexOf	查找元素的索引，找不到值为 -1
11	lastIndexOf	逆序查找元素的索引，找不到值为-1
12	reverse	反转数组
13	sort	对数组进行排序

获取元素对象

编号	方法	解释
1	document.getElementById	通过id获取元素对象，值为单一对象
2	document.getElementsByTagName	通过标签名获得元素对象，值为类数组对象，通过索引选取指定对象
3	document.getElementsByClassName	通过class获得元素对象，值为类数组对象，通过索引选取指定对象
4	document.getElementsByName	通过name获得元素对象，值为类数组对象，通过索引选取指定对象
5	document.querySelector	通过css选择器获取单一对象，多个取第一个
6	document.querySelectorAll	通过css选择器获取多个对象，值为类数组对象，通过索引选取指定对象

节点操作

编号	方法	解释
1	document.createElement	创建元素节点
2	appendChild	在父节点末尾插入新的子节点
3	insertBefore(newNode, node)	在父节点中将新的节点插入到指定节点的前面
4	clone(bool)	true克隆子节点，false不克隆子节点
5	removeChild	在父节点中移除子节点
6	replaceChild(newNode,oldNode)	使用新节点替换原来的节点
7	childNodes	获取所有子节点
8	children	获取所有子元素节点
9	firstChild	获取第一个子节点
10	lastChild	获取最后一个子节点
11	firstElementChild	获取第一个子元素节点
12	lastElementChild	获取最后一个子元素节点
13	previousSibling	获取上一个兄弟节点
14	nextSibling	获取下一个兄弟节点
15	previousElementSibling	获取上一个元素兄弟节点
16	nextElementSibling	获取下一个元素兄弟节点
17	parentNode	获取父节点
18	parentElement	获取父元素节点
19	nodeName	获取节点名称
20	nodeType	获取节点类型
21	nodeValue	获取节点值

1 、onClick 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击

2 、onDblClick 鼠标双击事件

3、 onMouseDown 鼠标上的按钮被按下了

4 、onMouseUp 鼠标按下后，松开时激发的事件

5、 onMouseEnter/onMouseOver 当鼠标移动到某对象范围的上方时触发的事件

6、onMouseMove 鼠标移动时触发的事件

7、 onMouseLeave/onMouseOut 当鼠标离开某对象范围时触发的事件

8、onContextmenu 鼠标右键

DOM中的标签属性操作

• 获得： getAttribute(name)
• 设置：setAttribute(name, value)
• 移除：removeAttribute(name)

样式操作

• 行内样式

  • 获得： dom.style.属性名
  • 设置：dom.style.属性名 = 属性值

• 获得解析样式

  • 高级：getComputedStyle(dom).getPropertyValue(属性名) 或者通过getComputedStyle获得样式对象，使用属性获取对应的样式。
  • IE: currentStyle
  • 掌握兼容的处理

• 使用属性添加样式

  • 添加样式： 添加一个class值
  • 移除样式：移除对应的class值
  • 自定义的封装

  onload

  window.onload：当页面的结构加载完毕再执行

onscroll

鼠标的滚轴事件

onresize

窗口大小发生改变，触发该事件

键盘事件

• onkeydown：键盘按下事件
• onkeypress：键盘按下未抬起事件
• onkeyup：键盘抬起事件

表单事件

• onfoucus: 获取焦点
• onblur：失去焦点
• oninput：输入事件
• onchange：表单发生改变
• onselect：表单被选中
• onsubmit：表单提交事件
• onreset：表单重置

周期执行函数和延迟执行函数

• setInterval(callBack, time): 每隔time时间执行一次callBack函数
• setTimeout(callBack, time): 延迟time时间，执行callBack函数
• clearInterval(定时器的标识)：清除定时器
• clearTimeout(延时器的标识)：清除延时器

time的时间单位都为ms，1000ms = 1s