Tech 101: What is jQuery?
Plug in to what jQuery has to offer.
Plug in to what jQuery has to offer.
If you’re interested in starting a high-paying, flexible career as a web developer, then one of the first programming languages you need to learn is JavaScript—a coding language used to build dynamic web content like animated features, interactive forms, and scrolling videos. But if you’re learning JavaScript (or “JS” as it’s abbreviated in tech), you also need to familiarize yourself with a JS-related tool called jQuery.
Table of Contents
- What is jQuery?
- JavaScript vs jQuery?
- How jQuery Works
- Pros and Cons of using jQuery
- jQuery Plugins
- Ready to Learn JavaScript and jQuery?
Is Tech Right For you? Take Our 3-Minute Quiz!
You Will Learn:
☑️ If a career in tech is right for you
☑️ What tech careers fit your strengths
☑️ What skills you need to reach your goals
What is jQuery?
TL;DR: jQuery is a collection of pre-written JavaScript code (known as a JavaScript library) that you can add to your own coding projects.
If you’re new to coding, this might sound like cheating. Shouldn’t you be writing your own code? The reality is, for certain routine coding tasks, there’s absolutely no point in reinventing the wheel. You probably wouldn’t forge your own nails when building a house, right? jQuery allows web developers to plug routine JavaScript features into a web page so they can spend more time focusing on complicated features that are unique to their site.
Pictured above: An example of an accordion-style dropdown menu built with jQuery
JavaScript vs. jQuery
JavaScript and jQuery are mentioned so interchangeably that it can be confusing to separate the two. Just remember: JavaScript is a standalone programming language while jQuery is a collection of JavaScript code, not its own language.
For a quick visual of the difference—and to show exactly what jQuery is used for—consider the following. Let’s say you want users to receive a “thanks for signing up” confirmation message when they add themselves to your website’s email list. Hand-coding that function using JavaScript would look something like this:
window.onload = initAll;
function initAll() {
document.getElementById(“submit”).onclick = submitMessage;
}
function submitMessage() {
var greeting = document.getElementById(“name”).getAttribute(“value”);
document.getElementById(“headline”).innerHTML = “Thank you for joining our email list,” + greeting;
return false;
}
That’s a lot of code for such a basic function. However, by using jQuery code snippets, you’ll end up simplifying it into something along the lines of this jQuery example:
$(“#submit”).click(function () {
var greeting = $(“#name”).val();
$(“#headline”).html(“Thank you for joining our email list, ” + greeting);
return false;
});
This (much more manageable) jQuery script sends a request to the jQuery library, which you can either install on your own website or use via Google by including a jQuery link to Google’s hosted libraries in your code:
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
</head>
jQuery then responds to your request and performs the requested function for your user. Either approach—JavaScript or jQuery—will produce a “thank you” message, but a jQuery script will get you there a lot faster. Plus, you’ll be able to reuse this jQuery function whenever the same need arises in this or any other web development projects you work on.
Pictured above: An example of a tabs menu built with jQuery
Is Tech Right For you? Take Our 3-Minute Quiz!
You Will Learn:
☑️ If a career in tech is right for you
☑️ What tech careers fit your strengths
☑️ What skills you need to reach your goals
How jQuery Works
When you open a webpage and something ‘cool’ happens like an image fades in, a menu slides down, or the text updates without a full page refresh, there’s a good chance jQuery is behind it. It’s not magic, but it does make JavaScript easier to handle, and that’s why it became so popular. Think of jQuery as your toolbox for making web pages interactive and dynamic without having to write long, tedious JavaScript code (like in our example above).
So, how does jQuery actually work?
1. Selecting Elements
The first thing you’ll notice in jQuery is the $ (dollar sign) symbol. It’s shorthand for the jQuery function itself, so when you see it in JavaScript, you know you’re dealing with jQuery. You use the $ to “grab” things on your page—HTML elements, to be specific. And jQuery makes it incredibly easy to select elements, thanks to CSS-style selectors.
For example:
- $(“p”) grabs all the <p> (paragraph) elements.
- $(“.class”)targets all elements with the class “myClass.”
2. Performing Actions
Once you’ve selected an element (or a group of elements), you can do pretty much anything to them using jQuery’s methods. For example, you can use:
- .html() to set or return the HTML content inside an element.
- .text() to get or set the text content.
- .addClass() to add a CSS class.
- .css() to change an element’s styles.
jQuery also lets you chain methods together so you can perform multiple actions in a single line of code. So, instead of writing separate lines to add a class and then lines to change the background color, you could chain those actions together.
3. Simplifying JavaScript Tasks
When you have access to jQuery, you have access to a suite of tools that simplify common JavaScript tasks like handling user events, animating objects, and more.
Say you’re event handling user actions like clicks, hovering, or form submissions. If you wanted to trigger a function when someone clicks a button, normally, you’d attach event listeners with something like addEventListener() in JavaScript. With jQuery, you could wrap all that up into a cleaner method like .click(), .hover(), or .submit().
If you want to make your webpage look more dynamic, jQuery has built-in animations that can:
- Fade elements in and out .fadeIn()
- Slide elements up and down .slideUp()
- Run custom animations .animate()
And this is all without the need to dive into complex CSS animations or other JavaScript libraries.
jQuery also simplifies AJAX (Asynchronous JavaScript and XML) calls. In a nutshell, AJAX has to do with pulling content from a server and loading it on a webpage so the things on a page change without a user reloading the page themselves. This means your users won’t notice a thing as the webpage grabs new content from the server. Before, the setup was more complex with XMLHttpRequest, but with jQuery, developers can use methods like .ajax() and .get().
Ultimately, jQuery is meant to make it easier for web developers to get things done faster and with less code.
Pros and Cons of Using jQuery
For web developers who’ve built a website in the last decade, you’ve probably used jQuery. And for those of us who’ve simply used a website, it’s almost guaranteed that we’ve experienced it. Some estimate that roughly 75% of all websites use jQuery.
To understand jQuery, it’s helpful to understand why developers use it, and why some might prefer newer JavaScript frameworks.
Pro: Simplified Syntax
JavaScript isn’t known to be an extremely difficult programming language, but it can sometimes feel tricky, especially for DOM (Document Object Model) manipulation or AJAX calls. Enter: jQuery. By offering cleaner, more intuitive syntax, jQuery allows you to perform tasks with fewer lines of code and less mental gymnastics. Whether it’s selecting an element or handling an event, jQuery makes things faster. This is a huge upside for both beginners and experienced developers who want efficiency without getting tied down with wordy syntax.
Con: File Size and Performance Overhead
Every time you add jQuery to your project, you’re tacking on extra bytes. Sure, it’s only a few hundred KB, but those small additions add up, especially if you have multiple libraries. Additionally, jQuery adds an abstraction layer on top of JavaScript, which can mean more processing for the browser. Simply put, it makes tasks like DOM manipulation easier but at a cost. That extra weight can slow down page load times, which is a pain for users with slower internet or those on mobile networks. For larger or more complex apps, barebones JavaScript is often faster and more efficient, especially when every millisecond counts for performance.
Pro: Cross-Browser Compatibility
Remember the days of tweaking JavaScript to make it work across different browsers? If you don’t, consider yourself lucky and say “thank you” to things like jQuery. It smooths out the inconsistencies between browsers so your code runs seamlessly on everything from Chrome to Firefox. Instead of writing custom solutions for every browser, jQuery automatically handles most of the issues for you. This saves you precious time and energy so you can focus more on building features than dealing with browser quirks.
Con: Dependency
When you use jQuery, you’re introducing a dependency into your project. If the library doesn’t load for any reason—say, a CDN (Content Delivery Network) issue or an update that breaks compatibility—your page could break, too. It’s a bit like adding a crutch that could leave you and your web page limping if it fails.
Pro: Large Library of Plugins
One of jQuery’s biggest pros is its huge library of plugins. These prebuilt solutions solve problems so you can skip the development work and jump straight into implementation. Need a date picker? There’s a plugin for that. Do you want to add a lightbox feature? There’s a plugin for that, too. With so many available options, you can improve your website without reinventing the wheel, helping you save time and add dynamic features without the headache of doing the work yourself.
Con: Learning Curve
While jQuery simplifies things, that ease can actually block your understanding of core JavaScript. If you’re always leaning on jQuery’s syntax and shortcuts, you’ll likely miss out on learning deeper JS concepts, which could hold you back when you need to build more complex applications or troubleshoot.
Pro: Community Support
With millions of developers using jQuery, you’re never alone. The community is massive and vibrant while offering tons of resources, tutorials, and plugins to help you get things done. If you run into a problem, chances are someone else has already faced it and posted a solution online. This active community means it’s easy to get support, whether it’s on jQuery, GitHub, StackOverflow, or countless other forums. With so many eyes (and hands) on the code, you’re also more likely to find regular updates, bug fixes, and improvements that keep jQuery evolving.
Con: Relevance
As JavaScript evolves, new frameworks like React, Angular, and Vue.js have taken over the spotlight, offering more powerful and flexible tools for building complex web apps. And as apps get more sophisticated and complex, jQuery has stopped feeling like the first choice for large-scale projects.
Related: Which JavaScript Framework Should You Learn First?
Is Tech Right For you? Take Our 3-Minute Quiz!
You Will Learn:
☑️ If a career in tech is right for you
☑️ What tech careers fit your strengths
☑️ What skills you need to reach your goals
jQuery Plugins
As useful as jQuery is for simplifying individual functions (like the one we showed above), it can be extended out even more powerfully in the form of plugins. These are collections of JS code from the jQuery library that can chain together individual functions and create robust website features and tools—again, without having to code them from start to finish.
Plugins are created by jQuery users based on code in the jQuery library and can be found and shared online. While plugins can be found in many places, those found on GitHub’s npm Registry can safely be considered quality work. To get a closer look at what else jQuery can be used for, here are ten jQuery plugins available from the site.
1. Effect
Effect is a simple jQuery plugin that allows you to assign a number of animation effects to an element of a webpage. Pressing the assigned button (with the desired effect selected) will cause the page element to behave in different ways—bounce, disappear in a folding pattern, slide, fade out, etc.
2. taggingJS
Have you ever added a categorizing “tag” to a blog post? Chances are that feature was made possible with JavaScript code. This taggingJS jQuery script pulls from a JavaScript library and allows you to add a tagging system to your website. This helps boost your indexability and ranking with search engines like Google.
3. Autocomplete
You know how the search bar (on big-time websites like Google) has an autocomplete feature that starts offering suggestions to finish what you’re typing? You can add one of those to your own project with the Autocomplete jQuery plugin. This particular example is coded to offer autocomplete suggestions for programming terms, but you can add your own list of autocomplete terms to the plugin.
4. ScrollMagic
The ScrollMagic plugin uses jQuery code to animate web page elements based on the positioning of a user’s scroll bar—the bar on the right side of your browser window that lets you move up and down the page. You can either cause an animation to happen as the page scrolls or synchronize it with the scroll direction. For example, the jaunty top hat on the plugin demo page magically transforms into the ScrollMagic logo as you scroll down but reverts back into a hat as you scroll up.
5. Fine Uploader
Have you ever used one of those online menus to upload an image where you can either drag the image into a box or click on a button to select the image file from your computer? That’s another everyday example of what JavaScript—and by extension, jQuery—is used for. The Fine Uploader plugin allows web developers to skip the steps of building a new uploader and uses jQuery tools to drop a prebuilt one directly on your web page.
6. blueimp Gallery
blueimp Gallery is a responsive (adjusts to different displays on desktop and mobile screens) image gallery that can be controlled by a desktop keyboard and mouse or by swiping on a phone or tablet. This plugin can be set to display either images or videos in a carousel format and can also display images in a lightbox mode.
7. Slick
Slick is another responsive image carousel plugin with different display options than the blueimp Gallery above. Slick allows for things like singular or multiple display formats, variable width displays, single image fade in/out display options, and “lazy loading,”—where the next image on a carousel fades into view as you scroll instead of displaying statically.
8. Slider
Another popular web page feature brought to you by JavaScript is the sliders used to adjust volume and other levels on a web page. This Slider plugin uses the jQuery library to assign numerical values on a horizontal bar. The slider can then be moved up and down the bar using a mouse or keyboard arrow keys.
9. Infinite AJAX Scroll
One of the JavaScript-related functions that jQuery code can simplify for web developers is AJAX calls. This Infinite AJAX Scroll plugin uses AJAX so that additional content can appear on a page as a user scrolls down, instead of having all the content loaded statically on the page. You’ll notice this effect on blogs or other sites with a lot of written content where you don’t have to click a “more” button to continue reading because the text simply loads as you scroll.
10. AnimateScroll
This AnimateScroll plugin jazzes up standard header menus by animating each menu panel as users scroll past it with their mouse. As the mouse drags over, the individual menu element animates and pops out from its peers.
Ready to Learn JavaScript and jQuery?
So what’s the big takeaway from all these ways to use jQuery? jQuery is a powerful tool that will make your JavaScript skills infinitely more effective than if you were coding each and every one of these features from scratch.
jQuery also speaks to the communal nature of coding—all of these plugins are the efforts of individual web developers. They’re finding ways to maximize gains out of JavaScript and jQuery and sharing those results with the programming community. As your skills improve, you can (and should) continue to use these tools, and you’ll also have your own opportunities to give back and contribute your own discoveries.
If you’re new to web development and want to dive into jQuery, you first need to have a solid grasp of JavaScript. And even before then, you need to back up to the basics—HTML and CSS. Consider signing up for the Skillcrush Break Into Tech – Front End Developer Track. The instructors will guide you through HTML, CSS, and JavaScript fundamentals. And once you’re feeling confident with JS, check out the official jQuery community learning center for some beginner tutorials and tips.
