如何找到与 jquery 代码等效的 javascript？

Question

I've got a problem on a WordPress site. A plugin is going to crash when I include jQuery on the site. That's why I'd like to include simple javascript code. However the problem is that I don't know its Javascript equivalent.

$(document).ready(function() {
  $('#sd').change(function() {
    var n = new Date(this.value);
    n.setDate(n.getDate() + 1);

    var day = ("0" + n.getDate()).slice(-2);
    var month = ("0" + (n.getMonth() + 1)).slice(-2);
    var today = n.getFullYear() + "-" + (month) + "-" + (day);
    $('#ed').attr('min', today);
  });
});

the error log (wordpress):

Uncaught TypeError: r.getClientRects is not a function
    at w.fn.init.offset (jquery-3.3.1.min.js:2)
    at Object.getWithinInfo (position.min.js?ver=1.11.4:11)
    at w.fn.init.a.fn.position (position.min.js?ver=1.11.4:11)
    at w.fn.init.reposition (pum-site-scripts.js?…263704&ver=1.7.29:7)
    at w.fn.init.e.fn.popmake (pum-site-scripts.js?…263704&ver=1.7.29:7)
    at w.fn.init.open (pum-site-scripts.js?…263704&ver=1.7.29:7)
    at w.fn.init.e.fn.popmake (pum-site-scripts.js?…263704&ver=1.7.29:7)
    at HTMLAnchorElement.<anonymous> (pum-site-scripts.js?…263704&ver=1.7.29:8)
    at HTMLDocument.dispatch (jquery-3.3.1.min.js:2)
    at HTMLDocument.y.handle (jquery-3.3.1.min.js:2)

Answer 1

The JS equivalent to $(selector) is document.querySelector(selector) or document.querySelectorAll(selector) , depending on whether you want just the first match or all the matches. In your code, since you're selecting an ID, you only need the first match.

The plain JS method for adding an event handler is .addEventListener .

The equivalent to .attr() is .setAttribute() .

The rest of the code is plain JS, not jQuery.

 window.addEventListener("DOMContentReady", function() { document.querySelector("#sd").addEventListener("change", function() { var n = new Date(this.value); n.setDate(n.getDate() + 1); var day = ("0" + n.getDate()).slice(-2); var month = ("0" + (n.getMonth() + 1)).slice(-2); var today = n.getFullYear() + "-" + (month) + "-" + (day); document.querySelector("#ed").setAttribute('min', today); }); });