原文： http://www.leebrimelow.com/native-methods-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(
"<div id='myDiv'><img src='im.gif'/></div>"
);
/*
蹩脚的原生方法
*/
document.body.innerHTML
+= "<div id='myDiv'><img src='im.gif'/></div>"
;
/*
更好的原生方法
*/
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.appendChild(frag);
//
----前置元素----
//
除了最后一行
document.body.insertBefore(frag, document.body.firstChild);
CSS classes
在jQuery中，我们可以很容易对DOM元素添加、删除、检查它的CSS class。幸运的是，利用原生方法也可以简单的办到。
//
得到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"
,
height:
"100px"
,
display:
"block"
});
/*
原生
*/
el.style.background
= "#FF0000"
;
el.style.width
= "100px"
;
el.style.height
= "100px"
;
el.style.display
= "block"
;
el.style.boxShadow
= "1px 1px 5px 5px red";
