Mastering jQuery: From DOM Manipulation to Dynamic Interactivity

Chapter 2: Introduction to jQuery and DOM Manipulation

🔹 What is jQuery and Why It Matters

jQuery is a lightweight, "write less, do more" JavaScript library that simplifies programming with JavaScript and improves the way developers write code for DOM manipulation, animations, event handling, and AJAX operations.

✅ Key Benefits:

“jQuery made JavaScript approachable — and it's still useful today in many legacy systems and WordPress environments.”

🔹 How to Include jQuery in Your Project

You can include jQuery via CDN (recommended) or host it locally.

✅ Method 1: Using CDN

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

✅ Method 2: Local Installation

<script src="js/jquery.min.js"></script>

Make sure the <script> tag is placed before the closing </body> tag so it loads after the HTML.

🔹 Syntax Basics: Selectors, Events, and Chaining

🔸 Basic Syntax

$(selector).action()

• $: jQuery identifier
• selector: selects HTML elements (like "#id" or ".class")
• action(): function to perform on the selected elements

✅ Examples:

$("#heading").hide();            // Hides an element with ID 'heading'

$(".btn").css("color", "red");   // Changes color of all elements with class 'btn'

🔸 Event Handling

$(selector).on(event, function)

Example:

$("#btn").on("click", function() {

  alert("Button clicked!");

});

🔸 Chaining

$("#box").css("color", "blue").slideUp(2000).slideDown(2000);

Chaining allows multiple actions on the same element with less code.

🔹 DOM Traversal and Manipulation

jQuery provides powerful tools to manipulate and traverse the DOM easily.

🔸 .html(), .text(), .val()

🔸 .attr() – Get or Set Attributes

// Get attribute

var href = $("a").attr("href");

// Set attribute

$("a").attr("target", "_blank");

🔸 Add / Remove Elements

$("#list").append("<li>New item</li>");  // Adds at end

$("#list").prepend("<li>First item</li>");  // Adds at start

$("#list li:last").remove();             // Removes last item

🔸 Table Example (DOM Manipulation)

<table id="userTable">

  <tr><td>Name</td><td>Age</td></tr>

</table>

<button id="addRow">Add Row</button>

javascript

CopyEdit

$("#addRow").click(function(){

  $("#userTable").append("<tr><td>John</td><td>30</td></tr>");

});

🔹 Summary Table: Common jQuery Methods