Get Our Free Ultimate Guide to Coding for Beginners
Make a plan for learning the tech skills you need to land a new job with this 60+ page FREE ebook!
If you’re looking to learn skills to put you in position for the more than 45,000 web developer jobs listed on Indeed at the time of this writing, then you need to learn JavaScript (JS). JavaScript is one of three machine languages that are essential for web development. While the first two—HTML and CSS—are used for laying out and stylizing web pages, JavaScript is a scripting language used to build dynamic web content like animated features, interactive forms, and scrolling video.
But if you’re learning JavaScript, you also need to familiarize yourself with a JS-related tool called jQuery. jQuery is a JavaScript library of pre-written JavaScript code that can be implemented in your own coding projects. If you’re new to coding though, 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 if you were 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.
JavaScript Code vs. jQuery Code Snippets
For a quick visual, consider the following: 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 these lines:
$(“#submit”).click(function () {
var greeting = $(“#name”).val();
$(“#headline”).html(“Thank you for joining our email list, ” + greeting);
return false;
});
This much more manageable snippet sends a request to the jQuery library, which you can either install on your own website or use via Google by including a 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 jQuery 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.
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 are curated by jQuery’s professional community. In order to give a closer look at what exactly jQuery can be used for, here are ten jQuery plugins available from the jQuery site.
1. Effect
This simple jQuery plugin will allow 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 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 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 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 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.
The big takeaway from all of these jQuery uses? 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 tips and tricks, and—when you’re ready to get even more serious about JavaScript and jQuery—you can consider trying a paid, instructor led course like the Skillcrush Web Developer Blueprint, which includes a unit on both topics.
Get Our Free Ultimate Guide to Coding for Beginners
Make a plan for learning the tech skills you need to land a new job with this 60+ page FREE ebook!