记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

开发 前端
本文主要介绍 24 中 es6 方法,这些方法都挺实用的,本本请记好,时不时翻出来看看。

 本文主要介绍 24 中 es6 方法,这些方法都挺实用的,本本请记好,时不时翻出来看看。

[[317461]]

1.如何隐藏所有指定的元素

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

2.如何检查元素是否具有指定的类?

页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类。

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

3.如何切换一个元素的类?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

4.如何获取当前页面的滚动位置?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

5.如何平滑滚动到页面顶部

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。

requestAnimationFrame:优势:由系统决定回调函数的执行时机。60Hz的刷新频率,那么每次刷新的间隔中会执行一次回调函数,不会引起丢帧,不会卡顿。

6.如何检查父元素是否包含子元素?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

7.如何检查指定的元素在视口中是否可见?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

8.如何获取元素中的所有图像?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

9.如何确定设备是移动设备还是台式机/笔记本电脑?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

10.How to get the current URL?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

11.如何创建一个包含当前URL参数的对象?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

12.如何将一组表单元素转化为对象?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

13.如何从对象检索给定选择器指示的一组属性?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

14.如何在等待指定时间后调用提供的函数?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

15.如何在给定元素上触发特定事件且能选择地传递自定义数据?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

自定义事件的函数有 Event、CustomEvent 和 dispatchEvent

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

CustomEvent 可以创建一个更高度自定义事件,还可以附带一些数据,具体用法如下:

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

其中 detail 可以存放一些初始化的信息,可以在触发的时候调用。其他属性就是定义该事件是否具有冒泡等等功能。

内置的事件会由浏览器根据某些操作进行触发,自定义的事件就需要人工触发。dispatchEvent 函数就是用来触发某个事件:

 

  1. element.dispatchEvent(customEvent); 

上面代码表示,在 element 上面触发 customEvent 这个事件。

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

16.如何从元素中移除事件监听器?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

17.如何获得给定毫秒数的可读格式?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

18.如何获得两个日期之间的差异(以天为单位)?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

19.如何向传递的URL发出GET请求?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

20.如何对传递的URL发出POST请求?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

21.如何为指定选择器创建具有指定范围,步长和持续时间的计数器?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

22.如何将字符串复制到剪贴板?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

23.如何确定页面的浏览器选项卡是否聚焦?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

24.如何创建目录(如果不存在)?

 

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

 

这里面的方法大都挺实用,可以解决很多开发过程问题,大家就好好利用起来吧。

责任编辑:华轩 来源: 今日头条
相关推荐

2021-01-27 07:51:41

JSES6元素

2020-12-02 06:11:02

JS ES6方法

2020-03-22 15:48:14

JavaScriptWeb编程语言

2022-09-21 12:46:39

开发JavaScrip代码

2022-10-25 08:02:01

JavaScriptArrayMap

2022-09-23 09:14:28

JavaScriptES6代码

2020-07-01 07:58:20

ES6JavaScript开发

2017-08-31 14:25:34

前端JavascriptES6

2022-07-26 09:02:15

ES6ES13ECMAScript

2022-06-01 09:06:58

ES6数组函数

2021-08-16 07:05:58

ES6Promise开发语言

2023-02-23 16:49:11

ES6技巧

2021-07-30 07:10:07

ES6函数参数

2021-04-20 09:48:48

ES5Es6数组方法

2017-10-09 18:21:20

JavaScriptES6ES8

2023-11-23 10:21:11

ECMAScriptJavaScript

2023-03-01 15:39:50

JavaScrip对象属性ES6

2023-05-28 23:49:38

JavaScrip开发

2021-07-16 07:26:48

ES6javascript开发语言

2021-08-02 05:51:29

foreachES6数组
点赞
收藏

51CTO技术栈公众号