jQuery函數的等價原生函數程式碼範例_jquery

我們針對常用的jQuery方法以及其等價原生方法的性能做了一些測試(1, 2, 3)。
我知道你在想什麼。原生方法明顯要比jQuery方法快，因為jQuery方法要處理瀏覽器相容以及其他一些事情。是的，我完全贊成。寫這篇文章並不是出於反對使用jQuery，但如果你針對的是現代瀏覽器，那麼使用原生方法會使效能有很大的提升。

許多開發者沒有意識到大多數他們使用的jQuery方法可以使用原生方法，或更輕量級的方法來代替。以下是一些程式碼範例，展示一些常用的jQuery方法，以及其等價原生方法。

譯者註：要注意下面有些原生方法是HTML5引用的，部分瀏覽器可能不能使用。

選擇器
jQuery的核心之一就是能非常方便的取到DOM元素。我們只需輸入CSS選擇字串，便可以得到符合的元素。但在大多數情況下，我們可以用簡單的原生程式碼達到相同的效果。

複製程式碼 程式碼如下:

//----得到頁面的所有div- --------
/* jQuery */
$("div")
/* 原生*/
document.getElementsByTagName("div")
//- ---得到所有指定class的元素---------
/* jQuery */
$(".my-class")
/* 原生*/
document .querySelectorAll(".my-class")
/* 更快的原生方法*/
document.getElementsByClassName("my-class")
//----透過CSS選擇得到元素- ---------
/* jQuery */
$(".my-class li:first-child")
/* 原生*/
document.querySelectorAll(" .my-class li:first-child")
//----得到指定clsss的第一個元素----
/* jQuery */
$(".my-class ").get(0)
/* 原生*/
document.querySelector(".my-class")

譯者註：其實這裡面是有些問題的， document.querySelectorAll和jQuery選擇器還是有差別的，前者回傳的是一個NodeList，而後者回傳的是一個類別陣列物件。
DOM操作
jQuery也常在DOM操作上使用，例如插入或刪除元素。我們也可以使用原生方法來進行這些操作，你會發現這需要寫額外的程式碼，當然也可以寫自己的輔助函數來讓使用起來更容易。以下是一些將元素插入頁面的範例。

複製程式碼 程式碼如下:

//----插入元素----
/* jQuery */
$(document.body).append("

");
/* 蹩腳的原生方法*/
document.body.innerHTML = "

";
/* 更好的原生方法*/
var frag = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id = "myDiv";
var im = document .createElement("img");
im.src = "im.gif";
myDiv.appendChild(im);
frag.appendChild(myDiv);
document.body.appendld(appendChild(myDiv);
document.body.appendld(appendld( frag);
//----前置元素----
// 除了最後一行
document.body.insertBefore(frag, document.body.firstChild);

CSS classes

在jQuery中，我們可以很容易地對DOM元素添加、刪除、檢查它的CSS class。幸運的是，利用原生方法也可以簡單的辦到。

複製程式碼

程式碼如下:

// 得到DOM元素的參考


// 得到DOM元素的引用
var el = document.querySelector(".main-content");
//----新增class------
/* jQuery */
$(el).addClass("someClass ");
/* 原生方法*/
el.classList.add("someClass");
//----刪除class-----
/* jQuery */
$(el).removeClass("someClass");
/* 原生方法*/
el.classList.remove("someClass");
//----是否是該class---
/* jQuery */

if($(el).hasClass("someClass"))
/* 原生方法*/ if(el.classList.contains(" someClass"))

修改CSS屬性 總是透過Javascript修改和擷取CSS屬性，這樣會比使用jQuery CSS函數更簡單快速，且沒有任何不必要的代碼。

複製程式碼 程式碼如下:

// DOM 要素参照を取得します
var el = document.querySelector(".main-content")
//----CSS プロパティを設定します----
/ * jQuery */
$(el).css({
background: "#FF0000",
"box-shadow": "1px 1px 5px 5px red",
width: "100px" ,
高さ: "100px",
表示: "ブロック"
});
/* ネイティブ*/
el.style.background = "#FF0000"; .style.width = "100px";
el.style.height = "100px";
el.style.display = "ブロック";
el.style.boxShadow = "1px 1px 5px 5px ";