jQuery Getting Started

This guide will lead you through the process of creating a web page empowered by jQuery.

Downloading jQuery

To initiate, begin by obtaining a copy of jQuery and incorporating it into your document. You have the option of selecting between two versions of jQuery for download: the compressed and uncompressed versions.

For developmental or debugging purposes, the uncompressed version is preferable. Conversely, the minified and compressed variant is recommended for production environments, as it conserves bandwidth and enhances performance due to its compact file size.

You can download jQuery from here: https://jquery.com/download/

After downloading the jQuery file, you'll notice it has a .js extension. This is because jQuery is essentially a JavaScript library. Consequently, you can include the jQuery file in your HTML document using the <script> element, just as you would with standard JavaScript files.

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

Make sure to include the jQuery file before of your custom scripts. Otherwise, your jQuery code will be unable to access the jQuery APIs.

Including jQuery from CDN

Alternatively, you can incorporate jQuery into your document using readily available CDN (Content Delivery Network) links if you prefer not to download and host jQuery manually.

CDNs provide a performance advantage by minimizing loading times. They achieve this by hosting jQuery on numerous servers distributed globally, so when a user requests the file, it's served from the nearest server to their location.

Furthermore, this approach has the added benefit that if a visitor to your webpage has previously downloaded a copy of jQuery from the same CDN while visiting other websites, it won't need to be re-downloaded since it's already cached in the browser.

jQuery's CDN provided by StackPath

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

The inclusion of jQuery can also be facilitated through CDNs operated by Google and Microsoft.

Creating Your First jQuery Powered Web Page

Up to this point, you've grasped the objectives of the jQuery library and learned how to integrate it into your document. Now, it's time to apply jQuery in a practical context. In this section, we will execute a straightforward jQuery task: altering the color of the heading text from its default black to red.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example of Simple jQuery Powered Web Page</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("h1").css("color", "Red");
        });
    </script>
</head>
<body>
    <h1>Happy Morning!</h1>
</body>
</html>

Try this code

In the preceding example, we executed a basic jQuery task, modifying the color of the heading enclosed within the <h1> element. This was accomplished using the jQuery element selector and the css() method, triggered when the document reaches a state of readiness, known as the document ready event.

FAQ

How do you include jQuery in a web page?

To include jQuery in a web page, you can either download the jQuery library and host it on your server or use a Content Delivery Network (CDN). Here's how you can include jQuery using a CDN:

<!DOCTYPE html>
<html>
<head>
  <title>My jQuery Page</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <!-- Your HTML content here -->
</body>
</html>

In this example, the <script> tag includes the jQuery library from the provided CDN link. Place this code within the <head> section of your HTML document.

What are the two primary ways to include jQuery in a web project?

The two primary ways to include jQuery in a web project are:

Downloading jQuery: You can download the jQuery library from the official jQuery website or other trusted sources and host it on your server.
Using a CDN (Content Delivery Network): You can include jQuery directly from a Content Delivery Network, which provides a hosted version of jQuery for faster and more reliable access.

How can you download jQuery and host it on your server for local use?

To download jQuery and host it locally, follow these steps:

Visit the official jQuery website (https://jquery.com/).
Download the desired version of jQuery (e.g., jQuery 3.6.0) as a .js file.
Save the downloaded file in your project directory.

Reference the local jQuery file in your HTML like this:

<script src="path/to/jquery.js"></script>

Replace "path/to/jquery.js" with the actual file path to your downloaded jQuery file.

What is a CDN, and why might you choose to include jQuery from a CDN?

A CDN (Content Delivery Network) is a network of servers distributed around the world that host commonly used libraries and files, including jQuery. You might choose to include jQuery from a CDN for the following reasons:

Performance: CDNs provide fast and efficient delivery of files to users, reducing latency and improving website performance.
Caching: CDNs often use browser caching, allowing users to reuse the jQuery file if they've previously visited a site that also uses the same CDN-hosted jQuery version.
Maintenance: Using a CDN means you don't have to worry about updating jQuery manually; you automatically get the latest version.

How do you include jQuery from a CDN in an HTML document?

To include jQuery from a CDN in your HTML document, you can add the following script tag to the <head> section of your HTML:

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

This script tag loads the jQuery library directly from the official jQuery CDN. You can replace "https://code.jquery.com/jquery-3.6.0.min.js" with the CDN link of your desired jQuery version if needed.

All Tutorials