What is jQuery: An Intro for Beginners

Table of Contents

• What is jQuery?
• What are the advantages of learning jQuery?
• What are the disadvantages of using jQuery?
• Which companies use jQuery to build their products?
• What kind of jobs require jQuery skills?
• Is jQuery a useful JavaScript library for beginners to learn?
• How can I get started learning jQuery?

So you’ve been seeing jQuery as you research coding bootcamp curricula – but what is jQuery? It’s a JavaScript library that has been widely used for more than 10 years, but there is some debate around whether or not it’s worth using in 2018, since modern web browsers can now perform some of the same functions. DigitalCrafts Developer In Residence Beth D’Amato explains the pros and cons of jQuery, what sort of jobs might need jQuery skills, and why it’s worth learning even though there are new alternatives.

What is jQuery?

jQuery is a free, open-source JavaScript (JS) library that lives up to its motto, “Write Less, Do More.”

jQuery was developed by John Resig and presented in 2006 at BarCamp NYC gathering. John was looking for a way to take common, repetitive task blocks in JS and boil down all the unnecessary markup to leave short, smart and understandable ‘recipes’ called methods. Instead of having to rewrite each task block over and over, developers need only call their method – jQuery takes over from there!

What are the advantages of learning jQuery?

The jQuery library simplifies a variety of programming operations, including:

• Event handling—user actions such as a mouse click, form submission, or a keyboard keystroke—is reduced to a few lines of code that can be inserted just about anywhere in the JS logic of your application.
• The DOM, or Document Object Model, is a browser interface that allows for the addition, deletion or update of HTML elements. jQuery offers multiple tools for doing so in methods like .replaceAll(), .remove(), .append().
• The jQuery .ajax() method simplifies sending asynchronous HTTP requests to the server without reloading the page. Other useful AJAX functions in the library include .getJSON(), .load(), and .serialize(), which can all be used with any platform and browser.
• Developers can create dynamic effects throughout their application by calling on several of jQuery’s animation methods such as .hide() / .show(), .slideUp() / .slideDown, and .toggle(). If the built-in animations don’t do exactly what you need, you can use .animate() to create custom animations of many CSS properties.

As search engines are great at reading content, everything within jQuery is seen as text. Therefore, dynamic content is readable by most search engines!

What are the disadvantages of using jQuery?

• The most critical disadvantage of jQuery is that it is a huge library to import. jQuery is a single JS file which contains all its DOM, events, effects, and AJAX components. The file, over time and development, has gained a significant amount of kilobytes. The first version to come out was 1.2, with a file size of 77.40 kilobytes. The latest version, 3.3.1, has an uncompressed size of 272 kilobytes!) The user, at the receiving end, must download the heavy library which requires more time to open.
• Another drawback is that jQuery’s abstraction hides the complex parts of JavaScript, making learning JavaScript much more difficult. You end up having designers and developers who can do simple rollovers and slideshows, but run into huge problems when real DOM manipulation is called.
• jQuery DOM APIs are now obsolete. Modern browsers can now do the same work, but much more quickly than jQuery! Vanilla (sans framework) JavaScript DOM manipulation code, in addition to lightning-fast execution, is less cryptic for cross-team development and integrates perfectly with your business logic.

Which companies use jQuery to build their products?

According to Stackshare, the following companies use or have used jQuery in their products:

• Twitter
• Kickstarter
• Uber
• Hootsuite
• AngelList

What kind of jobs require jQuery skills?

Front-end web programmers who are excited about working with new and legacy systems will have no problem finding positions utilizing their jQuery knowledge. It’s a good bet that pre-2015 infrastructures function over a jQuery-based framework.  For the sake of speed and efficiency, companies today are rebasing their applications, incorporating more advanced technologies. Time and money play a huge role in that process; the biggest issue there being the development teams are typically given little of both for the project. Skilled jQuery programmers are in demand to craft interim solutions to bridge the old structure to the new.

Is jQuery a useful JavaScript library for beginners to learn?

jQuery has the distinction of being the very first library learned for a multitude of developers. This is because:

• It offers a lot of shorthand solutions to common JavaScript challenges that don’t involve the DOM. For example, sorting and filtering arrays and data objects are amazingly simple using jQuery.
• Its syntax for making AJAX calls is far simpler than the native XmlHttpRequest.
• It even works on the server side with Node.  
• There are also a lot of other libraries out there you might want to use that have jQuery as a dependency.

However, once a key subject in DigitalCrafts’ full-stack curriculum, we now actually teach vanilla JavaScript DOM manipulation code instead of teaching jQuery. For the simple reason that jQuery DOM APIs are now obsolete.

That said, many companies will have apps that use jQuery in their code that needs to be maintained. For that reason alone, we absolutely recommend supplementing your JavaScript knowledge with jQuery to help you on the job.

How can I get started learning jQuery?

Before you begin, it’s best to ensure you:

• Have a pretty solid understanding of HTML and CSS;
• Can set-up a simple website and know what CSS selectors are, such as ids and classes.
• Have a fundamental knowledge of JS, especially variables and data types.

The jQuery Learning Center, a repository of implementation, utilization, and best-practice tutorials maintained by the jQuery Foundation, provides a wealth of information to help developers quickly get up-to-speed with the library. Code and documentation contributions are welcome! Don’t forget to take a look at their PlugIn Registry where you can find the perfect bit of code to enhance your application.

jQuery can be integrated either by downloading the full library directly or importing it via CDN.

Find out more and read DigitalCrafts reviews on Course Report. Check out the DigitalCrafts website.