現代瀏覽器內置的可等效替代jQuery的功能

時間 2019-12-09

原文原文鏈接

jQuery的體積在不斷的增大。新功能要不斷增長，這是必然結果。雖然從版本1.8.3開始的瘦身效果明顯，但不能否認的是，對於移動手機端的網頁開發，它仍然是不可接受的。固然，jQuery不是鐵板一塊，你能夠對它進行定製，只打包進你想要的組件，但其中的一些用來兼容老式瀏覽器的代碼你沒法去除。

　　就個人我的習慣來講，無論開發什麼項目，即便是一個很簡單的demo，我作的第一件事就是引入jQuery，這樣作主要是想使用它提供的DOM選擇器功能。對於一些像IE6/IE7這樣的老式瀏覽器，這種作法是顯而易見的，可是，現在現代瀏覽器裏已經內置了完整的DOM選擇器功能，能讓你使用原生的瀏覽器提供的方法來實現jQuery的功能。

　　document.queryselector

　　這裏說的現代瀏覽器是指火狐、谷歌、Opera、Safri等新生代瀏覽器，若是是IE，你須要至少是IE8或以上。你能夠簡單的將document.querySelector()函數映射爲$，它能返回在DOM中找到的第一個匹配選擇條件的元素。任何的CSS選擇符均可以做爲它的參數。
注意：IE 8只支持 CSS2.1標準的選擇器
php

　　你須要使用原生的「style」方法，並且這裏不能使用jQuery裏的鏈式調用。console.log()輸出的將會是backgroundColor方法返回的「salmon」。

　　原生DOM節點有時候會比封裝後的jQuery對象更好用。例如，若是你想修改一個圖片的src屬性，比較一下下面使用jQuery的作法和直接使用DOM節點的作法。
html

　　DOM對象能讓你直接訪問圖片的src屬性，相反，全部的jQuery對象都須要你經過attr函數來操做。

　　document.querySelector方法只返回一個元素。若是你的選擇目標是一堆元素，它只會返回符合條件的第一個節點。要想返回全部節點，你須要使用document.querySelectorAll方法。

　　document.queryselectorall

　　一個很巧妙的作法是將querySelector映射爲$，而將querySelectorAll函數映射爲$$。但它返回的是一個節點列表，不如 jQuery裏返回的Array格式好用，咱們能夠使用Array.prototype.slice.call(nodeList)方法加工一下，讓它更方便。
　　注意，IE8是不支持將一個nodeList轉換爲Array的。
　　classList

　　使用jQuery對CSS類操做十分方便，幸運的是，現代瀏覽器裏也內置了一下方法可以很方便的操做它們，主要用到了classList對象。下面是一些基本操做兩種方式的對比。
html5

　　相對於jQuery提供大量豐富的方法，上面說的這幾個現代瀏覽器裏內置的功能顯得很簡單，但若是項目中的要求不高，這些替代方法能大大的減小你的應用依賴。

　　最後要提醒的是，這些內置方法在不一樣的瀏覽器和不一樣的版本中支持程度不同，下面是它們的支持程度參考表。

　　附圖1：各類瀏覽器對querySelector/querySelectorAll的兼容支持
node