数组常用的方法
方法 |
语法 |
描述 |
增加方法 |
|
|
splice() |
// arr.splice(起始下标,长度,添加的元素1,元素2); arr.splice(3,0,0,1,"xiaolv"); |
从数组中添加或删除元素。 |
push() |
arr.push("xiaonan"); var length = arr.push("dijia"); |
向数组的末尾添加一个或更多元素,并返回新数组的长度。 |
unshift() |
var a = arr.unshift("ez","geleifusi") |
向数组的开头添加一个或更多元素,并返回新的长度。 |
fill() |
// arr.fill("a",2,3); for(var i=0;i<arr.length;i++){ if(arr[i]==5){ arr.fill("a",i,i+1) } } |
使用一个固定值来填充数组。 |
删除方法 |
|
|
slice() |
var arr1 = arr.slice(起始下标,结束下标); var arr1 = arr.slice(); var arr1 = arr.slice(3); var arr1 = arr.slice(3,4); |
选取数组的的一部分,并返回一个新数组。 |
splice() |
// arr.splice(起始下标,长度,添加的元素1,元素2); arr.splice(3,0,0,1,"xiaolv"); |
从数组中添加或删除元素。 |
pop() |
var d = arr.pop(); |
删除数组的最后一个元素并返回删除的元素。 |
shift() |
var a = arr.shift(); |
删除并返回数组的第一个元素。 |
查询方法 |
|
|
indexOf() |
var index = arr.indexOf("xiaolv"); |
搜索数组中的元素,并返回它所在的位置。 |
lastIndexOf() |
var index = arr.lastIndexOf("xiaolv"); |
返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。 |
includes() |
var f = arr.includes("jipai"); |
判断一个数组是否包含一个指定的值。 |
isArray() |
var f = Array.isArray(obj); |
判断对象是否为数组。 |
every() |
var f = arr.every(function(item,index){ return item>=5; }) |
检测数值元素的每个元素是否都符合条件。 |
some() |
var f = arr.some(function(item,index){ return item<=5; }) |
检测数组元素中是否有元素符合指定条件。 |
修改方法 |
|
|
toString() |
var str = arr.toString(); console.log("str:",str); var num = 5; var str1 = num.toString(); |
把数组转换为字符串,并返回结果。 |
concat() |
var arr = arr1.concat(arr2,arr3); |
连接两个或更多的数组,并返回结果。 |
sort() |
arr.sort(function(a,b){ return a - b; }); |
对数组的元素进行排序。 |
join() |
var str = arr.join("+"); |
把数组的所有元素放入一个字符串。 |
reverse() |
var a = arr.reverse().push(0); |
反转数组的元素顺序。 |
函数方法 |
|
|
find() |
var obj = arr.find(function(item){ return item.age > 70; }) |
返回符合传入测试(函数)条件的数组元素。 |
findIndex() |
var index = arr.findIndex(function(item){ return item.age > 80; }) |
返回符合传入测试(函数)条件的数组元素索引。 |
forEach() |
arr.forEach(function(item,index,arr){ console.log(item,index,arr); }) |
数组每个元素都执行一次回调函数。 |
map() |
var arr1 = arr.map(function(item){ return item*2; }) |
通过指定函数处理数组的每个元素,并返回处理后的数组。 |
filter() |
var arr1 = arr.filter(function(item){ return item%2==0; }) |
检测数值元素,并返回符合条件所有元素的数组。 |
字符串常用方法
方法 |
语法 |
描述 |
主要记忆 |
|
常用 |
charAt() |
var str1 = str.charAt(4); |
返回在指定位置的字符 |
concat() |
var str = str1.concat(str2,str3); |
连接两个或多个字符串, 返回新的字符串 |
indexOf() |
var index = str.indexOf("博文"); |
返回某个指定的字符串值在 字符串中首次出现的位置 |
includes() |
var f = str.includes("精神"); |
查找字符串中是否包含指定的字符串 |
lastIndexOf() |
var index = str.lastIndexOf("精神"); |
从后向前搜索字符串 并从起始位置(0) 开始计算返回字符串最后出现的位置 |
slice() |
var str1 = str.slice(起始下标,结束下标); var str1 = str.slice(2); |
提取字符串的片段, 并在新的字符串中返回被提取的部分 |
split() |
var arr = str.split("0"); |
把字符串分割为字符串数组 |
startsWith() |
var f = str.startsWith("hollo"); |
查看字符串是否以指定的字符串开头 |
substr() |
var str1 = str.substr(起始下标,长度); var str1 = str.substr(3,4); |
从起始索引提取字符串中指定数目的字符 |
substring() |
var str1 = str.substring(起始下标,结束下标); var str1 = str.substring(3,4); |
提取字符串中两个指定索引之间的字符 |
search() |
var index = str.search("大吕"); |
方法用于检索字符串中指定的子字符串, 或检索与正则表达式相匹配的子字符串 |
replace() |
var str1 = str.replace("大吕","小吕"); |
方法用于在字符串中用一些字符替换另 一些字符,或替换一个与正则表达式匹配的子串。 |
次要记忆 |
|
不常用 |
toUpperCase() |
var str1 = str.toUpperCase(); |
把字符串转为大写 |
toLowerCase() |
var str1 = str.toLowerCase(); |
把字符串转为小写 |
trim() |
var str1 = str.trim(); |
去掉字符串两边的空白 |
fromCharCode() |
var str = String.fromCharCode(97); |
将Unicode编码转为字符 |
charCodeAt() |
var str1 = str.charCodeAt("a"); |
返回指定的位置的字符的Unicode编码 |
Math对象及其方法
算术对象(Math) Math(算术)对象的作用是:执行常见的算数运算任务。 Math 对象提供多种算术值类型和函数。无需在使用这个对象之前对它进行实例化。
算数名 |
语法 |
描述 |
Math.PI |
console.log(Math.PI); |
返回圆周率 |
Math.abs(x) |
console.log(Math.abs(-2)); |
返回绝对值 |
Math.ceil() |
console.log(Math.ceil(6.01)); |
对数进行向上取整 |
Math.floor() |
console.log(Math.floor(3.3)); |
对数进行向下取整 |
Math.max(a,b,c,d...,n) |
console.log(Math.max(99,45,3,68)); |
返回给定的数中的较大的数。 |
Math.min(a,b,c,d...,n) |
console.log(Math.min(99,45,3,68)); |
返回给定的数中的较小的数。 |
Math.pow(x,y) |
console.log(Math.pow(2,3)); |
返回 x 的 y 次幂 |
Math.random() |
console.log(Math.random()); // [0, 1) |
返回 0 到 1 之间的随机数。[0, 1); |
Math.round() |
console.log(Math.round(3.45)); |
将小数四舍五入成整数 |
Math.sqrt(x) |
console.log(Math.sqrt(9)); |
平方根 |
Date对象及其方法
对象名 |
语法 |
new Date(); |
当前日期和时间 |
new Date(milliseconds); |
通过时间戳创建(从1970年1月1日至今的毫秒数) |
new Date(dataString); |
通过字符串表示的日期创建(如“2016-09-09”) |
getTime(); |
返回1970年1月1日至今的毫秒数(时间戳) |
getFullYear(); |
从Date对象以四位数字返回年份。 |
getMonth(); |
从Date对象返回月份(0 ~ 11) |
getDate(); |
从Date对象返回一个月中的某一天(1 ~ 31) |
getDay() |
从Date对象返回一周中的某一天(0 ~ 6) |
getHours() |
返回Date对象的小时(0 ~ 23) |
getMinutes() |
返回Date对象的分 |
获取DOM的方式
获取方法 |
方法描述 |
document.getElementById(); |
返回对拥有指定 id 的第一个对象的引用。 |
document.querySelector(); |
返回文档中匹配指定的CSS选择器的第一元素 |
document.querySelectorAll(); |
HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表 |
document.getElementsByTagName(); |
返回带有指定标签名的对象集合。 |
document.getElementsByClassName(); |
返回文档中所有指定类名的元素集合,作为 NodeList 对象。 |
document.getElementsByName(); |
返回带有指定名称的对象集合。 |
设置或获取HTML内容
设置方法 |
描述 |
innerHTML: |
设置或获取位于对象起始和结束标签内的 HTML |
innerText: |
设置或获取位于对象起始和结束标签内的文本 |
outerHTML: |
设置或获取对象及其内容的HTML形式 |
outerText: |
设置(包括标签)或获取(不包括标签)对象的文本 |
value:input,select,textarea,checkbox,radio |
内容的获取和设置 |
设置或获取HTML属性
设置方法 |
描述 |
obj.hasAttribute() |
如果元素中存在指定的属性返回 true,否则返回false。 |
obj.hasAttributes() |
如果元素有任何属性返回true,否则返回false。 |
obj.setAttribute(); |
//设置属性 (属性名, 属性值1 属性值2) |
obj.getAttribute(); |
//获取属性 |
obj.removeAttribute(); |
//删除属性 |
设置或获取HTML样式
设置方法 |
描述 |
var styleAll=div.style; |
|
var styleB=div.style.border; |
替换边框 |
var styleFS=div.style["font-size"]; |
替换字体大小 |
var styleFW=div.style.fontWeight; |
替换加粗 |
element.className 返回元素属性
设置方法 |
描述 |
HTMLElementObject.className |
获取属性值: |
HTMLElementObject.className=classname |
设置属性值: |
element.classList 返回元素的类名
获取方法 |
描述 |
add |
在元素中添加一个或多个类名。如果指定的类名已存在,则不会添加 |
contains(class) |
返回布尔值,判断指定的类名是否存在可能值:true && false |
item(index) |
返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null |
remove |
移除元素中一个或多个类名.注意: 移除不存在的类名,不会报错。 |
toggle |
在元素中切换类名。 |
标签节点的操作方法
操作方法 |
描述 |
1.document.createElement()(最常用) |
通过指定名称创建一个元素 |
2.document.createTextNode() |
可创建文本节点。 |
3.element.appendChild() |
可向节点的子节点列表的末尾添加新的子节点。 |
4.父节点.insertBefore(插入的新节点,原节点) |
方法可在已有的子节点前插入一个新的子节点。 |
5.element.replaceChild(新节点,老节点) |
方法可将某个子节点替换为另一个。 |
6.element.removeChild(element) |
方法可从父节点下的子节点列表中删除某个节点。 |
7.element.remove() |
将本身移除掉 |
鼠标事件
属性 |
描述 |
onclick |
当用户点击某个对象时调用的事件句柄。 |
ondblclick |
当用户双击某个对象时调用的事件句柄。 |
onmousedown |
鼠标按钮被按下。 |
onmouseup |
鼠标按键被松开。 |
onmouseenter |
当鼠标指针移动到元素上时触发。通常与mouseleave事件一同使用 |
onmouseleave |
当鼠标指针移出元素时触发 |
onmousemove |
鼠标被移动。 |
onmouseover |
鼠标移到某元素之上。 |
onmouseout |
鼠标从某元素移开。 |
oncontextmenu |
在用户点击鼠标右键打开上下文菜单时触发 |
键盘事件
属性 |
描述 |
onkeydown |
某个键盘按键被按下 |
onkeypress |
某个键盘按键被按下并松开 |
onkeyup |
某个键盘按键被松开 |
onkeydown onkeypress onkeyup |
事件相关的事件发生次序: |
onkeydown onkeypress |
1、前者不区分输入内容的大小写 后者区分输入内容的大小写 返回keycode是不同的 2、前者识别任何按键 后者不识别功能键 3、主要使用前者 |
表单事件
属性 |
描述 |
onblur |
元素失去焦点时触发 |
onchange |
该事件在表单元素的内容改变时触发( input, select, 和 textarea) |
onfocus |
元素获取焦点时触发 |
oninput |
元素获取用户输入时触发 |
onreset |
表单重置时触发 |
onselect |
用户选取文本时触发 ( input 和 textarea) |
onsubmit |
表单提交时触发 |
Cookie查询
1.使用 JavaScript 创建Cookie
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
JavaScript 中,创建 cookie 如下所示:
document.cookie="username=John Doe";
您还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
2.使用 JavaScript 读取 Cookie
在 JavaScript 中, 可以使用以下代码来读取 cookie:
var x = document.cookie;
document.cookie 将以字符串的方式返回所有的 cookie,
类型格式: cookie1=value; cookie2=value; cookie3=value;
3.使用 JavaScript 修改 Cookie
在 JavaScript 中,修改 cookie 类似于创建 cookie,如下所示:
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
旧的 cookie 将被覆盖。
4使用 JavaScript 删除 Cookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
注意,当您删除时不必指定 cookie 的值。
本地存储
if(localStorage.arr0806){
/* 数据存储 */
var arr = JSON.parse(localStorage.arr0806);
}else{
var arr = [];
localStorage.arr0806 = JSON.stringify([]);
}
localStorage.arr0806 = JSON.stringify(arr);
数据类型为false的几种情况
1."" 字符串为空返回 false 否则为true
2.0 数字中0返回 false 其他返回true
3.undefined 未定义 返回 false
4.null 空值 返回 false
5.false 本身返回false
6.NaN 非数字 返回false
三目运算符
条件表达式?条件成立时:条件不成立时;
本地存储固定格式
判断本地是否有数据
if(localStorage.arr0806){
/* 数据存储 */
var arr = JSON.parse(localStorage.arr0806);
}else{
var arr = [];
/*JSON.parse()方法将JSON格式字符串转换为js对象(属性名没有双引号)。*/
localStorage.arr0806 = JSON.stringify([]);
}
只要进行添加 删除 等数据改动 (就需要本地存储)
/*JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串,如果指定了一个 replacer 函数,则可以选择性地替换值,或者指定的 replacer 是数组,则可选择性地仅包含数组指定的属性。*/
localStorage.arr0806 = JSON.stringify(arr);