jQuery Basics

jQuery Effects

jQuery HTML

jQuery Traversing

jQuery AJAX

jQuery Misc

jQuery Get Started

❮ Previous Next ❯

Getting Started with jQuery

Adding jQuery to your web pages is incredibly simple.

There are two main ways to include the jQuery library in your project.

You can download it locally, or include it from a Content Delivery Network (CDN).

1. Downloading jQuery Locally

You can download the jQuery library directly from jQuery.com.

Once downloaded, place the .js file inside your project folder.

You then link to it at the bottom of your HTML <body> tag using the <script> element.

Local File Example:

<!DOCTYPE html>
<html>
<head>
    <title>My First jQuery Page</title>
</head>
<body>
    <h1>Hello World</h1>
    <!-- Link to the downloaded file -->
    <script src="jquery-3.7.1.min.js"></script>
</body>
</html>

2. Using a CDN (Recommended)

If you don't want to download and host jQuery yourself, you can include it from a CDN.

A CDN (Content Delivery Network) is a network of servers that deliver web content to a user based on their geographic location.

Both Google and Microsoft host the jQuery library for developers to use for free.

Why Use a CDN for SEO and Performance?

Google CDN Example

To use the Google CDN, simply add this <script> tag to your HTML file:

Google CDN Example:

<!DOCTYPE html>
<html>
<head>
    <title>Google CDN jQuery</title>
</head>
<body>
    <h1>Hello World</h1>
    <!-- Link to Google CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</body>
</html>

Place the <script> tag just before the closing </body> tag for the best page load performance.

Checking if jQuery Loaded

Once you have added the script tag, you can test if it works.

Add a simple script below your jQuery inclusion to check if it loaded successfully.

Test Your Setup:

<script>
    if (typeof jQuery != "undefined") {
        console.log("jQuery is loaded and ready!");
    }
</script>

Exercise

?

What is the recommended way to include jQuery in your website for better performance?

❮ Previous Next ❯