Jquery 的 Javascript 等价物答案

【问题标题】：Javascript Equivalent of JqueryJquery 的 Javascript 等价物
【发布时间】：2016-08-30 21:30:12
【问题描述】：

我在将 jquery 转换为 javascript 时遇到问题，因为我的应用程序要求不使用 jquery，并且只能使用纯 html 和 javascript。我知道如何在 Jquery 中编写代码，但无法在 javascript 中进行转换。我的代码如下

 $(document).ready(function () {
  $('input[type="button"').click(function () {
     $(this).prop('disabled','disabled');
   });
 });

如何将此代码 sn-p 转换为 javascript。

【问题讨论】：

请注意，即使您在一般意义上使用 jQuery，$(this).prop('disabled','disabled'); 也过于 jQuery：说 this.disabled=true 更有效并且更易于阅读。
进一步了解@nnnnnn 所说的-即使您打算使用jQuery，您也应该将属性设置为true 而不是'disabled'..记住.prop 将属性的值设置为一个 DOM 元素，而不是按照 .attr 修改 HTML 属性

标签： javascript jquery

【解决方案1】：

使用window.onload 处理window 上的load-event
document.querySelectorAll 选择文档中与指定选择器组匹配的元素列表。
[].forEach.call 遍历选定的元素。
addEventListener 在元素上注册指定的监听器。

window.onload = function() {
  var elems = document.querySelectorAll('input[type="button"]');
  [].forEach.call(elems, function(el) {
    el.addEventListener('click', function() {
      this.disabled = true;
    });
  });
};

编辑： 可以使用document.addEventListener('DOMContentLoaded', function () {}); 代替window.onload，但也可以考虑使用Browser compatibility。另一个更简单的替代方法是将您的<script> 放置为<body> 的last-child，而不将您的script 包装在任何load 处理程序中。

【讨论】：

+1 您可以建议使用document.addEventListener("DOMContentLoaded", function(event){ }); 而不是window.onload。因为$(document).ready和window.onload完全不同
@RajaprabhuAravindasamy，这是我首先想到的，但有人建议我考虑Browser compatibility
无论是窗口加载还是 DOMContentLoaded 都不是 jQuery 的 ready() 处理程序的直接替代品，但至少使用 load 事件可以避免为了支持旧版浏览器而跳槽。
@Andy, Filip 确实编辑了它。谢谢 :)
@Andy，这是后来在question.. 中添加的。已更新答案..

【解决方案2】：

使用DOMContentLoaded事件如下：

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
  var btns = document.querySelectorAll("input[type=button]");
  for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
      //Do stuff
      console.log("button" + i +  "clicked");
    });
  }
});

【讨论】：

querySelector 将只选择一个元素！
节点集合没有forEach 方法。
$(this).prop('disabled','disabled'); 部分呢？