Plain JavaScript vs. jQuery

Accessing elements

// JavaScript
// .querySelector() works for classes, ids and tags
document.querySelector('.link') // by class
document.querySelector('#menu') // by ID
document.querySelector('body') // by tag

// other methods
document.getElementById('#el')
document.getElementByClassname('.el')

// jQuery
$('.link') // by class
$('#menu') // by ID
$('body') // tag

Event handlers

// JavaScript
$el.addEvenetListener('click', function() { })

// jQuery
// .on() is the event handler for all kinds of events
$el.on('click', function() { })

// you also have functions to directly target specific events
$el.click(function() { })
$el.blur(function() { })
$el.change(function() { })
$el.dblclick(function() { })

Adding/Removing/Toggling CSS classes

// JavaScript
$el.classList.toggleClass('class')
$el.classList.addClass('class', 'anotherClass')
$el.classList.removeClass('class', 'anotherClass')

// jQuery
$el.toggleClass('class')
$el.addClass('class anotherClass')
$el.removeClass('class anotherClass')