jQuery函数的等价原生函数

原帖地址：http://www.cnblogs.com/justany/archive/2013/05/27/3096386.html

原文：http://www.leebrimelow.com/native-methods-jquery/

不太重要的没翻译= =

 

我们针对常用的jQuery方法以及其等价原生方法的性能做了一些测试(1, 2, 3)。

我知道你在想什么。原生方法明显要比jQuery方法快，因为jQuery方法要处理浏览器兼容以及其他一些事情。是的，我完全赞成。写这篇文章并不是出于反对使用jQuery，但如果你针对的是现代浏览器，那么使用原生方法会使性能有很大的提升。

许多开发者没有意识到大多数他们使用的jQuery方法可以使用原生方法，或者更轻量级的方法来代替。下面是一些代码示例，展示一些常用的jQuery方法，以及其等价原生方法。

选择器

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

 

本文链接