| Select by ID |
$('#id') |
document.getElementById('id') |
| Select by class |
$('.class') |
document.querySelector('.class') |
| Select all tags |
$('div') |
document.querySelectorAll('div') |
| DOM ready |
$(document).ready(function() { ... }) |
document.addEventListener('DOMContentLoaded', function() { ... }) |
| Click event |
$('#btn').on('click', function() { ... }) |
document.getElementById('btn').addEventListener('click', function() { ... }) |
| Show element |
$('#el').show() |
el.style.display = 'block' |
| Hide element |
$('#el').hide() |
el.style.display = 'none' |
| Add class |
$('#el').addClass('active') |
el.classList.add('active') |
| Remove class |
$('#el').removeClass('active') |
el.classList.remove('active') |
| Toggle class |
$('#el').toggleClass('active') |
el.classList.toggle('active') |
| Get text |
$('#el').text() |
el.textContent |
| Set text |
$('#el').text('Hi') |
el.textContent = 'Hi' |
| Get HTML |
$('#el').html() |
el.innerHTML |
| Set HTML |
$('#el').html('<b>Hi</b>') |
el.innerHTML = '<b>Hi</b>' |
| Get input value |
$('#input').val() |
document.getElementById('input').value |
| Set input value |
$('#input').val('hello') |
document.getElementById('input').value = 'hello' |
| Loop through elements |
$('.item').each(function(i, el) { ... }) |
document.querySelectorAll('.item').forEach((el, i) => { ... }) |
| AJAX request |
$.ajax({ url: '/api', method: 'GET', success: fn }) |
fetch('/api').then(r => r.json()).then(data => console.log(data)) |
