jQuery vs Vanilla JavaScript: Front-End Design and the DOM

JQuery has its many benefits. It’s  shorter for ‘most things’ and it has powerful animations and looping methods. Most of all, it just saves developers time. 

 Here are some examples of powerful methods in jQuery:


.each
Fadein()
Animate()
Prepend()
append()


There are many more methods that manipulate html and css. Animate and toggle through attributes, but I recommend to .css libraries and toggle on and off the css. 

Plus, there are a few commonly used methods that are shorter in JavaScript, see them here: http://youmightnotneedjquery.com/ .

Cons of jQuery: jQuery is slower. In order to speed it up, I recommend linking it to a CDN, using a minified version, and checking your speed at JPerf.com. JQuery overrides objects and their relationship to the DOM. Meaning, one cannot use DOM methods for jQuery objects such as .value or innerHTML. Instead, one has to stick to the jQuery library unless they pull the value out with a Get method or attaching an index 0 to pull the object out. However, this dirty trick doesn’t allow one to use the DOM Api with the object. In other words, the object is neither an object of the DOM or jQuery. It is in weird middle ground state.

Furthermore, jQuery does not work with some built-in Browser apis, such as canvas. If you want to keep your Dom APIs and have powerful style, I’d strongly recommend using a CSS library such as Animate.css. Simply use vanilla js to add and remove classes to create animations for non-jQuery objects. It’s not worth your time to use a jQuery Hybrid such as Jcanvas

Suggestion: Use jQuery if you want to keep your object in jQuery. Thankfully the jQuery library and its numerous plugins can do most of what the DOM does with a few more bells and whistles.