To start using jQuery, you first need to include the jQuery library in your HTML project. There are two main ways to do this: you can either use a **CDN** (linked from a external server) or **download** the file and host it yourself.
A **Content Delivery Network (CDN)** is a system of distributed servers that deliver web content to users based on their geographic location. Using a CDN is the fastest and easiest way to get started.
Simply copy and paste one of the following script tags into your HTML header or before
the closing </body> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>If you prefer to host jQuery on your own server (useful for offline development or restricted internal networks), you can download it from **jquery.com**.
Once downloaded, place the file in your project folder (e.g., in a `js/` folder) and link to it like this:
<!-- Linking to a local file -->
<script src="js/jquery-3.7.1.min.js"></script>You can place the <script> tag in two places, but there is a clear
better choice for modern websites:
| Location | Pros/Cons |
|---|---|
Inside <head> |
Older practice. Ensures jQuery is ready before the page renders, but can slow down initial page loading. |
Before </body> |
Recommended. Allows the HTML and CSS to load first, making the site feel faster to the user. |
After adding the script tag, you can test if jQuery is loaded correctly by running a
small piece of code in your console or within a <script> tag:
$(document).ready(function() {
console.log("jQuery is correctly installed and running!");
alert("jQuery works!");
});