jQuery Methods

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.

jQuery Methods

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.

CategoryDescriptionExample
DOM ManipulationThese methods manipulate DOM elements in some manner e.g. changing attribute, style attribute, adding and removing elements etc.after(),
append(),
attr(),
before()
CSSThese methods get and set css related properties of elements.addClass(),
css(),
hasClass(),
removeClass()
TraversingThese 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()
EventsThese methods are used to handle DOM or JavaScript events.bind(),
blur(),
change(),
click(),
dblclick(),
focus(),
keyup(),
keydown()
AttributesThese methods get and set DOM attributes of elements.attr(),
html(),
removeAttr(),
prop(),
val()
EffectsThese methods are used to add animation to elements.animate(),
fadeIn(),
fadeOut(),
hide(),
show(),
stop()
FormsThese methods and event handlers handle forms and their various elements.
blur(),
change(),
val(),
submit()
DimensionsThese methods are used to get and set the CSS dimensions for the various properties.height(),
width(),
innerHeight(),
innerWidth()
AjaxThese methods are core methods in jQuery API.
jQuery(),
holdReady(),
when()
UtilitiesUtility methods are helpful in getting information on various things e.g. browser, function, array, window etc.inArray(),
isArray(),
isFunction(),
isNumeric(),
isWindow(),
isXmlDoc()
DataThese methods allow us to associate arbitrary data with specific DOM elements.data(),
removeData(),
queue(),
dequeue(),
clearQueue()
MiscellaneousThese methods are useful in various tasks e.g. traversing elements, converting to array etc.each(),
index(),
get(),
toArray()

More on jQuery:

Leave a Reply

Your email address will not be published. Required fields are marked *