返璞归真:使用纯粹的 javascript 替换掉 jQuery

更新日期: 2018-12-06 阅读次数: 1872 分类: Javascript

为何要替换掉 jQuery

  • 一个简单的 element 选择,为何要引入一个 jQuery 依赖?
  • 我想尝试一下摆脱 jQuery 的依赖
  • Vuejs 中使用 jQuery 总感觉怪怪的

为何 jQuery 可以被替换掉

使用 jQuery 有一个很大的历史原因,那个年代,多种浏览器需要兼容,而 jQuery 是兼容的最好的。例如,ie6 很多功能函数跟 firefox / chrome 不一致,一行 js 代码就需要不得不多写几行来做兼容。用 jQuery 确实省心。

但是,时代不同了。目前手机浏览器完全没有 ie 的包袱,并且桌面平台 ie8 以下的用户凤毛麟角,甚至可以完全忽略不计。此时,jQuery 就完全可以退出历史舞台了。

我对 jQuery 的一些重度依赖

  • 选择器
  • 属性操作
  • Element 内文本的获取
  • Click 等事件的响应逻辑
  • Ajax 请求
  • Trigger event
  • Element Array 遍历处理内部 element

选择器 querySelector querySelectorAll

> document.querySelector("title")
<title>​javascript - jQuery vs document.querySelectorAll - Stack Overflow​</title>​

> document.querySelectorAll(".answer")
NodeList(12)

> document.querySelector("#wikiArticle")
<article id=​"wikiArticle">​…​</article>​

Element 内文本的获取

document.querySelector("title").textContent
"javascript - jQuery vs document.querySelectorAll - Stack Overflow"

textContent 只支持 IE9 以上,IE8 需兼容处理

属性操作

var element = document.querySelector("button"); 
element.setAttribute("disabled", "disabled");
element.removeAttribute("disabled");

Click 等事件的响应逻辑

// 所有浏览器都支持
mySelectedElement.onclick = function(e){
    //your handler here
}

// IE9 之后才支持
mySelectedElement.addEventListener("click",function(e){
   //your handler here
}, false);
领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年04月01日 愚人节
2020年04月02日 国际儿童图书日
2020年04月03日 寒食节
2020年04月04日 清明节
2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
查看更多节日