jQuery函數的等價原生函數

原文：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";