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

为何要替换掉 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);