尽可能的使用原生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
});

十五年编程经验，今年1月整理了一批2019年最新WEB前端教学视频，不论是零基础想要学习前端还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。只要关注我的头条号，后台私信我【前端】两个字，即可免费获取。

閱讀更多 前端技術教學分享 的文章

關鍵字: 功能 JavaScript 内置