- Categories: jQuery Reference, jQuery Resources, Reference
Quick Reference
This is a quick reference list of jQuery HTML/CSS methods that are used to manipulate the selected elements.
jQuery – add() Method
The add() method adds elements to an existing group of elements in the whole document, or just inside context elements if specified.
jQuery – addClass() Method
The addClass() method adds one or more class names to the selected elements.
jQuery – after() Method
The after() method inserts specified content (HTML tags, jQuery objects, DOM elements) after the selected elements.
jQuery – append() Method
The append() method inserts specified content (HTML tags, jQuery objects, DOM elements) at the end of the selected elements.
jQuery – appendTo() Method
The appendTo() method inserts HTML elements at the end of the selected element or elements.
jQuery – attr() Method
The attr() method sets attributes and values of the selected elements.
jQuery – before() Method
The before() method inserts specified content (HTML tags, jQuery objects, DOM elements) before the selected elements.
jQuery – clone() Method
The clone() method makes a copy of selected elements, including child nodes, text and attributes.
jQuery – css() Method
The css() method sets one or more style properties for the selected elements.
jQuery – detach() Method
The detach() method removes the selected elements, including all text and child nodes, but keeps data and events.
jQuery – empty() Method
The empty() method removes all child nodes and content from the selected elements, but does NOT remove the element itself or its attributes.
jQuery – hasClass() Method
The hasClass() method checks if any of the selected elements have a specified class name, and returns “true” if any do.
jQuery – height() Method
The height() method sets the height of the selected elements, not including padding, border, or margin.
jQuery – html() Method
The html() method sets the content (innerHTML) of the selected elements.
jQuery – innerHeight() Method
The innerHeight() method returns the inner height of the FIRST matched element, including padding, but NOT including border and margin.
jQuery – innerWidth() Method
The innerWidth() method returns the inner width of the FIRST matched element, including padding, but NOT including border and margin.
jQuery – insertAfter() Method
The insertAfter() method inserts HTML elements after the selected elements.
jQuery – insertBefore() Method
The insertBefore() method inserts HTML elements before the selected elements.
jQuery – offset() Method
The offset() method sets the offset coordinates for ALL matched elements the selected elements, relative to the document.
jQuery – offsetParent() Method
The offsetParent() method returns the first positioned parent element.
jQuery – outerHeight() Method
The outerHeight() method returns the outer height of the FIRST matched element, including padding and border.
jQuery – outerWidth() Method
The outerWidth() method returns the outer width of the FIRST matched element, including padding and border.
jQuery – position() Method
The position() method returns the element’s top and left position, in pixels (relative to its parent), of the first matched element.
jQuery – prepend() Method
The prepend() method inserts specified content (HTML tags, jQuery objects, DOM elements) at the beginning of the selected elements.
jQuery – prependTo() Method
The prependTo() method inserts HTML elements at the beginning of the selected element or elements.
jQuery – prop() Method
The prop() method sets properties and values of the selected elements.
jQuery – remove() Method
The remove() method removes the selected elements, including all text and child nodes.
jQuery – removeAttr() Method
The removeAttr() method removes one or more attributes from the selected elements.
jQuery – removeClass() Method
The removeClass() method removes one or more class names from the selected elements.
jQuery – removeProp() Method
The removeProp() method removes a property set by the prop() method.
jQuery – replaceAll() Method
The replaceAll() method replaces selected elements with new HTML elements.
jQuery – replaceWith() Method
The replaceWith() method replaces selected elements with new content.
jQuery – scrollLeft() Method
The scrollLeft() method sets the horizontal scrollbar position for the selected elements.
jQuery – scrollTop() Method
The scrollTop() method sets the vertical scrollbar position for the selected elements.
jQuery – text() Method
The text() method sets the text content of the selected elements, overwriting the content of ALL matched elements.
jQuery – toggleClass() Method
The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
jQuery – unwrap() Method
The unwrap() method removes the parent element of the selected elements.
jQuery – val() Method
The val() method sets the value attribute of the selected elements.
jQuery – width() Method
The width() method sets the width of the selected elements, not including padding, border, or margin.
jQuery – wrap() Method
The wrap() method wraps specified HTML element(s) around EACH selected element separately. Every selected element will be wrapped on its own.
jQuery – wrapAll() Method
The wrapAll() method wraps specified HTML element(s) around all selected elements as a whole.
jQuery – wrapInner() Method
The wrapInner() method wraps specified HTML element(s) around the CONTENT (innerHTML) of each selected element.
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
jQuery Books
All are affiliate links. Thank you for your support!
jQUERY NOTES:
- To use jQuery on your site, it must first be downloaded from the official jQuery site and linked to in your document
head, or linked to via a CDN in your documenthead - It is generally good practice to place your jQuery code/function inside the document load function so that the action takes place ONLY after the document has finished loading
- When using jQuery, single or double quotation marks are acceptable and work identically to one another; choose whichever you prefer, and stay consistent
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
