不可否认,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到各种框架,帮助所有想要学好前端的同学,学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流Q群:296212562,即可免费获取。
网友评论