What are the different ways to add jQuery to our webpages?

In order to make use of all the exciting features jQuery has to offer, we have to add the jQuery library to our webpages. Like any other JavaScript library, jQuery is added to a webpage by placing the script tag inside the head tag with the src of the script tag pointing towards the jQuery library, as shown below.

There are two main ways to point the src towards the jQuery library:

• Downloading the jQuery library
• Including the jQuery library from a CDN

Let’s discuss both of these methods in detail below.

Downloading the jQuery library

In this method, we locally download the jQuery library on our system. The jQuery library can be downloaded from this website.

There are two versions of the library present on the website.

Development jQuery

The development version is used for development and debugging. It consists of uncompressed and readable JavaScript code.

Production jQuery

The production version is used for live websites. It is in a compressed and non-readable format and provides a space reduction of around 69%.

You can download any of the two versions. After downloading, we place the jQuery library in the same directory as the webpage. Then, the src of the script tag is set equal to the name of the downloaded library, as shown below:

Including the jQuery library from a CDN

CDN stands for Content Delivery Networks. They consist of a vast collection of servers for storing and delivering data​, including software files, media files, and libraries. This content is easily accessible to anyone on the internet.

Google and Microsoft have hosted the jQuery library on their CDN networks for public usage. As shown below, we can just set the src of the script tag equal to the CDN link for jQuery to eliminate the need to download the library locally. In this case, the browser automatically downloads the jQuery library from the CDN link while loading the webpage.