核心要點(diǎn)

• jQuery 對(duì)於需要支持舊版 Internet Explorer 或編寫類似 jQuery 的庫(kù)所需時(shí)間比開發(fā)應(yīng)用程序時(shí)間更長(zhǎng)的開發(fā)者來說是一個(gè)有用的工具。但是，對(duì)於大多數(shù)其他情況，使用原生 JavaScript 效率更高，因?yàn)樗鼰o需加載像 jQuery 這樣的大型庫(kù)。
• 常用 jQuery 方法（例如 DOM 選擇器和 DOM 操作）的原生 JavaScript 等效項(xiàng)通常比其 jQuery 對(duì)應(yīng)項(xiàng)執(zhí)行得更快、更有效。例如，使用 document.getElementsByClassName 或 document.getElementById 可能比使用 jQuery 的 $() 包裝器快得多。
• HTML5 提供對(duì)各種常用輸入類型的內(nèi)置支持，無需為表單驗(yàn)證添加額外的 JavaScript 或 jQuery 代碼。不支持這些新類型的舊瀏覽器將恢復(fù)為標(biāo)準(zhǔn)文本輸入字段，需要服務(wù)器端驗(yàn)證。

關(guān)於我最近的《你真的需要 jQuery 嗎？ 》一文，爭(zhēng)論仍在繼續(xù)，但總而言之，使用jQuery 有兩個(gè)原因：1. 你需要支持IE6/7/8（記住你無法遷移到j(luò)Query 2.0），或者2. 沒有jQuery，你將花費(fèi)比開發(fā)應(yīng)用程序更長(zhǎng)的時(shí)間來編寫類似jQuery 的庫(kù)。

對(duì)於其他所有情況，請(qǐng)務(wù)實(shí)。 jQuery 是一個(gè) 270KB 的通用庫(kù)。你不太可能需要它提供的所有功能，即使你省略某些模塊，它仍然是一大塊代碼。你可能從 CDN 加載 30KB 的縮小版本，但瀏覽器必須在執(zhí)行任何其他操作之前停止處理並在每一頁(yè)上解析代碼。這是一系列文章中的第一篇，展示常用 jQuery 方法的原生 JavaScript 等效項(xiàng)。雖然你可能希望將其中一些包裝在更短的類似別名的函數(shù)中，但你肯定不需要?jiǎng)?chuàng)建自己的類似 jQuery 的庫(kù)。

DOM 選擇器

jQuery 允許使用 CSS 選擇器語(yǔ)法進(jìn)行 DOM 節(jié)點(diǎn)選擇，例如：

// 在 ID 為“first”的文章中查找所有具有類“summary”的段落
var n = $("article#first p.summary");

原生等效項(xiàng)：

var n = document.querySelectorAll("article#first p.summary");

document.querySelectorAll 在所有現(xiàn)代瀏覽器和 IE8 中都已實(shí)現(xiàn)（儘管這僅支持 CSS2.1 選擇器）。 jQuery 對(duì)更高級(jí)的選擇器提供了額外的支持，但大多數(shù)情況下，它會(huì)在 $() 包裝器內(nèi)運(yùn)行 document.querySelectorAll。原生 JavaScript 還提供了四種替代方案，如果您可以使用它們，它們幾乎肯定比 querySelectorAll 更快：

1. document.querySelector(selector) — 只獲取第一個(gè)匹配的節(jié)點(diǎn)
2. document.getElementById(idname) — 按其 ID 名稱獲取單個(gè)節(jié)點(diǎn)
3. document.getElementsByTagName(tagname) — 獲取與元素匹配的節(jié)點(diǎn)（例如 h1、p、strong 等）。
4. document.getElementsByClassName(class) — 獲取具有特定類名的節(jié)點(diǎn)

getElementsByTagName 和 getElementsByClassName 方法也可以應(yīng)用於單個(gè)節(jié)點(diǎn)以將結(jié)果限制為僅後代，例如：

// 在 ID 為“first”的文章中查找所有具有類“summary”的段落
var n = $("article#first p.summary");

讓我們進(jìn)行一些測(cè)試。我編寫了一些小的腳本，以從我的《你真的需要 jQuery 嗎？ 》文章中檢索所有註釋節(jié)點(diǎn) 10,000 次。結(jié)果：

