dom-manipulation.md

DOM Manipulation with jQuery

Basic Syntax

The basic syntax of jQuery is:

$(selector).action();

• $ is used to access jQuery.
• selector is used to find HTML elements.
• action is the jQuery action to be performed on the element(s).

Examples

Selecting Elements

// Select all paragraphs
$("p");

// Select element with id="myId"
$("#myId");

// Select elements with class="myClass"
$(".myClass");

Manipulating Elements

// Hide all paragraphs
$("p").hide();

// Show all paragraphs
$("p").show();

// Change the text of an element
$("#myId").text("New text");

Event Handling

// Click event
$("#myButton").click(function(){
    alert("Button clicked!");
});

// Hover event
$("#myElement").hover(
    function(){
        $(this).addClass("hover");
    }, function(){
        $(this).removeClass("hover");
    }
);

Adding and Removing Elements

// Append a new paragraph
$("body").append("<p>New paragraph</p>");

// Remove an element
$("#myElement").remove();

CSS Manipulation

// Change the color of all paragraphs to red
$("p").css("color", "red");

// Add a class to an element
$("#myElement").addClass("newClass");

// Remove a class from an element
$("#myElement").removeClass("oldClass");

// Animate an element
$("#myElement").animate({left: '250px'});

Conclusion

jQuery simplifies many of the complex tasks in JavaScript, making it easier to work with the DOM. With its powerful selectors and methods, you can quickly and easily manipulate HTML elements, handle events, and apply styles.

For more information, visit the official jQuery documentation.