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

ApacheAnt jQuery · 發表 2019-04-19 23:58:03

摘要：不可否認，jQuery是一款非常優秀的JavaScript庫，極大的提高了前端開發效率。有利就有弊，過度的依賴jQuery可能會帶來程式碼執行效率低等問題；隨著原生JavaScript版本的升級，現在很多內建的功能也能夠完美的實現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

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

您可能也會喜歡…