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

更新日期: 2018-12-06 阅读次数: 1393 分类: 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);

爱评论不评论

近期节日

2019年09月20日 国际爱牙日
2019年09月21日 国际和平日
2019年09月22日 世界无车日
2019年09月23日 秋分
2019年09月23日 国际聋人节
2019年09月27日 世界旅游日
2019年10月01日 国庆节
2019年10月04日 世界动物日
2019年10月07日 重阳节
2019年10月08日 寒露
2019年10月09日 世界邮政日
2019年10月10日 辛亥革命纪念日
查看更多节日