jQuery - DOM Manipulation

DOM manipulation in jQuery refers to the process of accessing and modifying the HTML elements in a web page dynamically.

1. Accessing DOM Elements

To access DOM elements using jQuery, you can use various selectors such as element IDs, classes, attributes, and more.

Basic syntax:

$(selector);

Example:

// Accessing element by ID
$("#myElement");

// Accessing elements by class
$(".myClass");

// Accessing elements by tag name
$("div");

// Accessing elements by attribute
$("[name='email']");

This code selects HTML elements with the specified IDs, classes, tag names, or attributes.

2. Modifying DOM Elements

To modify DOM elements using jQuery, you can use various methods to change their content, attributes, styles, and more.

Example:

// Changing text content
$("#myElement").text("New text");

// Changing HTML content
$("#myElement").html("New HTML");

// Adding CSS class
$("#myElement").addClass("newClass");

// Removing CSS class
$("#myElement").removeClass("oldClass");

// Modifying attributes
$("#myElement").attr("src", "newimage.jpg");

This code modifies the text and HTML content, adds or removes CSS classes, and modifies attributes of the selected elements.

3. Creating DOM Elements

You can also create new DOM elements dynamically using jQuery and insert them into the web page.

Example:

// Creating a new paragraph element
var newParagraph = $("New paragraph");

// Appending it to the body
$("body").append(newParagraph);

This code creates a new paragraph element and appends it to the body of the web page.

4. Traversing the DOM

jQuery provides methods to traverse the DOM tree and navigate between different elements.

Example:

// Find the parent element
$("#myElement").parent();

// Find the children elements
$("#myElement").children();

// Find the next sibling element
$("#myElement").next();

// Find the previous sibling element
$("#myElement").prev();

These methods allow you to traverse up and down the DOM tree and select specific elements.

5. Handling Events

jQuery provides methods to handle various events such as clicks, mouse movements, keyboard inputs, and more.

Example:

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

// Mouseover event handler
$("#myElement").mouseover(function() {
    $(this).css("background-color", "yellow");
});

These event handling methods allow you to define behavior for different user interactions with the web page.

6. Conclusion

DOM manipulation in jQuery provides a powerful and efficient way to interact with HTML elements in a web page. By accessing, modifying, traversing, and handling events on DOM elements dynamically, developers can create rich and interactive user interfaces.

Archive