"You Don't Need jQuery" is based on You Might Not Need jQuery, but is updated to reflect new APIs, new methodologies, and better, more simplified examples.
10+ years after jQuery's initial release, the browser landscape has drastically changed.
The purpose of this is not to tell you that you shouldn't use jQuery, but rather to re-educate you on what exactly jQuery is useful for. The DOM, and other browser APIs, have been much better standardized, and many of the previous pitfalls of compatibility no longer exist. While jQuery is still useful, it is less so than before, and it's important for you--the developer--to be familiar with the underlying APIs that libraries are abstracting.
A lot of the new APIs and methodologies are much easier to understand, and are sometimes more coherent than those in libraries like jQuery.
[...] Please take a moment to consider if you actually need jQuery as a dependency; maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more than what the browser ships with.
[...] Some developers believe that jQuery is protecting us from a great demon of browser incompatibility when, in truth, [modern] browsers are pretty easy to deal with on their own.
- YouMightNotNeedjQuery.com
Most of the APIs that I'll be showing can be polyfilled, meaning that if the browser is modern, and supports the APIs, it will use those, but if the browser is legacy, it will update the APIs with the new features, and allow all browsers to work.
Modern features that can be polyfilled for legacy browsers:
- Promise
- fetch
- classList
- Array.from
- Object.assign
- More...
Although a couple of the modern examples have more characters in their code, they should not deter you from trying to understand these new APIs. Read carefully, and try to understand what the code is doing so that you can better reflect on whether or not you should use a library.
jQuery
$.ajax({
url: '/path/to/json',
success: data => {
// use 'data' here
},
error: error => {
// use 'error' here
}
});Modern | Using the fetch API and Promises
fetch('/path/to/json')
.then(response => response.json())
.then(data => {
// use 'data' here
})
.catch(error => {
// use 'error' here
});New | Using async/await
try {
const response = await fetch('/path/to/json');
const data = await response.json();
// use 'data' here
}
catch (error) {
// use 'error' here
}jQuery
$.ajax({
url: '/path/to/whatever',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(myObjectHere),
success: data => {
// use 'data' here
},
error: error => {
// use 'error' here
}
});Modern | Using the fetch API and Promises
fetch('/path/to/whatever', {
method: 'POST',
headers: { 'content-type': 'application/json' },
body: JSON.stringify(myObjectHere)
})
.then(response => response.json())
.then(data => {
// use 'data' here
})
.catch(error => {
// use 'error' here
});New | Using async/await
try {
const response = await fetch('/path/to/whatever', {
method: 'POST',
headers: { 'content-type': 'application/json' },
body: JSON.stringify(myObjectHere)
});
const data = await response.json();
// use 'data' here
}
catch (error) {
// use 'error' here
}via CSS selectors
jQuery
const myElement = $('.foo');Modern | Using querySelector or querySelectorAll
const myElement = document.querySelector('.foo');
// or
const myMultipleElements = document.querySelectorAll('.foo');add | remove | toggle
jQuery
$(myElement).addClass('foo');
$(myElement).removeClass('foo');
$(myElement).toggleClass('foo');Modern | Using the classList API
myElement.classList.add('foo');
myElement.classList.remove('foo');
myElement.classList.toggle('foo');get | set
jQuery
const foo = $(myElement).attr('foo');
$(myElement).attr('bar', foo);Modern
const foo = myElement.getAttribute('foo');
myElement.setAttribute('bar', foo);get | set
jQuery
const value = $(myElement).val();
$(myElement).val('foo');Modern
const value = myElement.value;
myElement.value = 'foo';jQuery
$(myElement).text('lorem ispum');
$(myElement).html('<span>lorem ipsum</span>');
$(myElement).append('<span>foo bar</span>');Modern | Using native properties and insertAdjacentHTML
myElement.textContent = 'lorem ipsum';
myElement.innerHTML = '<span>lorem ipsum</span>';
myElement.insertAdjacentHTML('beforeend', '<span>foo bar</span>');jQuery
$(myElement).data('foo', 'bar');Modern | Using the dataset API
myElement.dataset.foo = 'bar';jQuery
$(myElement).css({ background: 'red', color: 'white' });Modern
Object.assign(myElement.style, { background: 'red', color: 'white' });
// or
myElement.style.background = 'red';
myElement.style.color = 'white';append | prepend | remove
jQuery
$(myElement).append(anotherElement);
$(myElement).prepend(anotherElement);
$(myElement).remove();Modern | Using remove
myElement.appendChild(anotherElement);
myElement.insertBefore(anotherElement, myElement.firstChild);
myElement.remove();New | Using append and prepend as well
myElement.append(anotherElement);
myElement.prepend(anotherElement);
myElement.remove();add | remove
jQuery
$(myElement).on('click', myEventHandler);
$(myElement).off('click', myEventHandler);Modern | Using addEventListener and removeEventListener
myElement.addEventListener('click', myEventHandler);
myElement.removeEventListener('click', myEventHandler);jQuery
$(myMultipleElements).filter('.some-class-here');Modern
Array.from(myMultipleElements).filter(x => x.classList.contains('some-class-here'));from single | from multiple
jQuery
const x = $(myElement).find('.foo');
const y = $(myMultipleElements).find('.foo');Modern | (This one is probably not a great example...)
const x = myElement.querySelectorAll('.foo');
const y = Array.from(myMultipleElements, x => Array.from(x.querySelectorAll('.foo'))).reduce((a, b) => a.concat(b));New | Using flat
const x = myElement.querySelectorAll('.foo');
const y = Array.from(myMultipleElements, x => Array.from(x.querySelectorAll('.foo'))).flat();jQuery
$(myMultipleElements).each((i, x) => {
// use 'x' here
});Modern
Array.from(myMultipleElements).forEach((x, i) => {
// use 'x' here
});New | Using for..of and entries
for (const [i, x] of Array.from(myMultipleElements).entries()) {
// use 'x' here
}jQuery
const parent = $(myElement).parent();Modern
const parent = myElement.parentElement;jQuery
const parents = $(myMultipleElements).parents('.foo');Modern | Using closest
const parents = Array.from(myMultipleElements, x => x.closest('.foo'));jQuery
const children = $(myElement).children();Modern
const children = myElement.children;jQuery
const siblings = $(myElement).siblings();Modern
const siblings = Array.from(myElement.parentNode.children).filter(x => x !== myElement);jQuery
const next = $(myElement).next();
const prev = $(myElement).prev();Modern
const next = myElement.nextElementSibling;
const prev = myElement.previousElementSibling;jQuery
$(myElement).hide();
$(myElement).show();Modern
myElement.hidden = true;
myElement.hidden = false;This repo of knowledge is a work in progress; if you'd like to contribute, please submit an issue or a pull request.