Convert jQuery to Javascript
I would like to avoid using jQuery everywhere for any reasons. This is my essential cheat sheet to convert jQuery to Javascript.
jQuery is a fast, small, and feature-rich Open Source JavaScript library to simplify HTML DOM tree traversal and manipulation, CSS animation, and Ajax.
Tree Traversal
Select Elements
$('.my-class a');
document.querySelectorAll('.my-class a');
Select first element
$('.my-class a').first();
document.querySelector('.my-class a');
Find child elements
$('.my-class a').find('div');
let nodes = document.querySelectorAll('.my-class a');
for (let i = 0; i < nodes.length; i++) {
if (nodes[i].querySelector('div')) {
// nodes[i].querySelector('div').innerHTML = 'Found !'
}
}
Select parent
$('.my-class a').parent();
document.querySelector('.my-class a').parentNode;
Class Attribute
Add class
$('.my-class').addClass('new-class');
document.querySelector('.my-class').classList.add('new-class');
Remove class
$('.my-class').removeClass('new-class');
document.querySelector('.my-class').classList.remove('new-class');
Toggle class
$('.my-class').toggleClass('new-class');
document.querySelector('.my-class').classList.toggle('new-class');
Has class
$('.my-class').hasClass('new-class');
document.querySelector('.my-class').classList.contains('new-class');
General Attributes
Get Attribute
$('.my-class').attr('href');
document.querySelector('.my-class').getAttribute('href');
Set Attribute
$('.my-class').attr('href', 'index.html');
document.querySelector('.my-class').getAttribute('href', 'index.html');
Remove Attribute
$('.my-class').removeAttr('href');
document.querySelector('.my-class').removeAttribute('href');
Get HTML content
$('.my-class').html();
document.querySelector('.my-class').innerHTML;
Set HTML content
$('.my-class').html('my html content');
document.querySelector('.my-class').innerHTML = 'my html content';
Get CSS style
$('.my-class').css('property-name');
document.querySelector('.my-class').style.{propertyName};
Set CSS style
$('.my-class').css('property-name', 'value');
document.querySelector('.my-class').style.{propertyName} = value;
Get height
$('.my-class').height();
document.querySelector('.my-class').offsetHeight;
// or
document.querySelector('.my-class').clientHeight;
DOM Insertion
Append a new child
let child = $('<div />');
$('.my-class').append(child);
let child = document.createElement("div");
document.querySelector('.my-class').appendChild(child);
Prepend a new child
let child = $('<div />');
$('.my-class').prepend(child);
let child = document.createElement("div");
let node = document.querySelector('.my-class');
node.insertBefore(child, node.firstChild);
Remove children
$('.my-class').empty();
document.querySelector('.my-class').replaceChildren();
Insert after an element
let child = $('<div />');
$('.my-class').after(child);
let child = document.createElement("div");
let node = document.querySelector('.my-class');
node.parentNode.insertBefore(child, node.nextSibling);
Insert before an element
let child = $('<div />');
$('.my-class').after(child);
let child = document.createElement("div");
let node = document.querySelector('.my-class');
node.parentNode.insertBefore(child, node);
Event Handler Attachment
Add Event Listener
$('.my-class').on('click', function () {
...
});
document.querySelectorAll('.my-class').forEach(function(item) {
item.addEventListener('click', event => {
...
})
})
Remove Event Listener
$('.my-class').off('click');
document.querySelector('.my-class').removeEventListener('click');
DOM Is Ready
$(function() {
// event handler
});
if (document.readyState === 'complete' || (document.readyState !== 'loading')) {
...
} else {
document.addEventListener('DOMContentLoaded', function() {
...
});
}
