儘量的使用原生js，而不是jQuery

不能否認，jQuery是一款很是優秀的JavaScript庫，極大的提升了前端開發效率。

有利就有弊，過分的依賴jQuery可能會帶來代碼執行效率低等問題；隨着原生JavaScript版本的升級，如今不少內置的功能也可以完美的實現jQuery的對應功能，下面就簡單作一下羅列，須要的朋友能夠作一下參考。

一.元素查找:

（1）.經過id查找元素:

$("#ant")

複製代碼

jQuery的id選擇器徹底可使用原生方法替代:

document.getElementById("ant")

複製代碼

（2）.經過class屬性來查找元素:

$(".ant")

複製代碼

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

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

//獲取id屬性值爲ant的元素對象
document.querySelector("#ant");
//獲取id屬性值爲ant下面的全部div元素集合
document.querySelectorAll("#ant div");

複製代碼

二.判斷節點是否存在:

$("#ant").length > 0

複製代碼

上面的代碼可使用下面的代碼替代:

document.getElementById("ant") !== null


複製代碼

三.節點遍歷:

("div").each(function (index, elem) {
  //code
})

複製代碼

上面的代碼能夠採用下面的代碼替代:

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
});

複製代碼

這裏推薦一下個人前端學習交流圈：731771211，裏面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴。最新技術，與企業需求同步。好友都在裏面學習交流，天天都會有大牛定時講解前端技術!

點擊：加入

四.清空節點內容:

上面的代碼能夠用以下代碼替代:

document.getElementById('test').innerHTML =""

複製代碼

五.設置節點的內容:

$("div").htm("前端開發")

複製代碼

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

document.querySelecotr('div').innerHTML = "前端開發";

複製代碼

再來看設置text文本內容:

$("div").text("前端開發")

複製代碼

可使用以下代碼替代:

var odiv = document.querySelector("div");
odiv.textContent="前端開發";

複製代碼

六.操做class屬性:

（1）.新增class樣式類:

$("#ant").addClass("class")

複製代碼

上面的代碼能夠用如下代碼替代:

function addClass(elem, className) {
  if(elem.classList) {
    elem.classList.add(className);
  } else {
    elem.className += ' ' + className;
  }
}
addClass(document.getElementById("ant"), "class");

複製代碼

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

$("#ant").removeClass("class");

複製代碼

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

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）.判斷是否包含指定的類:

$("#ant").hasClass("class");

複製代碼

上面的代碼能夠用如下代碼替代:

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）.建立節點:

$("<div>")


複製代碼

上面的代碼能夠用如下代碼替代:

document.createElement("div")


複製代碼

3）.插入節點:

$("div").append("<span></span>")

複製代碼

固然插入節點的方法有不少，以上代碼能夠用以下代碼替代:

var span = document.createElement("span");
document.querySelector("div").appendChild(span);

複製代碼

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

$("<span>").insertBefore("#ant");

複製代碼

上面的代碼能夠用以下代碼替代:

var t = document.getElementById("ant");
var span = document.createElement("span");
t.parentNode.insertBefore(span, t);

複製代碼

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

$("<span>").insertAfter("#ant")

複製代碼

以上代碼能夠用下面的代碼替代:

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）.獲取父節點:

$("#ant").parent()

複製代碼

上面的代碼能夠用如下代碼替代:

document.getElementById("ant").parentNode

複製代碼