核心要點

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

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

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

DOM 選擇器

jQuery 允許使用 CSS 選擇器語法進行 DOM 節(jié)點選擇，例如：

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

原生等效項：

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

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

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

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

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

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

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

DOM 操作

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

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

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

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

你也可以使用 DOM 構建技術。這些更安全，但很少比 innerHTML 快：

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

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

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

使用 innerHTML 的原生等效項：

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

或一個小函數：

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

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

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

或原生 JavaScript：

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

可縮放矢量圖形 (SVG)

核心 jQuery 庫已開髮用於處理當前文檔。 SVG 也具有 DOM，但 jQuery 不提供對這些對象的直接操作，因為它通常需要使用諸如 createElementNS 和 getAttributeNS 之類的方法。它可以工作，並且有幾個插件可用，但自己編寫代碼或使用專門的 SVG 庫（如 Rapha?l 或 svg.js）效率更高。

HTML5 表單

即使是最基本的 Web 應用程序也都會有一兩個表單。你應該始終在服務器端驗證用戶數據，但理想情況下，你將使用客戶端驗證來補充它，以便在提交表單之前捕獲錯誤?？蛻舳蓑炞C很簡單：1. 表單提交時運行一個函數。 2. 如果遇到任何問題，則停止提交並顯示錯誤。

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

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

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

關於 jQuery 和原生 JavaScript 的常見問題

（此處省略了FAQ部分，因為該部分內容與圖片和文章主體關聯(lián)性較弱，且篇幅較長，可以單獨處理。）

以上是jQuery方法的本機JavaScript等效物：DOM和形式的詳細內容。更多資訊請關注PHP中文網其他相關文章！