You learned about jQuery selectors in the previous section. jQuery selectors search for specific DOM elements and wrap them in jQuery objects. For example, in JavaScript, document.getElementById() returns a DOM object, while $(‘#id’) returns a jQuery object.
Let’s check below, following diagram shows the difference.
As you can see in the image above, the document.getElementById function returns a div element, while the jQuery selector returns a jQuery object that represents a wrapper for the div element.
Now you can call jQuery methods on the jQuery object returned by the jQuery selector.
jQuery provides various methods for different tasks e.g. manipulate DOM, events, ajax etc. The following table lists different categories of methods.
| Category | Description | Example |
|---|---|---|
| DOM Manipulation | These methods manipulate DOM elements in some manner e.g. changing attribute, style attribute, adding and removing elements etc. | after(), append(), attr(), before() |
| CSS | These methods get and set css related properties of elements. | addClass(), css(), hasClass(), removeClass() |
| Traversing | These methods help in navigating from DOM element to another element in a parent child hierarchy e.g. finding ancestors, descendants or sibling element of a specified element. | children(), closest(), each(), first(), next(), filter(), parent(), siblings() |
| Events | These methods are used to handle DOM or JavaScript events. | bind(), blur(), change(), click(), dblclick(), focus(), keyup(), keydown() |
| Attributes | These methods get and set DOM attributes of elements. | attr(), html(), removeAttr(), prop(), val() |
| Effects | These methods are used to add animation to elements. | animate(), fadeIn(), fadeOut(), hide(), show(), stop() |
| Forms | These methods and event handlers handle forms and their various elements. | blur(), change(), val(), submit() |
| Dimensions | These methods are used to get and set the CSS dimensions for the various properties. | height(), width(), innerHeight(), innerWidth() |
| Ajax | These methods are core methods in jQuery API. | jQuery(), holdReady(), when() |
| Utilities | Utility methods are helpful in getting information on various things e.g. browser, function, array, window etc. | inArray(), isArray(), isFunction(), isNumeric(), isWindow(), isXmlDoc() |
| Data | These methods allow us to associate arbitrary data with specific DOM elements. | data(), removeData(), queue(), dequeue(), clearQueue() |
| Miscellaneous | These methods are useful in various tasks e.g. traversing elements, converting to array etc. | each(), index(), get(), toArray() |
More on jQuery:
- How to Center a Popup Window on Screen
- How to hide URL in the popup window opened using window.open
- window.showModalDialog is deprecated in Edge and Chrome
- Cloning JavaScript Object with Object.create
- Set new Attribute in XML using jQuery
- DOMParser: parseFromString() method
- What is the use of attr() method in jQuery?
- What is jQuery CDN?
- Difference between $(this) and ‘this’ in jQuery
- jQuery important questions
- Checkbox validation in jQuery
- Difference between offset and position in jQuery?
- How to change the background image using jQuery?
- jQuery Methods
- jQuery Selectors
- jQuery Downloading
- jQuery History