我不能聲稱嚴(yán)格的實(shí)驗(yàn)室條件，它也不反映現(xiàn)實(shí)世界的使用情況，但在這種情況下，原生 JavaScript 的速度提高了 60 倍。它還說明，按 ID、標(biāo)籤或類獲取節(jié)點(diǎn)通常優(yōu)於 querySelectorAll。

DOM 操作

jQuery 提供了幾種方法來向 DOM 添加更多內(nèi)容，例如：

// 在 ID 為“first”的文章中查找所有具有類“summary”的段落
var n = $("article#first p.summary");

在表面之下，jQuery 使用原生 innerHTML 方法，例如：

var n = document.querySelectorAll("article#first p.summary");

你也可以使用 DOM 構(gòu)建技術(shù)。這些更安全，但很少比 innerHTML 快：

var n = document.getElementById("first");
var p = n.getElementsByTagName("p");

我們還可以刪除 jQuery 中的所有子節(jié)點(diǎn)：

$("#container").append("<p>more content</p>");

使用 innerHTML 的原生等效項(xiàng)：

document.getElementById("container").innerHTML += "<p>more content</p>";

或一個(gè)小函數(shù)：

var p = document.createElement("p");
p.appendChild(document.createTextNode("more content"));
document.getElementById("container").appendChild(p);

最後，我們可以在 jQuery 中從 DOM 中刪除整個(gè)元素：

$("#container").empty();

或原生 JavaScript：

document.getElementById("container").innerHTML = null;

可縮放矢量圖形 (SVG)

核心 jQuery 庫(kù)已開髮用於處理當(dāng)前文檔。 SVG 也具有 DOM，但 jQuery 不提供對(duì)這些對(duì)象的直接操作，因?yàn)樗ǔＰ枰褂弥T如 createElementNS 和 getAttributeNS 之類的方法。它可以工作，並且有幾個(gè)插件可用，但自己編寫代碼或使用專門的 SVG 庫(kù)（如 Rapha?l 或 svg.js）效率更高。

HTML5 表單

即使是最基本的 Web 應(yīng)用程序也都會(huì)有一兩個(gè)表單。你應(yīng)該始終在服務(wù)器端驗(yàn)證用戶數(shù)據(jù)，但理想情況下，你將使用客戶端驗(yàn)證來補(bǔ)充它，以便在提交表單之前捕獲錯(cuò)誤?？蛻舳蓑?yàn)證很簡(jiǎn)單：1. 表單提交時(shí)運(yùn)行一個(gè)函數(shù)。 2. 如果遇到任何問題，則停止提交並顯示錯(cuò)誤。

你可以使用 jQuery。你可以使用原生 JavaScript。你應(yīng)該選擇哪個(gè)？ 兩者都不選。 HTML5 內(nèi)置支持各種常用輸入類型，例如電子郵件、電話、URL、數(shù)字、時(shí)間、日期、顏色和基於正則表達(dá)式的自定義字段。例如，如果你想強(qiáng)制用戶輸入電子郵件地址，請(qǐng)使用：

var c = document.getElementById("container");
while (c.lastChild) c.removeChild(c.lastChild);

除非你需要更多複雜的功能（例如比較兩個(gè)或多個(gè)字段或顯示自定義錯(cuò)誤消息），否則無需額外的 JavaScript 或 jQuery 代碼。舊版瀏覽器（包括 IE9 及以下版本）不理解新類型，並將恢復(fù)為標(biāo)準(zhǔn)文本輸入字段。這些用戶將回退到服務(wù)器端驗(yàn)證；這並不是一個(gè)很好的體驗(yàn)，但你可以應(yīng)用一個(gè) shim 或希望這些人看到光明併升級(jí)。在我的下一篇文章中，我們將研究原生的 CSS 類操作和動(dòng)畫。

關(guān)於 jQuery 和原生 JavaScript 的常見問題

（此處省略了FAQ部分，因?yàn)樵摬糠謨?nèi)容與圖片和文章主體關(guān)聯(lián)性較弱，且篇幅較長(zhǎng)，可以單獨(dú)處理。）

以上是jQuery方法的本機(jī)JavaScript等效物：DOM和形式的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！