jQuery DOM and CSS Methods Reference Guide
This comprehensive reference guide covers essential jQuery methods for DOM manipulation, CSS manipulation, and handling element dimensions. It includes detailed descriptions of each method, such as append, html, css, width, and more, providing a quick and easy way to understand how to interact with and modify web page elements using jQuery. Whether you're looking to add or remove elements, adjust CSS properties, or manage element dimensions, this guide offers the information you need to efficiently use jQuery in your web development projects.
DOM Manipulation Methods
| Method | Description |
|---|---|
| append | Inserts DOM elements at the end of selected element(s). |
| appendTo | Similar to append(), but the syntax is different. Specify the DOM elements as a string and then call appendTo() with the selector expression to select the elements where you want to append the specified DOM elements. |
| before | Inserts content (new or existing DOM elements) before specified element(s) by a selector. |
| after | Inserts content (new or existing DOM elements) after selected element(s) by a selector. |
| detach | Removes the specified element(s). |
| empty | Removes all child element(s) of selected element(s). |
| html | Gets or sets HTML content of the selected element(s). |
| insertAfter | Inserts DOM element(s) after selected element(s). Similar to after(), but with different syntax. |
| insertBefore | Inserts DOM element(s) before selected element(s). Similar to before(), but with different syntax. |
| prepend | Inserts content at the beginning of the selected element(s). |
| prependTo | Inserts content at the beginning of the selected element(s). Similar to prepend(), but with different syntax. |
| prop | Gets or sets the value of the specified property of selected element(s). |
| remove | Removes selected element(s) from the DOM. |
| removeAttr | Removes the specified attribute from selected element(s). |
| removeProp | Removes the specified property from selected element(s). |
| replaceAll | Replaces all target element(s) with the specified element. |
| replaceWith | Replaces all target element(s) with the specified element and returns the set of elements which was removed. |
| text | Gets or sets the text content of the selected element(s). |
| wrap | Wraps an HTML structure around each selected element(s). |
| unwrap | Removes the parents of selected element(s). |
| val | Gets or sets the value of selected element(s). |
| wrapAll | Combines all the selected element(s) and wraps them with the specified HTML. |
| wrapInner | Wraps the inner HTML of selected element(s) with the specified HTML. |
CSS Methods
| Method | Description |
|---|---|
| css | Gets or sets style properties of the selected element(s). |
| addClass | Adds one or more CSS classes to the selected element(s). |
| hasClass | Determines whether any of the selected elements have the given CSS class. |
| removeClass | Removes a single class, multiple classes, or all classes from the selected element(s). |
| toggleClass | Toggles between adding and removing classes from the selected elements. |
Dimensions Methods
| Method | Description |
|---|---|
| height | Gets or sets the height of the selected element(s). |
| innerHeight | Gets or sets the inner height (padding + element's height) of the selected element(s). |
| outerHeight | Gets or sets the outer height (border + padding + element's height) of the selected element(s). |
| offset | Gets or sets the left and top coordinates of the selected element(s). |
| position | Gets the current coordinates of the selected element(s). |
| width | Gets or sets the width of the selected element(s). |
| innerWidth | Gets or sets the inner width (padding + element's width) of the selected element(s). |
| outerWidth | Gets or sets the outer width (border + padding + element's width) of the selected element(s). |
| scrollLeft | Gets or sets the current horizontal position of the scrollable content of selected element(s). |
| scrollTop | Gets or sets the current vertical position of the scrollable content of selected element(s). |