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

更新日期: 2018-12-06 阅读次数: 2029 分类: 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);
领取618阿里云/腾讯云服务器优惠券

关于作者

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

相关文章

爱评论不评论

近期节日

2020年07月06日 国际接吻日
2020年07月06日 小暑
2020年07月07日 抗日战争纪念日
2020年07月11日 世界人口日
2020年07月22日 大暑
2020年07月30日 非洲妇女日
2020年08月01日 八一建军节
2020年08月06日 国际电影节
2020年08月07日 立秋
2020年08月15日 日本投降日
2020年08月22日 处暑
2020年08月25日 七夕
查看更多节日