⚙️ jQuery Installation

? Quick Overview

jQuery is a fast, small, and feature-rich JavaScript library. Before using jQuery features like selectors, events, and animations, you must properly install or include jQuery in your project.

? Key Concepts

• jQuery is a JavaScript library, not a framework
• It must be loaded before writing jQuery code
• Can be installed via CDN or local file
• Works in all modern browsers

? Syntax / Theory

To use jQuery, you include the jQuery file inside a <script> tag. Once included, you can use the $ symbol to access jQuery functions.

$(document).ready(function() {
   // jQuery methods go here...
});

? Code Example(s)

// Including jQuery using CDN
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

// Including jQuery from local file
<script src="js/jquery.min.js"></script>

// Terminal command for NPM
npm install jquery

// Terminal command for Yarn
yarn add jquery

// Import in your JS file
import $ from "jquery";

? Live Output / Explanation

? Interactive Example

Below is a Live Demo. This page actually has jQuery loaded in the background. Click the button below to test if it detects the library.

// HTML
<button id="runCheckBtn">Run jQuery Check</button>
<div id="demoStatus">Waiting...</div>

// jQuery Script
$(document).ready(function(){
  $("#runCheckBtn").click(function(){
    $("#demoStatus")
      .text("✅ jQuery is installed and active!")
      .css({"color": "green", "border-color": "green"});
  });
});

// Check if jQuery is loaded successfully
$(document).ready(function(){
  alert("jQuery is working!");
});

? Use Cases

• Quick DOM manipulation
• Handling events easily
• Animations and effects
• AJAX requests