数组常用的方法
| 方法 | 语法 | 描述 |
|---|
| 增加方法 | | |
| 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);
扫一扫
2218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
