jQuery函數的等價原生函數代碼

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

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

譯者注需要注意下面有些原生方法是HTML引用的部分浏覽器可能不能使用

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

復制代碼 代碼如下:
//得到頁面的所有div
/* jQuery */
$("div")
/* 原生 */
documentgetElementsByTagName("div")
//得到所有指定class的元素
/* jQuery */
$("myclass")
/* 原生 */
documentquerySelectorAll("myclass")
/* 更快的原生方法 */
documentgetElementsByClassName("myclass")
//通過CSS選擇得到元素
/* jQuery */
$("myclass li:firstchild")
/* 原生 */
documentquerySelectorAll("myclass li:firstchild")
//得到指定clsss的第一個元素
/* jQuery */
$("myclass")get()
/* 原生 */
documentquerySelector("myclass")

　　
譯者注其實這裡面是有些問題的documentquerySelectorAll和jQuery選擇器還是有區別的前者返回的是一個NodeList而後者返回的是一個類數組對象
DOM操作
jQuery還在DOM操作上頻繁使用例如插入或者刪除元素我們也可以使用原生方法來進行這些操作你會發現這需要寫額外的代碼當然也可以寫自己的輔助函數來讓使用起來更容易下面是一些將元素插入到頁面中的例子

復制代碼 代碼如下:
//插入元素
/* jQuery */
$(documentbody)append("<div id=myDiv><img src=imgif/></div>");
/* 蹩腳的原生方法 */
documentbodyinnerHTML += "<div id=myDiv><img src=imgif/></div>";
/* 更好的原生方法 */
var frag = documentcreateDocumentFragment();
var myDiv = documentcreateElement("div");
myDivid = "myDiv";
var im = documentcreateElement("img");
imsrc = "imgif";
myDivappendChild(im);
fragappendChild(myDiv);
documentbodyappendChild(frag);
//前置元素
// 除了最後一行
documentbodyinsertBefore(frag documentbodyfirstChild);

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

復制代碼 代碼如下:
// 得到DOM元素的引用
var el = documentquerySelector("maincontent");
//添加class
/* jQuery */
$(el)addClass("someClass");
/* 原生方法 */
elclassListadd("someClass");
//刪除class
/* jQuery */
$(el)removeClass("someClass");
/* 原生方法 */
elclassListremove("someClass");
//是否是該class
/* jQuery */
if($(el)hasClass("someClass"))
/* 原生方法 */
if(elclassListcontains("someClass"))

　　
修改CSS屬性
總是通過Javascript修改和檢索CSS屬性這樣會比使用jQuery CSS函數更加簡單快速並且沒有任何不必要的代碼

復制代碼 代碼如下:
// 得到DOM元素引用
var el = documentquerySelector("maincontent");
//設置CSS屬性
/* jQuery */
$(el)css({
background: "#FF"
"boxshadow": "px px px px red"
width: "px"
height: "px"
display: "block"
});
/* 原生 */
elstylebackground = "#FF";
elstylewidth = "px";
elstyleheight = "px";
elstyledisplay = "block";
elstyleboxShadow = "px px px px red"; 
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20255.html