記好這 24 個 ES6 方法,用來解決實際開發的 JS 問題
本文主要介紹 24 中 es6 方法,這些方法都挺實用的,本本請記好,時不時翻出來看看。
1.如何隱藏所有指定的元素

2.如何檢查元素是否具有指定的類?
頁面DOM里的每個節點上都有一個classList對象,程序員可以使用里面的方法新增、刪除、修改節點上的CSS類。使用classList,程序員還可以用它來判斷某個節點是否被賦予了某個CSS類。

3.如何切換一個元素的類?

4.如何獲取當前頁面的滾動位置?

5.如何平滑滾動到頁面頂部

window.requestAnimationFrame() 告訴瀏覽器——你希望執行一個動畫,并且要求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。該方法需要傳入一個回調函數作為參數,該回調函數會在瀏覽器下一次重繪之前執行。
requestAnimationFrame:優勢:由系統決定回調函數的執行時機。60Hz的刷新頻率,那么每次刷新的間隔中會執行一次回調函數,不會引起丟幀,不會卡頓。
6.如何檢查父元素是否包含子元素?

7.如何檢查指定的元素在視口中是否可見?

8.如何獲取元素中的所有圖像?

9.如何確定設備是移動設備還是臺式機/筆記本電腦?

10.How to get the current URL?

11.如何創建一個包含當前URL參數的對象?

12.如何將一組表單元素轉化為對象?

13.如何從對象檢索給定選擇器指示的一組屬性?

14.如何在等待指定時間后調用提供的函數?

15.如何在給定元素上觸發特定事件且能選擇地傳遞自定義數據?

自定義事件的函數有 Event、CustomEvent 和 dispatchEvent

CustomEvent 可以創建一個更高度自定義事件,還可以附帶一些數據,具體用法如下:

其中 detail 可以存放一些初始化的信息,可以在觸發的時候調用。其他屬性就是定義該事件是否具有冒泡等等功能。
內置的事件會由瀏覽器根據某些操作進行觸發,自定義的事件就需要人工觸發。dispatchEvent 函數就是用來觸發某個事件:
- element.dispatchEvent(customEvent);
上面代碼表示,在 element 上面觸發 customEvent 這個事件。

16.如何從元素中移除事件監聽器?

17.如何獲得給定毫秒數的可讀格式?

18.如何獲得兩個日期之間的差異(以天為單位)?

19.如何向傳遞的URL發出GET請求?

20.如何對傳遞的URL發出POST請求?

21.如何為指定選擇器創建具有指定范圍,步長和持續時間的計數器?

22.如何將字符串復制到剪貼板?

23.如何確定頁面的瀏覽器選項卡是否聚焦?

24.如何創建目錄(如果不存在)?

這里面的方法大都挺實用,可以解決很多開發過程問題,大家就好好利用起來吧。