JavaScript常用方法总结

JavaScript常用方法

DOM操作

方法	作用
document.querySelector(CSS选择器)	通过CSS选择器选择一个元素
document.createElement(element)	创建 HTML 元素节点
document.createAttribute(attribute)	创建 HTML 属性节点
document.createTextNode(text)	创建 HTML 文本节点
元素节点.removeChild(element)	删除 HTML 元素
元素节点.appendChild(element)	添加 HTML 元素
元素节点.replaceChild(element)	替换 HTML 元素
元素节点.insertBefore(element)	在指定的子节点前面插入新的子节点

鼠标事件

事件	作用
onclick	当单击鼠标时运行脚本
ondblclick	当双击鼠标时运行脚本
onmousedown	当按下鼠标按钮时运行脚本
onmouseup	当松开鼠标按钮时运行脚本
onmousemove	当鼠标指针移动时运行脚本
onmouseover	当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡
onmouseout	当鼠标指针移出元素时运行脚本，不可以阻止冒泡
onmouseenter	当鼠标指针移至元素之上时运行脚本，可以阻止冒泡
onmouseleave	当鼠标指针移出元素时运行脚本，可以阻止冒泡
onmousewheel	当转动鼠标滚轮时运行脚本
onscroll	当滚动元素的滚动条时运行脚本

String方法

方法	作用
str.charAt(1)	该方法返回字符串str的1号位置的字符(索引从0开始)
str.charCodeAt(1)	该方法返回字符串str的1号位置的字符对应的Unicode编码
concat(str1, str2)	用来连接两个或多个字符串
indexof()	检索一个字符串中是否含有指定内容，如果字符串中含有该内容，则会返回其第一次出现的索引，如果没有找到指定的内容，则返回-1;可以指定一个第二个参数，指定开始查找的位置
str.slice(strat, end)	从字符串str中截取指定的内容，不会影响原字符串，而是将截取到内容返回
str.substring(strat, end)	可以用来截取一个字符串，它和slice()类似,不影响原数组
str.substr(start, length)	返回str字符串从start位置开始, length个字符构成的字符串,不影响原数组.
str.split(‘,’)	该方法返回一个数组,该数组由字符串str分割而成
toUpperCase()	将一个字符串中所有的字母转换为大写并返回

数组方法

方法	作用
arr.push()	该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
arr.pop()	该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回
arr.unshift()	该方法向数组开头添加一个或多个元素，并返回新的数组长度
arr.shift()	该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回
arr.forEach()	该方法可以用来遍历数组
arr.slice(start, end)	该方法可以用来从数组提取指定元素，该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
arr.splice(start, length)	该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
concat(arr1,arr2)	该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响
arr.join()	该方法可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用’,'作为连接符
arr.reverse()	该方法用来反转数组，该方法会直接修改原数组
arr.sort()	该方法可以用来对数组中的元素进行排序，也会影响原数组，默认会按照Unicode编码进行排序

JQuery常用方法

选择器

示例	作用
$(‘div’).css(‘background’, ‘red’);	div元素的背景设为红色
$(‘#box~li’).css(‘background’, ‘red’);	选择id为box的元素的后面的同级li,背景设为红色
$(‘li:odd’).css(‘background’, ‘red’);	选择偶数的li,背景设为红色
$(‘p:hidden’).css(‘display’, ‘block’);	让隐藏的p元素显示出来
$(‘ul li:nth-child(2)’).css(‘background’, ‘red’);	选择所有父级元素ul下的第二个子元素li，设置其背景为红色

样式类的操作

示例	作用
$(‘li’).addClass(‘beauty’);	为li标签添加beauty类
$(‘li’).removeClass(‘beauty’);	为li标签移除beauty类
$(‘button’).click(function () { $(‘div’).toggleClass(‘hide’); });	按钮点击时,如果div存在hide类则删除hide样式类 如果div不存在hide样式类则添加hide样式类

其它方法

方法	说明
$.trim(str)	去除字符串str中起始和结尾的空格
$.type(obj)	返回obj的JavaScript对象类型
$.isArray(arr)	测试一个对象是否为一个数组
$.isFunction()	测试指定对象是否为一个函数
$(‘:text’).val()	$.val()方法可以获取表单元素的值
click()	$(‘button’).click(function () {…}); 元素被单击时…
dblclick()	$(‘button’).dblclick(function () {…}); 元素被双击时…
mouseenter()	$(‘div’).mouseenter(function () {…}); 鼠标进入元素时…
mouseleave()	$(‘div’).mouseleave(function () {…}); 鼠标离开元素时…
hover()	KaTeX parse error: Expected '}', got 'EOF' at end of input: …r(function () {(this).css(‘background’, ‘red’); }, function () {$(this).css(‘background’, ‘green’);}); //鼠标进入,背景变红, 鼠标离开,背景变绿
toggle()	KaTeX parse error: Expected '}', got 'EOF' at end of input: …k(function () {(‘.box’).toggle();}); //通过点击button来实现box的显示/隐藏