Five Things (Almost) That You Don’t Need jQuery For

You might be in the habit of using jQuery to perform quick and relatively simple tasks on the front-end of the stack. But especially nowadays, you don’t need jQuery for many everyday web dev tasks. Vanilla Javascript will do the job fine, and with less overhead.

The Problem with Using JQuery

There are a few things you need to do to set up jQuery on a webpage. First, add a script reference to jQuery in the page head. Then make sure that script src points to a CDN or a copy of the jQuery library living on your company’s server. Finally, write the script and test to make sure jQuery has loaded.

Easy, right? But what if the CDN goes down? What if the company server coughs up the script, or, more likely, it clashes with another copy of jQuery somewhere? One of the most stressful parts of web development is unforeseen deployment issues, and you just want to code, right?

Nowadays you don’t need jQuery for a lot of tasks. Javascript does these jobs just fine.

The thing is, nowadays you don’t need jQuery for a lot of tasks. Javascript does these jobs just fine, and with less overhead. Here are five things you can do in Javascript alone, without the help of jQuery:

Selecting an Element

Selecting an element is one of the most fundamental things we use jQuery for. It’s pretty simple. In jQuery:

That dollar sign is called syntatic sugar, and it’s supposed to make reading a language easier. But you really don’t need jQuery to do this. You can just as easily write this expression in Javascript:

Changing CSS Styles

You can directly change the CSS styles of elements with jQuery, right? It’s something you might do like so:

See the Pen aGayEx by Float Nine (@floatnine) on CodePen.

But why use an external library when you can do it with Javascript:

See the Pen vjzJoy by Float Nine (@floatnine) on CodePen.

Adding a Class

jQuery makes this easy! Like this:

Why would you do it any other way? Because you don’t need jQuery to do it. It’s just as easy in Javascript:

 Adding a Click Event

This is one thing that jQuery certainly does better than Javascript, right?

See the Pen pVOWwB by Float Nine (@floatnine) on CodePen.

Again, NO. Why not just do this with Javascript:

See the Pen odPGyw by Float Nine (@floatnine) on CodePen.

Wrapping Your Script in a $(document).ready Function

Okay, surely this is a job for jQuery. The $(document).ready wrapper ensures your code is scoped and gets executed after the page has loaded. For example:

See the Pen ELebaW by Float Nine (@floatnine) on CodePen.

This codepen doesn’t really do anything, but if there were code inside the $(document).ready function, you could be assured that it would execute after all of your HTML elements loaded. That’s a handy feature, as it takes time for your browser to render each element on the page, and if your script is manipulating elements, you want to make sure they’re there. Well, you don’t need jQuery for this either. Not exactly, that is…

Here is one way to try to mimic $(document).ready with simple Javascript:

See the Pen VxGrex by Float Nine (@floatnine) on CodePen.

This will do the trick in most browsers, but not IE8. Increasingly, that’s not a problem anymore, as a lot of companies are phasing out support for anything before IE9, or IE10. If you must support IE8, you can do something like this:

See the Pen aGaVmy by Float Nine (@floatnine) on CodePen.

By putting your script after all HTML elements (other than the closing body and html tag) you are safeguarding against the browser not having loaded the elements the script uses. The generic function wrapper makes sure the script fires without prompt. This isn’t perfect, either, as there are times when a browser renders some objects or elements after the initial page has loaded. But it’s a pretty good alternative, and will work fine most of the time.

But this last example brings up a greater point. We’ve gotten into territory where the solution to the problem has gotten a little complicated. Do we use jQuery here, or do we try to achieve the same with vanilla Javascript? Those kinds of decisions are ultimately up to you, and you should get in the habit of knowing what you do and you don’t need jQuery for. What is important is not that you make flawless decisions every time, but that you know the benefits and drawbacks of the different routes, and stand behind your decisions accordingly.