jQuery Basics: Part 1: Adding and Loading the Library

jQuery Basics

jQuery is a JavaScript library designed to simplify the processes of traversing and manipulating elements in client-side HTML. It is an open source library commonly found on many sites.

Adding and Loading the Library

As an external library, jQuery needs to be added to a project in order to use it. While many tools come with or utilize jQuery in different ways, a fresh project using no other tools or project management software will need to add jQuery to the project using one of two different ways.

Externally Loading

Screenshot 2018-10-24 11.54.44

As a popular library used on many sites, jQuery can be loaded from an external content delivery network (CDN). Hosting common libraries and other resources, many large companies have their own private and sometimes even public networks for loading libraries they or their customers use the most to help with bandwidth and loading concerns.

jQuery can be loaded from many different CDNs. It can be found on Google’s, Microsoft’s, and on CDNJS. To use any of these, simply copy the link provided for the library or additional functionality wanted into a SCRIPT tag.

Local Usage

Screenshot 2018-10-24 12.01.58

jQuery can be downloaded in both compressed and uncompressed versions from its website. Often, it is highly recommended to start with the uncompressed version when developing or testing code to more easily diagnose potential problems. When the code is ready for a more public audience, it can be switched over to the compressed version to save bandwidth and space.

Where do I put the jQuery SCRIPT tag?

While the previous screenshots show placing the SCRIPT tag loading jQuery in the HEAD section of the HTML document, this may not always be the best choice. Because of the way some current and many older mobile devices load webpages, it is sometimes recommended to put the SCRIPT elements containing JavaScript libraries as close to the end of the document as possible.

The reason for this seemingly unusual placement is because these mobile devices load the content as they receive them. Trying to load a library like jQuery can take time. Showing users some content instead of no content as things are loaded is seen as a safe compromise and is generally the recommended practice for situations like this.

Generally, it is recommended to place jQuery in the HEAD section for most projects. For any code that uses or is based on jQuery, it should be placed either right after or in a place that makes the best sense for the project.

Play with the example on Repl.it!