jQuery是一款優(yōu)秀的JS庫(kù)，它是在IE6盛行時(shí)出現(xiàn)的。如今，jQuery已經(jīng)成為最流行的javascript框架，在世界前10000個(gè)訪問(wèn)最多的網(wǎng)站中，有超過(guò)55%在使用jQuery。不得不說(shuō)jQuery是一個(gè)編寫跨瀏覽器代碼的完美工具。

而現(xiàn)在，網(wǎng)頁(yè)瀏覽器比剛開(kāi)始時(shí)先進(jìn)多了。我們可以輕松地使用ES5提供的所有功能。而且還可以盡情支配使用HTML5 APIs，使得圍繞DOM的工作更輕松愉快。如今，開(kāi)發(fā)者們可以有選擇的摒棄jQuery，與此同時(shí)，工作效率并不會(huì)因此降低。

我們可以不那么依賴jQuery了，但是jQuery依舊是一款非常棒的庫(kù)，并且很多時(shí)候用了比不用好。但我要說(shuō)的是，在完成一些只有少量js交互，瀏覽器擴(kuò)展和移動(dòng)站點(diǎn)的簡(jiǎn)單頁(yè)面時(shí)，可使用vanilla JS。如你想嘗試，這里介紹10種方法。

1.監(jiān)聽(tīng)文件

編寫jQuery時(shí)要做的第一件事就是將你的代碼包含進(jìn) $(document).ready() call，然后你才能知道DOM什么時(shí)候能執(zhí)行操作。沒(méi)有了jQuery，我們就使用 DOMContentLoaded 事件。

2. 選擇元素

很久以前，我們只能通過(guò)id，class和tag name來(lái)選擇元素，而擁有智能css類選擇器的jQuery簡(jiǎn)直就是大救星。瀏覽從此流行起來(lái)，兩款重要的API也進(jìn)入人們的視線：querySelector 和。

3.添加和刪除事件偵聽(tīng)器

監(jiān)聽(tīng)事件是構(gòu)建一個(gè)web應(yīng)用程序的一個(gè)基礎(chǔ)部分。曾經(jīng)因?yàn)檫@個(gè)問(wèn)題而劃分出兩大陣營(yíng)——IE和其他瀏覽器。但今天我們都用addEventListener。addEventListener 需要第三個(gè)參數(shù) (useCapture)，但有時(shí)也不需要。結(jié)果是代碼看起來(lái)越來(lái)越像jQuery。

4.操作類和屬性

不使用jQuery操作一個(gè)元素的類名稱在以往是很不方便的一件事。現(xiàn)在就不會(huì)了，這多虧有了 property。如果你需要操作屬性，這里還有。

5. 獲取和設(shè)置元素內(nèi)容

jQuery有著方便易用的 text() 和 html() methods。在他們的位置，你可以使用  和  屬性。

6. 插入和移除元素

雖說(shuō)有jQuery會(huì)更簡(jiǎn)單方便，但要是沒(méi)有也可以就用javascript添加和移除DOM元素。添加、移除、替換任意元素都可以。

7. 遍歷DOM樹(shù)

每個(gè)真正的JS ninja都知道，DOM藏有巨大能量。與jQuery相比，普通的DOM api提供有限的功能。然而，仍然有很多事情可以做去遍歷整個(gè)樹(shù)。

8.陣列循環(huán)

jQuery提供的一些實(shí)用方法可用ES5的標(biāo)準(zhǔn)。對(duì)于迭代數(shù)組，我們可以使用 和 而非他們的jQuery版本—— each() 和 map()。只是小心的不同參數(shù)和回調(diào)的默認(rèn)的這個(gè)值。

9. 動(dòng)畫

jQuery的動(dòng)畫比你那些自己貼合在一起的東西都要好。要是你需要復(fù)雜的、可編寫腳本的動(dòng)畫你還是該繼續(xù)使用jQuery的。但是好在有了CSS3，一些簡(jiǎn)單的case僅僅使用 這種輕量級(jí)庫(kù)就可以搞定。只需添加和移除類的名字到元素就可以觸發(fā)動(dòng)畫效果了。

10. AJAX

AJAX也是一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。好消息是，我們現(xiàn)在到處都可以使用相同的代碼了。不好的是，示例和用發(fā)送AJAX請(qǐng)求依舊很復(fù)雜，所以最好還是留給庫(kù)來(lái)完成。但是你不需要因此就把整個(gè)jQuery包含進(jìn)去，只需使用一個(gè) 就可以了。

總結(jié)

一個(gè)小巧的網(wǎng)頁(yè)是值得我們?yōu)橹Φ模粌H加載迅速，而且用戶體驗(yàn)也更好。今天分享的這些小貼士還是有很多地方能用得上的。但要記住不要為了降低字節(jié)數(shù)而犧牲好的開(kāi)發(fā)實(shí)踐。