美文网首页前端学习
尽可能的使用原生js,而不是jQuery

尽可能的使用原生js,而不是jQuery

作者: 1194b60087a9 | 来源:发表于2019-04-20 14:20 被阅读0次

不可否认,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,即可免费获取。

相关文章

  • 尽可能的使用原生js,而不是jQuery

    不可否认,jQuery是一款非常优秀的JavaScript库,极大的提高了前端开发效率。 有利就有弊,过度的依赖j...

  • 尽可能的使用原生js,而不是jQuery

    不可否认,jQuery是一款非常优秀的JavaScript库,极大的提高了前端开发效率。 有利就有弊,过度的依赖j...

  • jquery基础

    1、首先介绍一下jquery jquery是JS的一个库,使用广泛。开发中我们常用jquery库,而很少用原生的J...

  • 20、jQuery 事件机制

    20、jQuery 事件机制 原生js事件与jQuery事件: (1)用原生的js给div注册事件 原生js注册相...

  • jquery选择器总结

    什么是jquery? Jquery就是对原生的js代码的封装。所以在使用jquery的时候需要导入jquery的文...

  • 00-jQuery初识

    什么是jQuery jQuery是一个JavaScript库 jQuery可以简化原生JS的操作 对比原生JS,写...

  • AJAX实现

    原生js jquery

  • 使用原生js实现复制对象及扩展

    使用原生js实现复制对象,扩展对象,类似JQuery中的extend()方法

  • jQuery

    jQuery简介 jQuery其实就是原生JS封装之后的一种方法。比起原生JS的操作要方便许多,原生JS的DOM操...

  • jQuery简介

    什么是jQuery? jQuery其实就是原生JS封装之后的一种方法。比起原生JS的操作要方便许多,原生JS的DO...

网友评论

    本文标题:尽可能的使用原生js,而不是jQuery

    本文链接:https://www.haomeiwen.com/subject/aaakgqtx.html