不可否認，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
複製程式碼