我要评论我们针对常用的jquery方法以及其等价原生方法的性能做了一些测试(1, 2, 3)。
我知道你在想什么。原生方法明显要比jquery方法快，因为jquery方法要处理兼容以及其他一些事情。是的，我完全赞成。写这篇文章并不是出于反对使用jquery，但如果你针对的是现代浏览器，那么使用原生方法会使性能有很大的提升。
许多开发者没有意识到大多数他们使用的jquery方法可以使用原生方法，或者更轻量级的方法来代替。下面是一些代码示例，展示一些常用的jquery方法，以及其等价原生方法。
译者注：需要注意下面有些原生方法是html5引用的，部分浏览器可能不能使用。
选择器
jquery的核心之一就是能非常方便的取到dom元素。我们只需输入css选择字符串，便可以得到匹配的元素。但在大多数情况下，我们可以用简单的原生代码达到同样的效果。
. 代码如下:
//----得到页面的所有p---------
/* jquery */
$("p")
/* 原生 */
document.getelementsbytagname("p")
//----得到所有指定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("<p id='mydiv'><img src='im.gif'/></p>");
/* 蹩脚的原生方法 */
document.body.innerhtml += "<p id='mydiv'><img src='im.gif'/></p>";
/* 更好的原生方法 */
var frag = document.createdocumentfragment();
var mydiv = document.createelement("p");
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";
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论