js常用方法函数_javascript速查表

更新日期: 2018-11-03阅读: 4k标签: 函数

数组

concat()	连接两个或更多的数组,并返回结果。
join()	    把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	    删除并返回数组的最后一个元素
push()	    向数组的末尾添加一个或更多元素,并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	    删除并返回数组的第一个元素
slice()	    从某个已有的数组返回选定的元素     
sort()	    对数组的元素进行排序
splice()	删除元素,并向数组添加新元素。
toString()	把数组转换为字符串,并返回结果。
unshift()	向数组的开头添加一个或更多元素,并返回新的长度。
valueOf()	返回数组对象的原始值


String 对象方法  

concat()	连接字符串。。
indexOf()	检索字符串。
lastIndexOf()	从后向前搜索字符串。
slice()	    提取字符串的片断,并在新的字符串中返回被提取的部分。
split()	    把字符串分割为字符串数组。
toString()	返回字符串。
valueOf()	返回某个字符串对象的原始值。
length	    字符串的长度


History  

back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	加载 history 列表中的某个具体页面。
Location
hash	设置或返回从井号 (#) 开始的 URL(锚)。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
search	设置或返回从问号 (?) 开始的 URL(查询部分)。
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	用新的文档替换当前文档。


Document  

document.cookie	设置或返回与当前文档有关的所有 cookie。
document.referrer	返回载入当前文档的文档的 URL。
document.title	返回当前文档的标题。
document.links  返回文档中所有的Area和Link对象引用
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.querySelector()  css 选择器 语法jquery一样


document.body 网页宽、高、偏移属性

网页可见区域宽: document.body.clientWidth  
网页可见区域高: document.body.clientHeight  
网页可见区域宽: document.body.offsetWidth  (包括边线的宽)  
网页可见区域高: document.body.offsetHeight (包括边线的高)  
网页正文全文宽: document.body.scrollWidth  (不包括边线的宽) 
网页正文全文高: document.body.scrollHeight (不包括边线的高)  
网页被卷去的高: document.body.scrollTop  
网页被卷去的左: document.body.scrollLeft


操作文档对象  

document.createElement('div') 创建并返回一个元素
document.createTextNode('title') 创建并返回一个文本节点
document.createAttribute('title')创建并返回一个属性节点
document.createComment('comment') 创建并返回一个注释节点
document.createDocumentFragment() 创建并返回一个文档片段
document.getElementById('idName') 返回指定id的元素
document.querySelector('#id .className') 返回文档中匹配指定的css选择器的第一元素
document.querySelectorAll() 返回文档中匹配的css选择器的所有元素节点列表
document.getElementsByClassName('className') 返回指定className的NodeList集合
document.images 返回文档中所有Image对象引用


Element  

element.getElementsByTagName() 获取元素内的所有指定标签的子元素
element.insertBefore()	   在指定的已有的子节点之前插入新节点。
element.appendChild()	   向元素添加新的子节点,作为最后一个子节点。
element.getAttribute()	   返回元素节点的指定属性值。
element.getAttributeNode() 返回指定的属性节点。
element.setAttribute()    设置元素节点指定属性与值
element.removeChild()     从元素中移除子节点
element.replaceChild(newnode,oldnode) 用一个新元素替换列表中的某个元素   
element.removeAttribute() 从元素中移除指定属性
element.removeAttributeNode() 移除指定属性节点,并返回被移除的节点
element.hasAttribute()	   判断元素是否拥有指定属性
element.hasAttributes()   判断元素是否拥有属性
element.hasChildNodes()   判断元素是否拥有子元素
element.isEqualNode(node)   判断两个元素是否相等
element.normalize()  移除空的文本节点,并连接相邻的文本节点
element.childNodes.item(0) 返回NodeList中位于指定下标的节点
element.cloneNode(deep) 克隆节点,deep默认为false,为false克隆节点,为true克隆节点及后代
element.compareDocumentPosition() 比较两个元素的文档位置,1:没有关系,两个节点不属于同一文档。2:第一节点位于第二节点后。4:第一节点定位在第二节点前。8:第一节点位于第二节点内。16:第二节点位于第一节点内。32:没有关系,或是两个节点是同一元素的两个属性,返回值可以是值的组合,例如,返回20意味着第二节点在第一节点内部(16),并且第二节点在第一节点之后(4)


element 属性  

element.id	       设置或返回元素的 id。
element.tagName     获取元素的标签名(大写)
element.className	元素所有的 class 逗号分隔。
element.classList 	元素所有的 class 数组形式。
element.style       设置或返回元素的style属性
element.innerText   设置或返回元素的内容
element.innerhtml	设置或返回元素的HTML内容。
element.textContent 设置或返回节点及其后代的文本内容
element.nodeName    获取元素的名称
element.nodeValue   设置或返回元素值
element.nodeType    获取节点类型(共12中类型 1:Element,2:Attr,3:Text,8:注释,9:根节点,11:DocumentFragment)
element.attributes	返回元素属性的 NamedNodeMap。
element.parentNode  返回元素父节点
element.childNodes  获取元素直接后代的HTML元素和TextNode对象的集合
element.firstChild	获取元素首个子元素
element.lastChild	获取元素最后一个子元素
element.previousSibling 获取上一个同级节点
element.nextSibling 获取下一个同级节点
element.accessKey   设置或返回元素的快捷键
element.title       设置或返回元素的title  
element.isContentEditable  返回元素是否可编辑
element.ownerDocument 返回根元素document
element.childNodes.length 返回NodeList中节点数
element.offsetXX 节点宽、高、偏移(包括滚动条、边框)
element.offsetWidth	 元素的宽度(包括padding、border、width)
element.offsetHeight 元素的高度(包括padding、border、width)
element.offsetLeft	 元素的左偏移位置
element.offsetTop	 元素的上偏移位置
element.offsetParent 元素的偏移容器
elment.scrollXX 节点宽、高、卷边(padding加元素内容的宽高)
element.scrollHeight 元素的完整高度(padding+内容高,不含边框)
element.scrollWidth	 元素的整体宽度(padding+内容宽,不含边框)
element.scrollLeft	 元素左边卷去的距离
element.scrollTop	 元素上边卷去的距离
element.clientXX 节点宽、高、边框(padding加元素内容的宽高)
element.clientHeight 元素的高度(padding+内容高,不含边框)
element.clientWidth  元素的宽度(padding+内容宽,不含边框)
element.clientLeft   元素的左边框宽度
element.clientTop    元素的上边框宽度


获取网页屏幕宽高

网页正文部分上: window.screenTop  
网页正文部分左: window.screenLeft  
屏幕分辨率的高: window.screen.height  
屏幕分辨率的宽: window.screen.width  
屏幕可用工作区高度: window.screen.availHeight  
屏幕可用工作区宽度: window.screen.availWidth
屏幕可视区域的宽度:window.innerWidth (包括边框、边距、滚动条,不包括工具条)
屏幕可视区域的高度:window.innerHeight(包括边框、边距、滚动条,不包括工具条)
屏幕可视区域的宽度:window.outerWidth (包括边框、边距、滚动条、工具条)
屏幕可视区域的高度:window.outerHeight (包括边框、边距、滚动条、工具条)


事件  

element.addEventListener(event,handler,useCapture)  向文档添加事件句柄,useCapture为true为捕获型事件,为false为冒泡型事件,默认为false,捕获型事件从外向内冒泡且无法停止,冒泡型事件从内向外冒泡,使用`stopPropagation()`停止冒泡
element.removeEventListener(event,handler,userCapture) 移除由addEventListener添加的事件,参数必须与添加时一致


JSON  

JSON.parse用于从一个字符串中解析出json对象
JSON.stringify()用于从一个对象解析出字符串


Window  

clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
scroll()	 
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。


Math 对象方法  

abs(x)	返回数的绝对值。
ceil(x)	对数进行上舍入。
floor(x)	对数进行下舍入。
max(x,y)	返回 x 和 y 中的最高值。
min(x,y)	返回 x 和 y 中的最低值。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。


Number 对象方法  

toString	把数字转换为字符串,使用指定的基数。
valueOf	返回一个 Number 对象的基本数字值。


Date 对象方法  

new Date()   获取当前时间对象
Date.now()   获取当前时间戳


Object 对象方法  

Object.keys(obj)	获取对象的所有key到数组
Object.values(obj) 获取对象的所有值到数组
Object.assign(obj1,obj2,objn,....) 合并多个对象,key相同后面覆盖前面
Object.create(obj) 以obj为原型生成一个新对象


链接: https://www.fly63.com/article/detial/1256

JavaScript 函数式编程

我理解的 JavaScript 函数式编程,都认为属于函数式编程的范畴,只要他们是以函数作为主要载体的。

Js函数式编程,给你的代码增加一点点函数式编程的特性

给你的代码增加一点点函数式编程的特性,最近我对函数式编程非常感兴趣。这个概念让我着迷:应用数学来增强抽象性和强制纯粹性,以避免副作用,并实现代码的良好可复用性。同时,函数式编程非常复杂。

让我们来创建一个JavaScript Wait函数

Async/await以及它底层promises的应用正在猛烈地冲击着JS的世界。在大多数客户端和JS服务端平台的支持下,回调编程已经成为过去的事情。当然,基于回调的编程很丑陋的。

JavaScript函数创建的细节

如果你曾经了解或编写过JavaScript,你可能已经注意到定义函数的方法有两种。即便是对编程语言有更多经验的人也很难理解这些差异。在这篇博客的第一部分,我们将深入探讨函数声明和函数表达式之间的差异。

编写小而美函数的艺术

随着软件应用的复杂度不断上升,为了确保应用稳定且易拓展,代码质量就变的越来越重要。不幸的是,包括我在内的几乎每个开发者在职业生涯中都会面对质量很差的代码。这些代码通常有以下特征:

javascript回调函数的理解和使用方法(callback)

在js开发中,程序代码是从上而下一条线执行的,但有时候我们需要等待一个操作结束后,再进行下一步操作,这个时候就需要用到回调函数。 在js中,函数也是对象,确切地说:函数是用Function()构造函数创建的Function对象。

js调用函数的几种方法_ES5/ES6的函数调用方式

这篇文章主要介绍ES5中函数的4种调用,在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用,使用箭头函数,其中箭头函数的this是和定义时有关和调用无关。

JavaScript中函数的三种定义方法

函数的三种定义方法分别是:函数定义语句、函数直接量表达式和Function()构造函数的方法,下面依次介绍这几种方法具体怎么实现,在实际编程中,Function()构造函数很少用到,前两中定义方法使用比较普遍。

js在excel的编写_excel支持使用JavaScript自定义函数编写

微软 称excel就实现面向开发者的功能,也就是说我们不仅可以全新定义的公式,还可以重新定义excel的内置函数,现在Excel自定义函数增加了使用 JavaScript 编写的支持,下面就简单介绍下如何使用js来编写excel自定义函数。

js中的立即执行函数的写法,立即执行函数作用是什么?

这篇文章主要讲解:js立即执行函数是什么?js使用立即执行函数有什么作用呢?js立即执行函数的写法有哪些?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!