张登友，张登友的博客，张登友的网站——
JavaScript中的对象和方法
| 内置对象 | 对象说明 |
|---|---|
| Arguments | 函数参数集合 |
| Array | 数组 |
| Boolean | 布尔对象 |
| Math | 数学对象 |
| Date | 日期时间 |
| Error | 异常对象 |
| Function | 函数构造器 |
| Number | 数值对象 |
| Object | 基础对象 |
| RegExp | 正则表达式对象 |
| String | 字符串对象 |
String的方法
String 对象（字符串对象）的所有方法
变量名统一以a为例
此处定义一个a，let a = ‘acdefghijk’
| 方法名 | 解释 | 表达式 | 示例 |
|---|---|---|---|
| indexOf()/lastIndexOf() | 获取字符串中指定内容的索引（第二个参数可不填） | 索引值 = str.indexOf(想查询的字符串, 起始位置); | a.indexOf(‘c’,1) |
| search() | 获取字符串中指定内容的索引(参数一般为正则) | 索引值 = str.search(正则表达式) | a.search(/est/i) |
| includes() | 是否包含指定的内容 | 布尔值 = str.includes(想要查找的字符串, 起始位置) | a.includes(‘j’) a.includes(‘j’,2) |
| startsWith() | 是否以指定的内容开头 | 布尔值 = str.startsWith(想要查找的内容, 起始位置) | a.startsWith(‘z’) |
| endsWith() | 是否以指定的内容结尾 | 布尔值 = str.endsWith(想要查找的内容, 检索的结束位置) | a.endsWith(‘a’) |
| charAt(index) | 获取指定位置的字符 | 字符 = str.charAt(index) | a.charAt(2) |
| str[index] | 获取指定位置的字符 | 字符 = str.[index] | a[1] |
| charCodeAt(index) | 返回字符串指定位置的字符的 Unicode 编码 | 字符 = str.charCodeAt(index) | a.charCodeAt(2) |
| slice() | 字符串截取(2, 5) 截取时，包左不包右。 (2) 表示从指定的索引位置开始，截取到最后。 (-2) 表示从倒数第三个开始，截取到最后。 (1, -2) 表示从第一个截取到倒数第一个。 (5, 2) 表示前面的大，后面的小，返回值为空。 |
新字符串 = str.slice(开始索引, 结束索引) | a.slice(2,5) a.slice(2) a.slice(-2) a.slice(1,-2) |
| substring() | 从字符串中截取指定的内容 传递负值默认使用 0 第二个参数小于第一个，则自动交换 |
新字符串 = str.substring(开始索引, 结束索引) | a.substring(-4,2) |
| substr() | 从字符串中截取指定的内容。不会修改原字符串(2,4) 从索引值为 2 的字符开始，截取 4 个字符。 (2) 从指定位置开始，截取到最后。 (-2) 从倒数第几个开始，截取到最后。 |
字符串 = str.substr(开始索引, 截取的长度) | a.substr(2,4) a.substr(2) a.substr(-2) |
| concat() | 连接字符串 | 新字符串 = str1.concat(str2) | let c=a.concat(‘b’) |
| split() | 通过指定的分隔符，将一个字符串拆分成数组 | 新的数组 = str.split(分隔符) | let e=a.split(‘’) let e=a.split() |
| replace() | 将字符串中的指定内容，替换为新的内容并返回（可使用正则） | 新的字符串 = str.replace(被替换的子串，新的子串) | let g=a.replace(‘y’,’e’) |
| repeat() | 将字符串重复指定的次数 | newStr = str.repeat(重复的次数) | a.repeat(2) |
| trim() | 去除字符串前后的空白 | 字符串 = str.trim() | a.trim() |
| toLowerCase() | 小写转换 | str.toLowerCase() | let q = a.toLowerCase() |
| toUpwerCase() | 大写转换 | str.toUpwerCase() | let q = a.toUpperCase() |
Number的方法
| 方法名 | 解释 | 表达式 | 示例 |
|---|---|---|---|
| isInteger() | 判断是否为整数 | 布尔值 = Number.isInteger(数字) | let b=Number.isInteger(a) |
| toFixed() | 小数点后面保留多少位 | 字符串 = myNum.toFixed(num) | let c = a.toFixed(2) |
Math的方法
| 方法名 | 解释 | 表达式 | 示例 |
|---|---|---|---|
| Math.PI | 圆周率 | 变量名 = Math.PI | let a=Math.PI |
| Math.abs() | 返回绝对值 | Math.abs(取绝对值的数或值) | let b = Math.abs(a) |
| Math.random() | 生成0-1之间的随机浮点数 | 变量名 = Math。random() | let b = Math.random() |
| Math.floor() | 向下取整（往小取值） | Math.floor(取整的数或值) | let b = Math.floor(a) |
| Math.ceil() | 向上取整（往大取值） | Math.ceil(取整的数或值) | let d = Math.ceil(a) |
| Math.round() | 四舍五入取整（正数四舍五入，负数五舍六入） | Math.round(取整的数或值) | let e = Math.round(a) |
| Math.max(x, y, z) | 返回多个数中的最大值 | Math.max(值, 值, 值) | let g = Math.max(b,c,d) |
| Math.min(x, y, z) | 返回多个数中的最小值 | Math.min(值, 值, 值) | let g = Math.min(b,c,d) |
| Math.pow(x,y) | 乘方：返回 x 的 y 次幂 | Math.pow(值,幂) | let h = Math.pow(a,2) |
| Math.sqrt() | 开方：对一个数进行开方运算 | Math.sqrt(值) | let j = Math.sqrt(h) |
Date的方法
Date 对象是一个构造函数 ，需要先实例化后才能使用
- 写法一：如果Date()不写参数，就返回当前时间对象
- 写法二：如果Date()里面写参数，就返回括号里输入的时间对象
Moment.js 是一个轻量级的JavaScript时间库
此处以let date = new Date(); 为例
| 方法名 | 解释 | 表达式 | 示例 |
|---|---|---|---|
| getFullYear() | 获取年份 | 日期.getFullYear() | let year=date.getFullYear() |
| getMonth() | 获取月： 0-11 | 日期.getMonth() | let month = date.getMonth() |
| getDate() | 获取日：1-31 | 日期.getDate() | let date2=date.getDate() |
| getDay() | 获取星期：0-6 | 日期.getDay() | let day = date.getDay() |
| getHours() | 获取小时：0-23 | 日期.getHours() | let hour=date.getHours() |
| getMinutes() | 获取分钟：0-59 | 日期.getMinutes() | let minutes=date.getMinutes() |
| getSeconds() | 获取秒：0-59 | 日期.getSeconds() | let seconds=date.getSeconds() |
| getMilliseconds() | 获取毫秒：1s = 1000ms | 日期.getMilliseconds() | let milliseconds=date.getMilliseconds() |
| getTime() | 获取时间戳 | 日期.getTime() | const mydate = +new Date() const mydate=new Date().getTime() |
| Date.now() | 获取当前时间的时间戳 | Date.now() | const time=Date.now() |
数组的方法
含有部分字符串的方法
| 方法名 | 解释 | 表达式 | 示例 |
|---|---|---|---|
| Array.isArray() | 判断是否为数组 | Array.isArray(数组) | Array.isArray(arr) |
| toString() | 将数组转换为字符串 | 数组.toString() | arr.toString() |
| Array.from() | 将伪数组转化为真数组 | Array.from(伪数组) | Array.from(arr) |
| Array.of() | 创建数组：将一系列值转换成数组 | Array.of(值,值,值) | Array.of(1,2,3) |
| push() | 向数组的最后面插入一个或多个元素（会改变原数组） | 数组.push(值,值) | arr.push(2,3) |
| pop() | 删除数组中的最后一个元素 | 数组.pop() | arr.pop() |
| unshift() | 在最前面插入一个或多个元素 | 数组.unshift(值,值) | arr.unshift(1,2) |
| shift() | 删除数组中的第一个元素 | 数组.shift() | arr.shift() |
| slice() | 提取指定的一个或多个元素 | 数组.slice(起始位置,截止位置) | arr.slice(2,5) |
| splice() | 删除指定的一个或多个元素 | 数组.splice(起始位置,截止位置) | arr.splice(1,2) |
| fill() | 用固定的值填充数组 | 数组.fill(填充值,开始位置，结束位置) | arr.fill(2,4,5) |
| concat() | 连接两个或多个数组 | 数组.concat(连接的数组) | arr.concat(e) |
| join() | 将数组转换为字符串 | 数组.join() | arr.join() |
| split() | 按照指定的分隔符组装为数组（字符串的方法） | 数组.split(‘分隔符’) | arr.split(‘,’) |
| reverse() | 反转数组 | 数组.reverse() | arr.reverse() |
| sort() | 按照Unicode 编码，从小到大进行排序 | 数组.sort() | arr.sort() |
| indexOf(value) | 从前往后检索数组中是否有指定元素 | 数组.indexOf(查找的值) | arr.indexOf(8) |
| lastIndexOf(value) | 从后往前检索数组中是否有指定元素 | 数组.lastIndexOf(查找的值) | arr.lastIndexOf(8) |
| includes(item) | 数组中是否包含指定的内容 | 数组.includes(值) | arr.includes(8) |
| find() | 找出第一个满足「指定条件返回 true」的元素 | 数组.find(条件为true) | arr.find((item,index)=>{return item>20}) |
| findIndex() | 找出第一个满足「指定条件返回 true」的元素的 index | 数组.findIndex(条件为true) | arr.findIndex((item,index)=>{return item>20}) |
| every() | 全真才为真。每一项都返回 true结果才返回 true | 数组.every(回调函数) | arr.every((ele,idnex,array)=>{ if (ele.length>2){ return false} return true }) |
| some() | 一真即真。只要有一项就返回 true | 数组.every(判断条件) | arr.some((ele,idnex,array)=>{ if (ele.length>9){ return false;} return true }) |
| valueOf() | 直接写数组对象的名字 | 数组本身 = 数组.valueOf() | arr.valueOf() |
| for 循环 | |||
| forEach() | 数组中有几个元素，该回调函数就会执行几次 | 数组.forEach((遍历的元素,元素的索引,遍历的数组)=>{}) | arr.forEach((item,index,arr)=>{console.log(item);console.log(index)}) |
| map() | 对数组中每一项运行回调函数，返回该函数的结果 | 数组.map(回调函数) | arr.map((item,index,arr)=>{return item+10}) |
| filter() | 过滤数组：返回结果是 true 的项 | 数组.filter(回调函数) | let ss=arr.filter((item)=>{ if (item>4){ return true } return false }); arr.filter((item) => item > 4) |
| reduce() | 接收一个函数作为累加器，返回值是回调函数累计处理的结果 | 数组.reduce(function (上一次调用回调函数时的返回值, 正在处理的数组元素, 正在处理的数组元素下标, 调用方法的数组) {}, 可选的初始值); | arr.reduce((prev,item)=>{ console.log(prev); console.log(item); return 88 }) |
| for of | 遍历数组 | for (let value of 数组名) { console.log(value);} | for (let value of arr1) { console.log(value)} |
函数的方法
| 方法名 | 解释 | 表达式 | 示例 |
|---|---|---|---|
| call() | 调用一个函数，还可以改变这个函数内部的 this 指向 | fn.call(想要将this指向哪里, 函数实参1, 函数实参2) | fun.call(obj,2,5) |
| apply() | 可以调用一个函数，还可以改变这个函数内部的 this 指向(实参，必须是数组) | fn.apply(想要将this指向哪里, [函数实参1, 函数实参2]) | fn.apply(obj, [‘hello’]) |
| bind() | 不会调用函数，但是可以改变函数内部的 this 指向 | 新函数 = fn.bind(想要将this指向哪里, 函数实参1, 函数实参2) | |
| instanceof | 检查一个对象是否为一个类的实例 | 对象 instanceof 构造函数 | Person1 instanceof Person |
对象的方法
| 方法名 | 解释 | 表达式 | 示例 |
|---|---|---|---|
| in | 可以检查一个对象中是否含有指定的属性 | ‘属性名’ in 对象 | ‘name’ in obj |
| for in | 遍历对象的属性(有几个属性执行几次。每次执行会将对象中的每个属性的 属性名 赋值给变量) | for (const 变量 in 对象) {} | for (const key in json) {console.log(key); |
| Object.assgin() | 浅拷贝 | Object.assign(目标对象, 源对象1, 源对象2…) | const obj2 = Object.assign({}, obj) |
| Object.freeze() | 冻结对象 | Object.freeze(对象) | Object.freeze(params) |
事件
| 事件名 | 解释 |
|---|---|
| onclick | 鼠标单机 |
| ondblclick | 鼠标双击 |
| onkeyup | 按下并释放键盘上的一个键时触发 |
| onchange | 文本内容或下拉菜单中的选项发生改变 |
| onfocus | 获得焦点 |
| onblur | 失去焦点 |
| onmouseover | 鼠标悬停 |
| onmouseout | 鼠标移出 |
| onload | 网页文档加载事件 |
| onunload | 关闭网页时 |
| onsubmit | 表单提交事件 |
| onreset | 重置表单时 |
DOM节点的相对关系
| 属性 | 解释 | 表达式 |
|---|---|---|
| parentNode | 获取父节点 | 节点.parentNode |
| nextSibling/nextElementSibling | 获取下一个兄弟节点 | 下一个兄弟节点 = 节点.nextElementSibling ||节点.nextSibling |
| previousSibling/previousElementSibling | 获取前一个节点 | 前一个兄弟节点 = 节点.previousElementSibling ||节点.previousSibling |
| firstChild/firstElementChild | 第一个子节点 | 第一个子元素节点 = 节点.firstElementChild ||节点.firstChild |
| lastChild/lastElementChild | 最后一个子节点 | 第一个子元素节点 = 节点.firstElementChild ||节点.firstChild |
| childNodes (标准属性) | 获取所有的子节点 | 子节点数组 = 父节点.childNodes |
| children (用的最多) | 获取所有子节点 | 子节点数组 = 父节点.children |
DOM操作
| 方法 | 解释 | 表达式 |
|---|---|---|
| document.createElement(“”) | 创建标签 | 新的标签(元素节点) = document.createElement(“标签名”); |
| appendChild() | 在父元素最后插入新节点 | 父节点.appendChild(新的子节点); |
| insertBefore() | 插入节点 | 父节点.insertBefore(新的子节点,作为参考的子节点) |
| removeChild() | 删除节点 | 父节点.removeChild(子节点); |
| cloneNode() | 复制节点 无参数或false：只复制节点本身 带参数true复制本身及其所有的子节点 |
要复制的节点.cloneNode() |
| 获取节点名属性值/设置节点的属性值 直接操作标签 |
元素节点.属性名 元素节点[属性名] 元素节点.属性名=”新的值” 元素节点[属性名]=”新的值” |
|
| getAttribute() | 获取节点名属性值/设置节点的属性值 把标签作为DOM节点 |
元素节点.getAttribute(“属性名称”); 元素节点.setAttribute(“属性名”, “新的属性值”); |
| removeAttribute() | 删除节点属性 | 元素节点.removeAttribute(属性名); |
| style | 读取元素的样式 | 元素.style.样式名 元素.style[“属性”] |
| 设置元素的样式 常用的样式 backgroundColor backgroundImage color width height border opacity |
元素.style.样式名 = 样式值 |
JS动画offset/scroll/client
| 方法 | 解释 | 表达式 |
|---|---|---|
| offsetWidth | 获取元素的宽 + padding + border | div1.offsetWeight |
| offsetHight | 获取元素的高 + padding + border | div1.offsetHeight |
| offsetLeft | 当前元素相对于其定位父元素的水平偏移量 | box2.offsetLeft |
| offsetTop | 当前元素相对于其定位父元素的垂直偏移量 | box2.offsetTop |
| offsetParent | 获取当前元素的定位父元素 | box3.offsetParent |
| ScrollWidth | 获取元素整个滚动区域的宽(width 和 padding) | div.scrollWidth |
| scrollHeight | 获取元素整个滚动区域的高 | div.scrollHeight |
| scrollTop | 获取水平滚动条滚动的距离(兼容写法) | window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop |
| scrollLeft | 获取垂直滚动条滚动的距离(兼容写法) | window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft |
| clientWidth | 获取元素的可见宽度（width + padding） | document.documentElement.clientWidth document.body.clientWidth window.innerWidth |
| clientHeight | 获取元素的可见高度（height + padding） | document.documentElement.clientHeight document.body.clientHeight window.innerHeight |
| clientX | 鼠标距离可视区域左侧距离 | |
| clientY | 鼠标距离可视区域上侧距离 | |
| clientTop | 盒子的上border | |
| clientLeft | 盒子的左border |
event的属性
| 属性 | 解释 |
|---|---|
| timeStamp | 返回时间生成的日期和事件 |
| bubbles | 返回布尔值,指示时间是否是起泡事件类型 |
| button | 返回当事件被触发是,哪个鼠标按钮被点击 |
| pageX | 光标相对于该网页的水平位置 |
| pageY | 光标相对于改网页的水平位置 |
| clientX | 光标相对于该网页的水平位置(当前可视区域) |
| clientY | 光标相对于该网页的垂直位置(当前可视区域) |
| target | 该事件被传送的对象 |
| type | 事件的类型 |
| screenX | 光标相对于显示器的水平位置 |
| screenY | 光标相对于显示器的垂直位置 |
鼠标事件
| 事件名 | 解释 |
|---|---|
| onmousedown | 当鼠标在被拖拽元素上按下时，开始拖拽 |
| onmousemove | 当鼠标移动时被拖拽元素跟随鼠标移动 |
| onmouseup | 当鼠标松开时，被拖拽元素固定在当前位置 |
| onmousewheel | 鼠标滚轮滚动的事件，会在滚轮滚动时触发(火狐不支持) |
| DOMMouseScroll | 鼠标滚轮滚动的事件(火狐用)需通过addEventListener()函数来绑定 |
| onkeydown | 按键被按下 |
| onkeyup | 按键被松开 |
BOM对象
| 对象名 | 解释 |
|---|---|
| Window | 代表整个浏览器的窗口，同时 window 也是网页中的全局对象 |
| Navigator | 代表当前浏览器的信息，可以识别不同的浏览器 |
| Location | 代表当前浏览器的地址栏信息，可获取地址栏信息，或操作浏览器跳转页面 |
| History | 代表浏览器的历史记录，由于隐私原因只能操作浏览器向前或向后翻页且只在当次访问时有效 |
| Screen | 代表用户的屏幕信息，可以获取用户的显示器的相关信息 |
BOM对象的属性
| 属性名 | 解释 |
|---|---|
| history.length | 获取浏览器历史列表中的 url 数量 |
| history.back() | 回退到上一个页面 |
| history.forward() | 跳转下一个页面 |
| history.go() | |
| location.href | 获取当前页面的 url 路径（或者设置 url 路径） |
| location.assign() | 跳转到其他的页面 |
| location.reload() | 重新加载当前页面 |
| location.replace() | 使用一个新的页面替换当前页面，调用完毕也会跳转页面 |
定时器的方法
| 方法名 | 解释 |
|---|---|
| setInterval() | 循环调用。将一段代码，每隔一段时间执行一次。（循环执行） |
| setTimeout() | 延时调用。将一段代码，等待一段时间之后再执行。（只执行一次） |
| clearInterval(timer) | 清除定时器 |
jQuery选择器
| 符号 | 说明 | 用法 |
|---|---|---|
| $(‘#div’) | 选择id为div的第一个元素 | $(‘demo’).css(‘backgroung’,’red’) |
| $(‘.div’) | 选择所有类名为div的元素 | $(‘.div’).css(‘background’,’red’) |
| $(‘div’) | 选择所有标签名为div的元素 | $(‘div’).css(‘background’,’red’) |
| $(‘*’) | 选择所有元素 | $(‘*’).css(‘background’,’red’) |
| $(‘.div,div’) | 选择类名为.div和div标签的元素 | $(‘.div, div’).css(‘background’,’red’) |
| 空格 | 后代选择器(所有后代元素) | $(‘div p’).css(‘background’,’red’) |
| > | 子代选择器(所有子代元素) | $(‘div>p’).css(‘background’,’red’) |
| + | 紧邻选择器(选择紧挨着的下一个元素) | $(‘div+p’).css(‘background’,’red’) |
| ~ | 兄弟选择器 | $(‘div~p’).css(‘background’,’red’) |
jQuery基本选择过滤器
| 符号 | 说明 | 用法 |
|---|---|---|
| :eq(index) | 选择序号为index的第一个元素 | $(‘li:eq(1)’).css(‘background’,’red’) |
| :gt(index) | 选择序号大于index的一个元素 | $(‘li:gt(2)’).css(‘background’,’red’) |
| :lt(index) | 选择序号小于index的一个元素 | $(‘li:lt(2)’).css(‘background’,’red’) |
| :odd | 选择所有序号为奇数的行元素 | $(‘li:odd’).css(‘background’,’red’) |
| :even | 选择所有序号为偶数的行元素 | $(‘li:even’).css(‘background’,’red’) |
| :first | 选择匹配的第一个元素 | $(‘li:first’).css(‘background’,’red’) |
| :last | 选择匹配的最后一个元素 | $(‘li:last’).css(‘background’,’red’) |
jQuery属性选择器
| 符号 | 说明 | 用法 |
|---|---|---|
| $(‘a[href]’) | 选择所有包含href属性的元素 | $(‘a:[href]’).css(‘background’,’red’) |
| $(‘a[href=”demo”]’) | 选择href属性为demo的所有a标签 | $(‘a:[href=”demo”]’).css(‘background’,’red’) |
| $(‘a[href!=”demo”]’) | 选择href属性不等于demo的所有元素(包括没有href的元素) | $(‘a[href!=”demo”]’).css(‘background’,’red’) |
| $(‘a[href^=”demo”]’) | 选择所有以demo开头的元素 | $(‘a[href^=”demo”]’).css(‘background’,’red’) |
| $(‘a[href$=”demo”]’) | 选择所有以demo结尾的元素 | $(‘a[href$=”demo”]’).css(‘background’,’red’) |
| $(‘a[href*=”demo”]’) | 选择所有包含demo字符的元素 | $(‘a[href*=”demo”]’).css(‘background’,’red’) |
| $(‘a[href][title=”demo”]’) | 选择所有符合指定属性规则的元素 | $(‘a:[href][title=”demo”]’).css(‘background’,’red’) |
jQuery筛选选择器
| 符号 | 说明 | 用法 |
|---|---|---|
| find(selector) | 查找指定元素的所有后代元素 | $(‘div’).find(‘li’).css(‘background’,’red’) |
| children() | 查找指定元素的直接子元素 | $(‘div’).children(‘li’).css(‘background’,’red’) |
| sibling | 查找所有的兄弟元素 | $(‘div’).sibling(‘li’).css(‘background’,’red’) |
| parent() | 查找父元素 | $(‘div’).parent(‘li’).css(‘background’,’red’) |
| eq(index) | 查找索引值为index的元素 | $(‘div’).eq(2).css(‘background’,’red’) |
