jQuery Setup & Installation

Before using jQuery in a project, it must be included in the HTML page. Unlike a built-in language feature, jQuery is an external file that needs to be loaded. There are two main ways to include jQuery: using a Content Delivery Network (CDN) or downloading the file locally.

This topic covers both methods and explains how to write the first piece of jQuery code correctly.

Ways to Include jQuery

jQuery is just a .js file. It can be added to a webpage the same way any JavaScript file is included — using a <script> tag.

Method 1: Using a CDN (Recommended for Beginners)

A CDN (Content Delivery Network) hosts the jQuery file on fast, reliable servers. Including a CDN link means the jQuery file does not need to be downloaded and stored locally. It loads directly from the internet.

<!DOCTYPE html>
<html>
<head>
  <title>My jQuery Page</title>
</head>
<body>

  <p>This is a paragraph.</p>

  <!-- Include jQuery from Google CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

  <script>
    // jQuery code goes here
  </script>

</body>
</html>

Important: The jQuery <script> tag must always come before any custom jQuery code. jQuery must load first so that its features are available when custom code runs.

Method 2: Downloading jQuery Locally

The jQuery file can be downloaded from jquery.com and saved in the project folder. This is useful when building projects that run without an internet connection.

<script src="js/jquery.min.js"></script>

Here, the file is stored in a folder called js inside the project directory. The path must match where the file was actually saved.

Minified vs Uncompressed jQuery

Two versions of jQuery are available for download:

Minified (.min.js): All whitespace and comments are removed. The file is smaller and loads faster. Used in production (live websites).
Uncompressed (.js): Readable, formatted code. Useful when learning or debugging.

For most projects, the minified version is the right choice.

The Document Ready Function

One of the most important concepts in jQuery setup is the document ready function. This tells the browser to wait until the entire HTML page has fully loaded before running any jQuery code.

Without this, jQuery might try to interact with elements that have not yet appeared on the page, causing errors.

Full Syntax

$(document).ready(function() {
  // jQuery code runs here after the page is ready
});

Shorthand Syntax (More Common)

$(function() {
  // Same as $(document).ready()
});

Both versions do the same thing. The shorthand is used more frequently in modern jQuery code.

First jQuery Program

Here is a complete, working example that changes a paragraph's text when a button is clicked.

<!DOCTYPE html>
<html>
<head>
  <title>First jQuery Example</title>
</head>
<body>

  <p id="message">This is the original text.</p>
  <button id="changeBtn">Change Text</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(function() {
      $("#changeBtn").click(function() {
        $("#message").text("Text has been changed by jQuery!");
      });
    });
  </script>

</body>
</html>

What happens here:

The page loads with the original paragraph text.
When the button is clicked, jQuery selects the paragraph by its ID and updates its text.

Verifying jQuery is Working

To check if jQuery loaded successfully, open the browser's developer console (press F12) and type:

console.log($.fn.jquery);

If jQuery is loaded, this prints the jQuery version number (e.g., 3.7.1).

Key Points

jQuery must be included in the HTML page before writing any jQuery code.
CDN is the quickest and most common way to add jQuery.
Always place the jQuery <script> tag before custom scripts.
The document ready function ensures jQuery runs only after the page is fully loaded.
Use the shorthand $(function() { }); for cleaner code.

Previous lessons

Back to courses

Next lessons