Plain JavaScript vs. jQuery

1// JavaScript
2// .querySelector() works for classes, ids and tags
3document.querySelector('.link') // by class
4document.querySelector('#menu') // by ID
5document.querySelector('body') // by tag
6
7// other methods
8document.getElementById('#el')
9document.getElementByClassname('.el')

1// jQuery
2$('.link') // by class
3$('#menu') // by ID
4$('body') // tag

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

1// jQuery
2// .on() is the event handler for all kinds of events
3$el.on('click', function() { })
4
5// you also have functions to directly target specific events
6$el.click(function() { })
7$el.blur(function() { })
8$el.change(function() { })
9$el.dblclick(function() { })

1// JavaScript
2$el.classList.toggleClass('class')
3$el.classList.addClass('class', 'anotherClass')
4$el.classList.removeClass('class', 'anotherClass')

1// jQuery
2$el.toggleClass('class')
3$el.addClass('class anotherClass')
4$el.removeClass('class anotherClass')