jQuery DOM Manipulation: A Practical Guide

 jQuery DOM Manipulation: A Practical Guide  

The Document Object Model (DOM) represents the structure of an HTML or XML document as a tree of nodes. Manipulating the DOM allows you to dynamically change the content and appearance of web pages. While JavaScript provides the core functionality, jQuery simplifies these tasks significantly.

This guide will cover some of the most common DOM manipulation techniques using jQuery.

1. Selecting Elements

• $(): The heart of jQuery is the $() function, often referred to as the "jQuery object." It's used to select elements within the HTML document.

  • By ID: $("#myElement") selects the element with the ID "myElement."
  • By Class: $(".myClass") selects all elements with the class "myClass."
  • By Tag Name: $("p") selects all <p> elements.
  • By Attribute: $("img[src='image.jpg']") selects all <img> elements with the specified src attribute.

• Combining Selectors: You can combine selectors using various methods:

• >: Child selector (e.g., $("#parent > div"))
• : Descendant selector (e.g., $("#parent div"))
• +: Adjacent sibling selector (e.g., p + span)
• ,: Multiple selector (e.g., p, div)

2. Modifying Content

• text(): Get or set the plain text content of selected elements.

  • $("p").text("New text");
  • var text = $("p").text();

• html(): Get or set the HTML content of selected elements.

  • $("div").html("<p>New paragraph</p>");
  • var htmlContent = $("div").html();

• append(): Add content to the end of selected elements.

  • $("ul").append("<li>New item</li>");

• prepend(): Add content to the beginning of selected elements.

  • $("ul").prepend("<li>First item</li>");

• after(): Insert content after selected elements.

  • $("p").after("<span>Some text</span>");

• before(): Insert content before selected elements.

  • $("p").before("<span>Some text</span>");

3. Modifying Attributes

• attr(): Get or set the value of attributes.

  • $("img").attr("src", "newimage.jpg");
  • var src = $("img").attr("src");

• removeAttr(): Remove attributes from selected elements.

  • $("img").removeAttr("alt");

• toggleClass(): Add or remove a class from selected elements.

• $("p").toggleClass("highlight");

4. Modifying CSS

• css(): Get or set CSS properties.

  • $("p").css("color", "red");
  • var color = $("p").css("color");

• addClass(): Add a class to selected elements.

  • $("p").addClass("important");

• removeClass(): Remove a class from selected elements.

  • $("p").removeClass("important");

5. Traversing the DOM

• parent(): Get the parent element of selected elements.
• children(): Get the child elements of selected elements.
• next(): Get the next sibling element of selected elements.
• prev(): Get the previous sibling element of selected elements.
• find(): Find descendant elements within selected elements.

Example

HTML

<div id="container">
  <p>This is a paragraph.</p>
</div>

JavaScript

$(document).ready(function() {
  $("#container").css("background-color", "lightgray");
  $("p").html("<b>New paragraph content</b>");
});

This code snippet changes the background color of the div with the ID "container" and modifies the HTML content of the paragraph within it.