Posted in Javascript onMay 27, 2013
我们针对常用的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";
jQuery函数的等价原生函数代码示例
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@