If you’re interested in started 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 video). 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 iQuery?
- JavaScript vs. jQuery—What’s the Difference?
- jQuery Plugins
- How to Learn More About 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?
jQuery—A Definition:
Simply put 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 manufacture your own wood when building a house, and coding is no different. 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.
Why Use jQuery?
In addition to understanding WHAT jQuery is, it’s helpful to understand WHY developers use it. We’ll delve deeper into some of these points below, but here’s a list to provide the TLDR:
- jQuery makes JavaScript programming faster and more efficient
- jQuery is open source (meaning anyone can contribute to or modify it) and has a large user community, meaning it is consistently supported and added-on to.
- jQuery has extensive documentation (including in-line code examples!)
- jQuery plays well with any other JavaScript libraries you might be using
- jQuery has a TON of plug-ins that let you extend jQuery’s functionality as needed
(back to top)
An example of an accordion-style dropdown menu built with jQuery
What is the Main Difference Between JavaScript and jQuery?
JavaScript and jQuery are mentioned so interchangeably, 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 illustrate 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 and more efficiently. Further, 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.
(back to top)
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
jQuery Plugins
As useful as jQuery is for simplifying individual functions (like the one above), it can be extended out even more powerfully in the form of plugins—collections of JS code from the jQuery library that chain together those individual functions and create robust website features and tools (again, without coding them from the ground up).
Plugins are created by jQuery users based on code in the jQuery library, and can then be shared publicly online. While plugins can be found in many places, those found on the official jQuery UI (User Interface) repository can safely be considered quality work, since they’re curated by jQuery’s professional community. In order to give a closer look at what else jQuery can be used for, here are ten jQuery plugins available from the jQuery site.
1. Effect
Effect is a simple jQuery plugin that allows you to assign a number of animation effects to an element on a web page. 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
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—a text bar where you can add relevant subject topics to a post, and help boost your indexability and ranking with search engines like Google.
3. Autocomplete
You know how the search bar on big time websites like Google.com has an autocomplete feature that starts offering suggestions to finish what you’re typing? You can add one of those JavaScript beauties to your own project with this 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 into 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 animation with the scroll position (like the jaunty top hat on the plugin demo page that magically transforms into the ScrollMagic logo as you scroll down, or reverts back into a hat as you scroll up).
5. Fine Uploader
Ever used one of those menus online 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 (meaning it adjusts to display 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, “lazy loading” (where the next image on the carousel fades into view as you scroll rather than displaying statically), and a single image fade in/out display option.
8. Slider
Another ubiquitous web page feature brought to you by JavaScript are 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 simply for web developers are something called AJAX calls. While we’ve written about what exactly AJAX is elsewhere, in a nutshell it has to do with pulling content from a server and loading it on a web page so that things on a page can change without a user reloading the page themselves. This Infinite AJAX Scroll plugin uses AJAX so that additional content can appear on a page as a user scrolls down (rather than 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—the text simply loads as you scroll.
10. AnimateScroll
This AnimateScroll plugin jazzes up standard header menus by animating each menu panel as a user scrolls past it with their mouse. As the mouse drags over, the individuals menu elements animates and pops out from its peers.
(back to top)
Ready to Learn More About JavaScript and jQuery?
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 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 ready to take on all that jQuery has to offer, you can check out the official jQuery community learning center for some beginning jQuery tutorial tips and tricks, and—when you’re ready to get even more serious about JavaScript and jQuery — you can consider trying paid, instructor led courses like Skillcrush Break into Tech, which includes a unit on both topics.
(back to top)
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
