如何在html中直接给某个按钮置灰（样式、去除绑定事件）, querySelector与jquery selector的不同之处

今天接到了一个需求要置灰某个暂时停用的按钮，突然间想到了一个特别投机取巧的方式！

一般的做法是，找到对应的CSS和JS文件，然后更改和注释掉对应的元素和事件，但有时候CSS和JS都被压缩成一坨了，不是非常好搞，所以最简单的方法就是直接在html里改动。

样式可以用“style=” ”的方式直接加载标签中。那事件怎么做呢？

一个当然的思路是使用第三方库，比如jquery直接off掉该事件，但要考虑到script的位置通常位于body的底部，而html文件中的< script>标签中的代码或src引用的js文件中的代码是同步加载和执行的，因此，如果直接在dom后写

<div id="demo"></div>
......
<script type="text/javascript">
  $(demo).off('click')
</script>
<script src='zepto.min.js'></script> 

会报错$为undefined。

如果将script标签写在最底下，则要小心，jquery等第三方库的off只对用该库添加的事件才有效（起码在版本jQuery v3.2.1的slim）上是这样。即

demo.addEventListener('click',function(){
    alert('2')
},false)
$(demo).off('click')

此时点击demo，仍然会报2。该事件并没有被移除。

然而，有一个巨简单的方法，可以轻松做到这一切。

无论是绑定事件还是进行dom操作，第一步就是要找到该dom元素。那么，只要改掉dom的queryselector标签，不就行了？~！！

比如，click事件是这么写的：

$('.wawa').click(wawahandler) // 这么写是没问题的

那只要把对应的.wawa元素的class改成.baba就可以轻松解决了。。。。毫无问题！绝对适用！

此处有坑！

如果你想直接用原生js来获取wawa元素，你会惊喜地发现

document.body.querySelector('.wawa').addEventListener(...)

//
console.error('Uncaught TypeError: Cannot read property 'addEventListener' of null')

也就是说，类似jq这样的库会有一个防错机制，自己init一个对象出来，而不会报错，只是找不到元素，不会执行而已，但原生就会非常耿直地报错了。

---

当然，如果除了这个事件要用到该selector，其他的操作也要拿到它的引用，就比较操蛋了，只能老老实实地在js里改。。。。

但对一些简单的要求，完全通过直接改标签轻松做到~~~别忘了调整好对应的所有css样式，不然stylesheet也会找不到这个元素的。。