jQuery Methods

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

You learned about jQuery selectors in the previous section. The jQuery selector finds particular DOM element(s) and wraps them with jQuery object. For example, document.getElementById() in the JavaScript will return DOM object whereas $('#id') will return jQuery object. The following figure illustrates the difference.

jQuery Methods

As you can see in the above figure, document.getElementById function returns div element whereas jQuery selector returns jQuery object which is a wrapper around div element. So now, you can call jQuery methods of jQuery object which is returned by 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 Imp Methods
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(),
more..
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(),
more..
CSS These methods get and set css related properties of elements. addClass(), 
css(), 
hasClass(), 
removeClass(),
toggleClass()
more..
Attributes These methods get and set DOM attributes of elements. attr(),
html(),
removeAttr(), 
prop(), 
val(), 
more..
Events These methods are used to handle DOM or JavaScript events. bind(), 
blur(), 
change(), 
click(), 
dblclick(),
focus(),
keyup(),
keydown(),
more..
Effects These methods are used to add animation to elements. animate(),
fadeIn(),
fadeOut(),
hide(),
show(),
stop(),
more..
Dimensions These methods are used to get and set the CSS dimensions for the various properties. height(),
width(),
innerHeight(),
innerWidth(),
more..
Forms These methods and event handlers handle forms and their various elements. blur(),
change(),
val(),
submit(),
more..
Ajax These methods allow Ajax functionalities with jQuery e.g. get(),
getJson(),
post(),
load(),
more..
Core These methods are core methods in jQuery API. jQuery(),
holdReady(),
when(),
more..
Data These methods allow us to associate arbitrary data with specific DOM elements. data(),
removeData(),
queue(),
dequeue(),
clearQueue(),
more..
Miscellaneous These methods are useful in various tasks e.g. traversing elements, converting to array etc. each(),
index(),
get(),
toArray(),
more..
Utilities Utility methods are helpful in getting information on various things e.g. browser, function, array, window etc. inArray(),
isArray(),
isFunction(),
isNumeric(),
isWindow(),
isXmlDoc(),
more..

The following example shows how to use some of the jQuery methods to manipulate DOM elements.

jQuery methods Example:


<!DOCTYPE html>
            
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="~/Scripts/jquery-2.1.3.js"></script>
    <script type="">
        $(document).ready(function () {

            $('p').wrap('<div class="myCls">'); @* wrap all p with div *@
            $('#myDiv').hide(); @* hides div whose id is myDiv  *@
            $('span').attr(  @*sets style and width attribute on all span *@
                {
                    'style': 'border:solid',
                    'width': '100%'
                });
            $('p').append('This is p.'); @* append text to <p> *@

            $('span').before('<p>This is another p</p>'); @* insert <p> before span  *@

        });
    </script>
</head>

<body>
    <div id="myDiv"></div>
    <p></p>
    <span></span>
</body>
</html>

Learn about DOM and CSS related methods in the next sections.