A Beginner’s Guide to jQuery

Jquery node

By Brandi Butler

Have you visited a website that has moving parts, updates data, or calculates something from a form? That’s thanks to JavaScript, the go-to language used to make web pages interactive. While JavaScript is immensely popular, it was invented in just 10 days back in the ’90s — and therefore can be a bit unwieldy. Luckily for us, jQuery was created to make the language much more accessible for developers to write.

So, what is jQuery? On one hand, it’s simply a library built on top of JavaScript to make programming JavaScript easier and more enjoyable for web developers. On the other hand, it’s used so ubiquitously in web programming that you can hardly have a conversation about JavaScript without mentioning it. jQuery simplifies front-end web development to such a degree that we’ve coined a separate term — “vanilla JavaScript” — to talk about JavaScript without jQuery.

How jQuery Makes JavaScript Easier to Use

You don’t need to understand how to read code to see that jQuery can greatly shorten and clarify JavaScript programming. Consider that the following code snippets from JavaScript and jQuery perform the exact same task of adding a class to a set of elements.

JavaScript:

Vanilla Javascript code to add a class to elements

jQuery:

Jquery to add a class to a set of elements

Computers can work very quickly, and they don’t care about the level of difficulty of the work they’re performing. Humans, however, care very much about how demanding their work is, and the more intricate the process, the longer it takes to accomplish. Programming skills command a high price in today’s job market, so anything that can improve a human coder’s efficiency is money in the bank. When we can create software more quickly and with fewer bugs, that’s good for everyone. That’s just one reason jQuery is so highly utilized.

More Reasons Why Developers Use jQuery

Aside from simplifying the use of JavaScript, jQuery has several other benefits, including:

  • Ensuring cross-browser compatibility. This means the code works the same whether someone views the page with Internet Explorer, Chrome, Firefox, or something else entirely. This saves programmers a ton of headaches!
  • Plugins that add extra features. Many well-maintained jQuery plugins are used around the web. Want an accordion-style menu? Checkout the jQueryUI plugin. Want a slideshow, carousel, or neat text effect? Look for a plugin before starting from scratch! The community surrounding jQuery is a big part of what makes it great.
  • Making AJAX calls. These are used to make a website perform more elegantly. They provide seamless transitions and timely updates to a page instead of having to refresh the page each time new information is received. For example, imagine you’re reading a news article on a website with a weather widget. If the page was refreshed entirely every time the temperature changed, then reading articles on that site would get annoying very quickly. AJAX allows us to avoid these ugly refreshes by performing the work in the background. This allows our hypothetical weather app to update the temperature without interrupting your reading experience. This functionality does exist in vanilla JavaScript, but it’s quite complex compared to the elegant solution jQuery offers.
  • It doesn’t affect page-load time. jQuery is a small library, so it doesn’t weigh down a web page or take a long time to load. We can get an even smaller version by “minifying” the code — this is a compressed version that isn’t readable by humans. Many large corporations, such as Google, Microsoft, and Yahoo, have content delivery networks that host different versions of jQuery and commonly used jQuery plugins. This means you can use jQuery by adding a link to the jQuery library hosted on these companies’ servers, so it doesn’t even take up room on your own computer.

jQuery at General Assembly

Front-end web development is a natural entry point into the world of programming, and jQuery is one of the most beginner-friendly languages. HTML and CSS form the bones and skin of a website, but JavaScript and jQuery make it come to life with movement and interaction.

In General Assembly’s part-time Front-End Web Development course, students learn the basics of JavaScript and jQuery, along with HTML and CSS, to build interactive custom websites. For a deeper dive into coding, our full-time Web Development Immersive course, on campus and remotely, trains students to be job-ready full-stack web developers, equipped with both front- and back-end skills.

Meet Our Expert

Brandi Butler is a Web Development Immersive instructor at GA’s Seattle campus. She has degrees in computer science and psychology from Western Washington University, and served as a software engineer at PayScale, working on both the front and back ends of the company’s website. In her spare time, Brandi enjoys playing tennis, singing karaoke, traveling, and drinking wine.