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";