jQuery Introduction | Overview | Applying jQuery (Download, CDN)

Tags:

Applying jQuery

jQuery is a JavaScript library, so the jQuery file exists as a JavaScript file, that is, a .js file. Therefore, to use jQuery on a web page, you must first load the jQuery file into the web page.

There are two ways to load a jQuery file into a web page.

  1. Download and load the jQuery file.
  2. Load it through a CDN (Content Delivery Network).

Downloading and Loading the jQuery File

You can download the latest jQuery file from the following official site.

http://jquery.com/download

There are two versions of the file.

  • Production version: For live websites, compressed and not readable.
  • Development version: For testing and development, uncompressed and readable.

Save the downloaded jQuery file on your server, then insert a <script> tag inside the <head> tag of the web page. In some cases, it is inserted near the bottom of the page to improve content loading performance.

<head>
    <script src="/media/jquery-3.3.1.min.js"></script>
</head>

Why is there no type="text/javascript" inside the <script> tag? It is not needed in HTML5. JavaScript is the default scripting language in HTML5 and all modern browsers.

Loading Through a CDN

A CDN (Content Delivery Network) is a technology that automatically lets website visitors download content from the nearest server when they need to download content from a server. This has the advantage of preventing traffic from concentrating on a specific server and greatly speeding up content delivery.

With a CDN, you can use jQuery without separately storing the jQuery file on your server. The currently available CDNs for jQuery version 3.x are as follows, and jQuery behaves the same no matter which CDN you use.

jQuery.com CDN

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Google CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

MS CDN

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

CDNJS CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>