儘可能的使用原生js而不是jQuery

不可否認，jQuery是一款非常優秀的JavaScript庫，極大的提高了前端開發效率。

有利就有弊，過度的依賴jQuery可能會帶來程式碼執行效率低等問題；隨著原生JavaScript版本的升級，現在很多內建的功能也能夠完美的實現jQuery的對應功能，下面就簡單做一下羅列，需要的朋友可以做一下參考。

一.元素查詢:

（1）.通過id查詢元素:

[JavaScript] 純文字檢視 複製程式碼
$("#ant")

jQuery的id選擇器完全可以使用原生方法替代:

[JavaScript] 純文字檢視 複製程式碼
document.getElementById("ant")

（2）.通過class屬性來查詢元素:

[JavaScript] 純文字檢視 複製程式碼
$(".ant")

document.querySelector()和document.querySelectorAll()方法:

這兩個方法可以實現強大的選擇器功能，下面是幾個簡單程式碼:

[JavaScript] 純文字檢視 複製程式碼
//獲取id屬性值為ant的元素物件
document.querySelector("#ant");
//獲取id屬性值為ant下面的所有div元素集合
document.querySelectorAll("#ant div");

二.判斷節點是否存在:

[JavaScript] 純文字檢視 複製程式碼
$("#ant").length > 0

上面的程式碼可以使用下面的程式碼替代:

[JavaScript] 純文字檢視 複製程式碼
document.getElementById("ant") !== null

三.節點遍歷:

[JavaScript] 純文字檢視 複製程式碼
("div").each(function (index, elem) {
  //code
})

上面的程式碼可以採用下面的程式碼替代:

[JavaScript] 純文字檢視 複製程式碼
function forEach(elems, callback) {
  if([].forEach) {
    [].forEach.call(elems, callback);
  } else {
    for (var index = 0; index < elems.length; index++) {
      callback(elems[index], index);
    }
  }
}
var div = document.querySelectorAll("div");
forEach(div, function(elem, index){
  //code
});

四.清空節點內容:

[JavaScript] 純文字檢視 複製程式碼
$("#ant").empty()

上面的程式碼可以用如下程式碼替代:

[JavaScript] 純文字檢視 複製程式碼
document.getElementById('test').innerHTML =""

五.設定節點的內容:

[JavaScript] 純文字檢視 複製程式碼
$("div").html("螞蟻部落")

上面的程式碼可以使用如下程式碼替代:

[JavaScript] 純文字檢視 複製程式碼
document.querySelecotr('div').innerHTML = "螞蟻部落";

再來看設定text文字內容:

[JavaScript] 純文字檢視 複製程式碼
$("div").text("螞蟻部落")

可以使用如下程式碼替代:

[JavaScript] 純文字檢視 複製程式碼
var odiv = document.querySelector("div");
odiv.textContent="螞蟻部落";

六.操作class屬性:

（1）.新增class樣式類:

[JavaScript] 純文字檢視 複製程式碼
$("#ant").addClass("class")

上面的程式碼可以用以下程式碼替代:

[JavaScript] 純文字檢視 複製程式碼
function addClass(elem, className) {
  if(elem.classList) {
    elem.classList.add(className);
  } else {
    elem.className += ' ' + className;
  }
}
addClass(document.getElementById("ant"), "class");

（2）.刪除指定樣式類:

[JavaScript] 純文字檢視 複製程式碼
$("#ant").removeClass("class");

上面的程式碼可以使用如下程式碼替代:

[JavaScript] 純文字檢視 複製程式碼
function removeClass(elem, className) {
  if(elem.classList) {
    elem.classList.remove(className);
  } else {
    elem.className=elem.className.replace(new RegExp('(^|\\b)'+className.split(' ').join('|')+'(\\b|$)','gi'),' ');
  }
}
removeClass(document.getElementById("ant"), "class");

（3）.判斷是否包含指定的類:

[JavaScript] 純文字檢視 複製程式碼
$("#ant").hasClass("class");

上面的程式碼可以用以下程式碼替代:

[JavaScript] 純文字檢視 複製程式碼
function hasClass(elem, className) {
  if(elem.classList) {
    return elem.classList.contains(className);
  } else {
    return new RegExp('(^| )' + className + '( |$)', 'gi').test(elem.className);
  }
}
hasClass(document.getElementById("ant"), "class");

七.節點操作:

（1）.建立節點:

[JavaScript] 純文字檢視 複製程式碼
$("<div>")

上面的程式碼可以用以下程式碼替代:

[JavaScript] 純文字檢視 複製程式碼
document.createElement("div")

（2）.複製節點:

[JavaScript] 純文字檢視 複製程式碼
$("div").clone()

上面的程式碼可以用以下程式碼替代:

[JavaScript] 純文字檢視 複製程式碼
document.querySelector("div").cloneNode(true)

（3）.插入節點:

[JavaScript] 純文字檢視 複製程式碼
$("div").append("<span></span>")

當然插入節點的方法有很多，以上程式碼可以用如下程式碼替代:

[JavaScript] 純文字檢視 複製程式碼
var span = document.createElement("span");
document.querySelector("div").appendChild(span);

在指定節點之前插入新的子節點:

[JavaScript] 純文字檢視 複製程式碼
$("<span>").insertBefore("#ant");

上面的程式碼可以用如下程式碼替代:

[JavaScript] 純文字檢視 複製程式碼
var t = document.getElementById("ant");
var span = document.createElement("span");
t.parentNode.insertBefore(span, t);

在指定節點後插入新的子節點:

[JavaScript] 純文字檢視 複製程式碼
$("<span>").insertAfter("#ant")

以上程式碼可以用下面的程式碼替代:

[JavaScript] 純文字檢視 複製程式碼
function insertAfter(elem, newNode){
  if(elem.nextElementSibling) {
    elem.parentNode.insertBefore(newNode, elem.nextElementSibling);
  } else {
    elem.parentNode.appendChild(newNode);
  }
}
var t = document.getElementById("ant");
var span = document.createElement("span");   
insertAfter(t, span);

（4）.獲取父節點:

[JavaScript] 純文字檢視 複製程式碼
$("#ant").parent()

上面的程式碼可以用以下程式碼替代:

[JavaScript] 純文字檢視 複製程式碼
document.getElementById("ant").parentNode