Episode 3 of 24

Link Up jQuery in Your Website

Learn three ways to include jQuery in your project: CDN, download, and npm.

Before using jQuery, you need to include it in your project. There are three main ways to do this.

Method 1: CDN (Recommended for Learning)

Use a Content Delivery Network — the fastest way to get started:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Demo</title>
</head>
<body>
    <h1 id="title">Hello jQuery</h1>
    <button id="changeBtn">Click Me</button>

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

    <!-- Your script AFTER jQuery -->
    <script src="app.js"></script>
</body>
</html>

Method 2: Download Locally

  1. Visit jquery.com/download
  2. Download the compressed (minified) version
  3. Save it in your project folder
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/app.js"></script>

Method 3: npm (For Modern Projects)

npm install jquery
// In your JavaScript file
import $ from 'jquery';

Verify jQuery is Loaded

Open your browser console and type:

console.log($.fn.jquery);  // "3.7.1"
// or
console.log(jQuery.fn.jquery);

Important Rules

  • Always include jQuery before your own scripts
  • Use the minified version (.min.js) in production
  • Place scripts at the bottom of the body or use defer