原始的js代碼和jquery對(duì)比體會(huì)
更新時(shí)間：2013年09月10日 16:08:51 作者：
在我們自己處理的時(shí)候，甚至是這么簡(jiǎn)單的任務(wù)在不使用jquery的時(shí)候都會(huì)變得復(fù)雜，通過下面我們可以清晰的看到使用query代碼比原生js代碼寫起來更容易
Even a task as simple as this can be complicated without jQuery at our disposal. In plain JavaScript, we could add the highlightedclass as shown in the following code snippet:
window.onload = function() {
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
if (hasClass(divs[i], 'poem-stanza') && !hasClass(divs[i], 'highlight')) {
divs[i].className += ' highlight';
}
}
function hasClass( elem, cls ) {
var reClass = new RegExp(' ' + cls + ' ');
return reClass.test(' ' + elem.className + ' ');
}
};
在我們自己處理的時(shí)候，甚至是這么簡(jiǎn)單的任務(wù)在不使用jquery的時(shí)候都會(huì)變得復(fù)雜。用原始的js，我們可以使用下面的代碼片段添加highlighted類：
Despite its length, this solution does not handle many of the situations that jQuery takes care of for us in Listing 1.2, such as the following:
• Properly respecting other window.onloadevent handlers
• Acting as soon as the DOM is ready
• Optimizing element retrieval and other tasks with modern DOM methods
盡管很長(zhǎng)，但是這個(gè)解決方案依然沒有處理很多jquery在列表1.2中為我們做到的一些事情，比如下面的這些：
1、合適的處理其他的window.load事件
2、在DOM結(jié)構(gòu)準(zhǔn)備好的時(shí)候開始行動(dòng)。
3、使用現(xiàn)代的DOM方法優(yōu)化元素查找和其他任務(wù)。
We can see that our jQuery-driven code is easier to write, simpler to read, and faster to execute than its plain JavaScript equivalent.
我們可以清晰的看到我們的使用query的代碼比原生js代碼寫起來更容易，讀起來更簡(jiǎn)單，運(yùn)行起來更快。
復(fù)制代碼 代碼如下:
window.onload = function() {
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
if (hasClass(divs[i], 'poem-stanza') && !hasClass(divs[i], 'highlight')) {
divs[i].className += ' highlight';
}
}
function hasClass( elem, cls ) {
var reClass = new RegExp(' ' + cls + ' ');
return reClass.test(' ' + elem.className + ' ');
}
};
在我們自己處理的時(shí)候，甚至是這么簡(jiǎn)單的任務(wù)在不使用jquery的時(shí)候都會(huì)變得復(fù)雜。用原始的js，我們可以使用下面的代碼片段添加highlighted類：
Despite its length, this solution does not handle many of the situations that jQuery takes care of for us in Listing 1.2, such as the following:
• Properly respecting other window.onloadevent handlers
• Acting as soon as the DOM is ready
• Optimizing element retrieval and other tasks with modern DOM methods
盡管很長(zhǎng)，但是這個(gè)解決方案依然沒有處理很多jquery在列表1.2中為我們做到的一些事情，比如下面的這些：
1、合適的處理其他的window.load事件
2、在DOM結(jié)構(gòu)準(zhǔn)備好的時(shí)候開始行動(dòng)。
3、使用現(xiàn)代的DOM方法優(yōu)化元素查找和其他任務(wù)。
We can see that our jQuery-driven code is easier to write, simpler to read, and faster to execute than its plain JavaScript equivalent.
我們可以清晰的看到我們的使用query的代碼比原生js代碼寫起來更容易，讀起來更簡(jiǎn)單，運(yùn)行起來更快。
相關(guān)文章
2016年推出微信小程序，時(shí)至今日，歷經(jīng)幾個(gè)版本的更新，已形成了相對(duì)實(shí)用和穩(wěn)定的服務(wù)平臺(tái)。本文簡(jiǎn)單的介紹了微信小程序的入門用法，今后會(huì)繼續(xù)關(guān)注和實(shí)踐。需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。2017-03-03
這篇文章主要介紹了JavaScript中的pow()方法使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
js獲取height和width屬性的值在日常開發(fā)中很常見，于是本人搜集整理了一下，感興趣的朋友可以參考下2013-01-01
JavaScript 中的日期和時(shí)間及表示標(biāo)準(zhǔn)介紹
本文為大家詳細(xì)介紹下時(shí)間標(biāo)準(zhǔn)指的是什么？UCT和GMT 的概念、關(guān)聯(lián)和區(qū)別？以及時(shí)間表示標(biāo)準(zhǔn)有哪些？感興趣的朋友可以參考下2013-08-08
JavaScript顯式數(shù)據(jù)類型轉(zhuǎn)換詳解
這篇文章主要介紹了JavaScript顯式數(shù)據(jù)類型轉(zhuǎn)換，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
簡(jiǎn)介JavaScript中search()方法的使用
這篇文章主要介紹了簡(jiǎn)介JavaScript中search()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
深入理解JavaScript系列（30）：設(shè)計(jì)模式之外觀模式詳解
這篇文章主要介紹了深入理解JavaScript系列（30）：設(shè)計(jì)模式之外觀模式詳解,外觀模式（Facade）為子系統(tǒng)中的一組接口提供了一個(gè)一致的界面,此模塊定義了一個(gè)高層接口,這個(gè)接口值得這一子系統(tǒng)更加容易使用,需要的朋友可以參考下2015-03-03
onkeyup，onkeydown和onkeypress的區(qū)別介紹
三者在事件的響應(yīng)上還有一點(diǎn)不同，就是onkeydown 、onkeypress事件響應(yīng)的時(shí)候輸入的字符并沒有被系統(tǒng)接受，而響應(yīng)onkeyup的時(shí)候，輸入流已經(jīng)被系統(tǒng)接受2013-10-10
JavaScript中require和import的區(qū)別詳解
本文詳細(xì)講解了JS中require和import的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了a標(biāo)簽添加onclick事件的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03