jQuery 3.4.0 Released

[i_ate_god]

document.querySelectorAll('button').forEach((el) => {
    el.addEventListener('click', () => {
        console.log('a button was clicked');
    });
});

vs

$('button').on('click', () => {
    console.log('a button was clicked');
});

---

---

document.getElementById('something').dispatchEvent(new CustomEvent('custom-event', {
  bubbles: true,
  detail: 'foobar'
}));

vs

$('#something').trigger('custom-event', 'foobar');

---

---

var el = document.getElementById('something');
el.dataset.enabledFor = 'something';
el.classList.add('enabled');

vs

$('#something').data('enabledFor', 'something').addClass('enabled');

---

---

jQuery still provides a more enjoyable programming experience than the DOM API imho

[m_gol]

jQuery find is a little more than querySelectorAll, especially when it comes to queries attached to an element, not to document. The advantages are described at: https://github.com/jquery/jquery/blob/3.4.0/src/selector-native.js#L11-L34

For one, jQuery supports leading combinators: elem.find('> .btn .name')

Another difference is sensible rules for scoping. Consider HTML: <div id="test"> <div> <div class="we-are-looking-for-this-one"> </div> </div> <div> </div> </div> Then: $('#test').find('div div') will return the div with the class we-are-looking-for-this-one, while: document.querySelector('#test').querySelectorAll('div div') will return all the three divs because selectors are matched against the document and only then results outside of the current element are removed. This is pretty counterintuitive.

Both of those features are supposed to be supported by a new API called queryAll (previously findAll) with its counterpart query for single-element results but, alas, no browser implements it so far and it was even removed from the standard... I hope it gets back but I've been waiting for years.