Master jQuery Methods: DOM Manipulation & Traversing

Explore essential jQuery methods for DOM manipulation and element traversing. Learn to easily add, remove, and modify elements with jQuery’s powerful tools.

jQuery Methods

Building upon your understanding of jQuery selectors, let's delve deeper into the diverse methods it offers for manipulating DOM elements, handling events, and more:

Method Categories

jQuery provides a rich set of methods categorized by their functionality:

DOM Manipulation

  • append(), prepend(), after(), before(): Add content to elements.
  • wrap(), unwrap(): Wrap elements with other HTML structures.
  • remove(), empty(): Remove elements from the DOM.
  • html(), text(), val(): Modify element content (HTML, text, or form values).
  • attr(), prop(), data(): Access and manipulate element attributes, properties, and data.
  • addClass(), removeClass(), toggleClass(): Manage CSS classes on elements.
  • css(): Get or set CSS styles of elements.

Traversing

  • children(), parent(), siblings(): Navigate between related elements.
  • find(), filter(): Filter elements based on criteria.

Events

  • bind(), on(): Attach event handlers to elements.
  • click(), dblclick(), hover(), etc.: Handle specific events.

Effects

  • animate(): Create custom animations.
  • fadeIn(), fadeOut(), slideToggle(): Predefined animations.

Dimensions

  • height(), width(), innerHeight(), innerWidth(): Get element dimensions.

Ajax

  • get(), post(), ajax(): Perform asynchronous HTTP requests.

Core

  • $(): Creates jQuery objects from selectors or elements.
  • each(): Iterate over a collection of elements.

Data

  • data(): Store and retrieve custom data associated with elements.

Miscellaneous

  • is(): Check element type or state.
  • toArray(): Convert jQuery objects to arrays.

Example

HTML

<!DOCTYPE html><br>
<html><br>
<head><br>
  <title>jQuery Example</title><br>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script><br>
  <script><br>
    $(document).ready(function() {<br>
      // Wrap all paragraphs with a div<br>
      $('p').wrap('&lt;div class="my-class"&gt;&lt;/div&gt;');<br>
      // Hide the element with ID "myDiv"<br>
      $('#myDiv').hide();<br>
      // Add a border and set width on all spans<br>
      $('span').css({<br>
        border: 'solid 1px',<br>
        width: '100%'<br>
      });<br>
      // Append text to all paragraphs<br>
      $('p').append(' - This is appended text.');<br>
      // Insert a paragraph before all spans<br>
      $('span').before('&lt;p&gt;This is a new paragraph!&lt;/p&gt;');<br>
    });<br>
  </script><br>
</head><br>
<body><br>
  <div id="myDiv">This is a hidden div</div><br>
  <p>Paragraph 1</p><br>
  <span>Span content</span><br>
  <p>Paragraph 2</p><br>
</body><br>
</html>
Output

The HTML document will have the following changes:
- All paragraphs are wrapped in a div with class "my-class".
- The div with ID "myDiv" is hidden.
- All spans will have a solid border and occupy full width.
- Text "- This is appended text." is added to all paragraphs.
- A new paragraph is inserted before each span.

Beyond the Basics

  • Method Chaining: Combine multiple jQuery methods for concise code.
  • Event Delegation: Efficiently handle dynamically added elements.
  • DOM Traversal Techniques: Master different ways to navigate through the DOM tree.
  • Error Handling: Implement robust error handling to handle unexpected behaviors.

By mastering these methods, you can create dynamic and interactive web pages that respond seamlessly to user actions.