Bootstrap

js中常用方法整理

数据类型

typeOf()Number()parseInt()parseFloat()- * / %
检测数据类型转换为数字转换为整数类型转换为浮点类型非加法的数字运算
toString()+Boolean()String()
转换为字符串,不能转换undefined/null字符串拼接转换为布尔类型转换为字符串、所有内容都能转换

类型转换

typeof()isNaN()Number.isNaNObject.is()
检测数据类型检测是否为非数组检测是否为NaN判断两个值是否相等

数组

push()pop()unshift()shift()reverse()
像数组后面追加数据删除数组最后一个数据像数组前面追加一个数据删除数组第一个数据对数据进行翻转
sort()splice()concat()join()slice()
对数组进行排列截取数组的内容,并且可以在截取的位置放数据向数组添加数据,或者拼接数组使用连接符,将数组的数据连成字符串截取数组,但是不改变原数组
indexOf()lastIndexOf()forEachmapfilter
从前往后检索第一次出现内容的索引,无返回-1从后往前检索第一次出现内容的索引,无返回-1对数组进行遍历,不返回数据对数组进行加工,返回加工完的数组对数据进行过滤,返回过滤完的数据
findfindIndexeverysomereduce
在数据中内查找满足条件的第一项在数组中内查找满足第一项的索引判断数组中时候每一个都符合条件,符合返回true,反之判断数组中有一个满足条件就返回true对数组进行叠加

数字常用方法

random()round()ceil()floorabspowsqrtmax
生出随机数四舍五入向上取整向下取整绝对值幂运算平方根最大值
minPI
最小值圆周率

字符串常用方法

charAt()charCodeAt()toUpperCase()toLowerCase()substr()substring()
返回该索引位置的字符返回该索引位置的字符编码转换为大写转换为小写分割字符串分割字符串
slice()split()concat()indexOf()lastIndexOf()includes()
分割字符串按照分隔符分开转为数组对字符串进行拼接返回字符串第一个出现的下标返回字符串最后一个出现第一个的下标判断里面包含这个数据返回布尔值
startsWith()endsWith()trim()trimStart/trimLefttrimEnd/trimRightreplace
验证字符串是否以数据开头的验证字符串是否以数据结尾取出字符串左右两边的空格去除左面的的空格去除右面的的空格替换

时间对象

getFullYear()getMonth()getDate()getHours()getMinutesgetSecondsgetMillseconds
获取年份获取月份获取日获取小时获取分钟获取秒获取毫秒
getDaygetTime()setFullYearsetMounthsetDatesetHourssetMinutes
获取星期获取时间戳设置年份设置月份设置日设置小时设置分钟
setSecondssetMillisecondssetDaysetTime()
设置秒设置毫秒设置日期设置时间戳

BOM

window.alert('')window.prompt()window.confim()window.onload = function(){}
提示框输入框询问框当页面加载完之后调用
window.resize=function{}winodw.scroll = function(){}window.location.hrefwindow.location.reload()
当页面可视化窗口改变当滚轮滑动的时候获取网址或者跳转对页面进行重新加载
window.open('')winodw.close()document.documentElment.scrollTopdocument.body.scrollTop
打开一个新的页面关闭此页面浏览器卷出去的高度浏览器卷出去的宽度
window.history.back()window.history.forward()window.history.go(参数)window.scrollTo(x,y)
浏览器回退浏览器前进浏览器跳转浏览器滚动到
window.scrollTo({top,left,behavior})
浏览器滚动到:behavior怎么滑动

storage存储和cookie

localStorage存储sessionStorage存储cookie存储(过期时间必须调整8小时)
window.localStorage.setItem(key,value)window.sessionStorage.setItem(key)document.cookie = 'key=value;expire:'
window.localStorage.removeItem(key)window.sessionStorage.remove(key)
清除window.localStorage.clear()window.sessionStorage.clear()
window.localStorage.getItem(key)window.sessionStorage.getItem(key)console.log(document.cookie)

       

DOM

document.documentElementdocument.bodydocument.headdocument.getElementById()
获取html获取body获取head根据id来获取元素
document.getElementsByClassName()

document.getElements

ByTagClassName

document.querySelector('')document.querySelectorAll('')
根据类名返回一个伪数组根据标签返回一个伪数组根据选择器获取第一个元素根据选择器获取所有的元素
ele.id = 'asd'ele.setAttribute('aa','bb')ele.removeAttribute('aa')ele.getAttribute('aa')
原生属性直接使用属性名操作设置自定义属性删除自定义属性查询自定义属性
ele.dataset.aaa = 'zzzz'ele.dataset.aaadelete ele.dataset.aaaele.className
设置H5自定义属性

获取H5自定义属性

删除H5自定义属性获取元素的类名
ele.classListele.classList.add('类名')ele.classList.remove('类名')ele.classList.toggle('类名')
获取元素的所有类名返回数组添加类名删除类名切换,如果原来有那么删除,没有的话就添加
ele.innerHTMLele.innerTextele.valueele.offsetWidth
在元素上写,可以写超文本在元素上写,不能识别超文本用来操作表单,获取值获取元素的宽度包括border
ele.offsetHeightele.clientWidthele.clientHeightele.offsetTop
获取元素的高度包括border获取元素宽度不包括boder获取元素宽度不包括boder获取元素垂直父级距离
ele.offsetLeftele.offsetTopele.clientLeftele.clientTop
获取元素水平父级距离获取boder获取左boder的宽度获取上boder的宽度

        

BOM节点

元素.chlidNodes元素.children元素.firstChild()元素.lastChild()
获取元素的所有子一级节点获取元素的所有子一级元素节点获取元素的的第一个节点获取元素的最后一个节点
元素.firstElementChild()元素.lastElementChild()元素.previousSibling()元素.previousElementSibling
获取元素的第一个元素节点获取元素的最后一个元素节点获取元素上一个兄弟节点获取元素上一个兄弟元素节点
元素.nextSibling()元素.nextElementSibling()元素.parentNode元素.parentElement
获取元素下一个兄弟节点获取元素下一个兄弟元素节点获取元素的父节点获取元素的父节点
元素.attributesdocument.createElement('li')document.createTextNode('文本内容')元素.appendChild(节点)
获取该节点的所有属性创建节点创建文本节点像元素插入节点
元素.insertBefore(节点,谁的前面)元素.removeChild(子节点)元素.remove()元素.replaceChild(换上,换下)
像元素前面插入节点删除父元素中的子节点删除该元素使用换上节点替换点换下节点
元素.cloneNode()元素.nodeType()元素.nodeName()元素.nodeValue()
把元素克隆一个一模一样的元素属性获取节点的名称获取节点中的内容

获取浏览器的可视窗口大小

BOM层次获取Widthwindow.innerWidth(包括滚动条)
BOM层次获取Heightwindow.innerHeight(包括滚动条)
DOM层次获取Widthdocument.documentElement.clientWidth
DOM层次获取Heightdocument.documentElement.clientHeight

;