Installing and Including jQuery

Before using jQuery, we need to include it in our project. jQuery provides multiple ways to include it, suitable for different development environments and requirements.

Overview of Inclusion Methods

jQuery provides the following inclusion methods:

CDN: The simplest and fastest method, suitable for rapid prototyping
Download File: Suitable for offline environments or when complete control of files is needed
NPM Installation: Suitable for modern frontend projects, convenient for version management and build optimization
Package Managers: Such as Yarn, Bower

Method 1: CDN (Recommended for Beginners)

CDN (Content Delivery Network) is the fastest and simplest way to include jQuery. Just add a script tag to your HTML file.

Common CDN Providers

html

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

<!-- Microsoft CDN -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

<!-- jQuery CDN (Official) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- cdnjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Advantages of CDN

Fast Loading: CDN servers distributed worldwide provide faster content delivery
Caching Benefits: Many users may have already cached jQuery from other websites
Reduced Server Load: Offloads bandwidth from your server

Method 2: Download Local File

1. Download the File

Visit the jQuery official website, click the "Download" button, and select the version you need.

2. Copy to Your Project

Copy the downloaded jQuery file to your project directory, for example:

your-project/
├── js/
│   ├── jquery-3.6.0.min.js
│   └── main.js
├── css/
│   └── style.css
└── index.html

3. Include in HTML

Add the following code to your HTML file:

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Example</title>
</head>
<body>
    <!-- Your page content -->
    
    <!-- Include jQuery -->
    <script src="js/jquery-3.6.0.min.js"></script>
    <!-- Your JavaScript code -->
    <script src="js/main.js"></script>
</body>
</html>

Method 3: NPM Installation

For projects using modern frontend build tools (like Webpack, Vite), NPM installation is recommended.

1. Install jQuery

Open terminal in your project root directory and run:

bash

npm install jquery

2. Include in Your Project

The inclusion method varies slightly depending on your framework and build tool:

Include in JavaScript file:

javascript

// In your main JS file
import $ from 'jquery';
// Or
import jQuery from 'jquery';

// Bind jQuery to global variable
window.$ = window.jQuery = jQuery;

Include in CommonJS environment:

javascript

// In your main JS file
const $ = require('jquery');

Method 4: Using Package Managers

Install with Yarn:

bash

yarn add jquery

Install with Bower:

bash

bower install jquery

jQuery Version Selection

jQuery has multiple versions to choose from:

1. jQuery 3.x (Recommended)

Latest version
Does not support IE 6/7/8
Performance optimized
Uses strict mode

2. jQuery 2.x

Does not support IE 6/7/8
Smaller file size
Improved performance

3. jQuery 1.x

Supports IE 6/7/8
Larger file size
Suitable for projects requiring old browser compatibility

4. jQuery Compat 3.x

Compatible version containing deprecated APIs
Suitable for projects migrating from older versions

Verifying Installation

Regardless of which method you use to include jQuery, you can verify successful installation with:

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Test</title>
    <!-- Include jQuery based on your chosen method -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>jQuery Test</h1>
    <p id="test">If you see this message, jQuery is not working properly</p>
    
    <script>
        // Wait for document to load
        $(document).ready(function() {
            // Modify page content
            $('#test').text('jQuery has been successfully loaded and is working!');
            $('#test').css('color', 'green');
        });
        
        // Or use shorthand form
        // $(function() {
        //     $('#test').text('jQuery has been successfully loaded and is working!');
        //     $('#test').css('color', 'green');
        // });
    </script>
</body>
</html>

If the page displays "jQuery has been successfully loaded and is working!" in green text, jQuery has been successfully installed and is ready to use.

Multiple Version Coexistence

In some cases, you may need to use multiple versions of jQuery in the same project:

html

<!-- Include jQuery 1.x -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    var $jq1 = jQuery.noConflict(true); // Release $ symbol and save jQuery 1.x reference
</script>

<!-- Include jQuery 3.x -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var $jq3 = jQuery.noConflict(true); // Release $ symbol and save jQuery 3.x reference
</script>

<script>
    // Use jQuery 1.x
    $jq1(document).ready(function() {
        // jQuery 1.x code
    });
    
    // Use jQuery 3.x
    $jq3(document).ready(function() {
        // jQuery 3.x code
    });
</script>

Important Notes

Inclusion Order: Ensure jQuery is included before any scripts that use it
Network Connection: CDN method requires a stable network connection
Version Compatibility: Ensure the jQuery version is compatible with your project requirements
File Path: When using local inclusion, ensure the file path is correct
Browser Cache: If you update the jQuery version, you may need to clear browser cache
Security: When using CDN, it's recommended to specify integrity check

html

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous">
</script>

With these methods, you can successfully include jQuery in your project and start using it to simplify your JavaScript development work.

Installing and Including jQuery ​

Overview of Inclusion Methods ​

Method 1: CDN (Recommended for Beginners) ​

Common CDN Providers ​

Advantages of CDN ​

Method 2: Download Local File ​

1. Download the File ​

2. Copy to Your Project ​

3. Include in HTML ​

Method 3: NPM Installation ​

1. Install jQuery ​

2. Include in Your Project ​

Include in JavaScript file: ​

Include in CommonJS environment: ​

Method 4: Using Package Managers ​

Install with Yarn: ​

Install with Bower: ​

jQuery Version Selection ​

1. jQuery 3.x (Recommended) ​

2. jQuery 2.x ​

3. jQuery 1.x ​

4. jQuery Compat 3.x ​

Verifying Installation ​

Multiple Version Coexistence ​

Important Notes ​

Installing and Including jQuery

Overview of Inclusion Methods

Method 1: CDN (Recommended for Beginners)

Common CDN Providers

Advantages of CDN

Method 2: Download Local File

1. Download the File

2. Copy to Your Project

3. Include in HTML

Method 3: NPM Installation

1. Install jQuery

2. Include in Your Project

Include in JavaScript file:

Include in CommonJS environment:

Method 4: Using Package Managers

Install with Yarn:

Install with Bower:

jQuery Version Selection

1. jQuery 3.x (Recommended)

2. jQuery 2.x

3. jQuery 1.x

4. jQuery Compat 3.x

Verifying Installation

Multiple Version Coexistence

Important Notes