Kenhuang Academy
  • English

      • 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:

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

      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

      <!-- 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

      1. Fast Loading: CDN servers distributed worldwide provide faster content delivery
      2. Caching Benefits: Many users may have already cached jQuery from other websites
      3. 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:

      <!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:

      npm install jquery

      2. Include in Your Project

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

      Include in JavaScript file:

      // 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:

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

      Method 4: Using Package Managers

      Install with Yarn:

      yarn add jquery

      Install with Bower:

      bower install jquery

      jQuery Version Selection

      jQuery has multiple versions to choose from:

      • 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:

      <!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:

      <!-- 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

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