Question

我在将jquery转换为javascript时遇到问题，因为我的应用程序要求不是使用jquery而只使用普通的html和javascript。我知道如何在Jquery中编写代码但无法在javascript中转换它。我的代码如下

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

如何将此代码段转换为javascript。

Answer 1

使用window.onload处理load-event

window

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>设置为last-child <body>而不将script包裹在任何load处理程序中。

Answer 2

使用DOMContentLoaded事件如下：

＆＃13;

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");
    });
  }
});

＆＃13;

Javascript与Jquery相当

2 个答案: