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

更新日期: 2018-12-06 阅读次数: 1806 分类: 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年02月24日 第三世界青年日
2020年02月24日 龙抬头
2020年02月28日 世界居住条件调查日
2020年03月01日 国际海豹日
2020年03月03日 全国爱耳日
2020年03月05日 学雷锋日
2020年03月05日 惊蛰
2020年03月08日 三八妇女节
2020年03月12日 植树节
2020年03月14日 白色情人节
2020年03月15日 消费者权益日
2020年03月17日 国际航海日
查看更多节日