jQuery has a collection of methods called jQuery API that make it much easier to manipulate objects on your web page than when using the traditional JavaScript methods.

jQuery API are bits of code that trigger or attach a function to event handlers for the specified elements. Here is a simple example:

<script type="text/javascript">
    $(document).ready(function() {
        $("h2.slideOver").click(function(){  // .click() is an API method that kicks into gear when the visitor clicks on the element specified
            $(this).animate({  // .animate() will cause the specified element to move and get larger as specified below
                marginLeft: "128px",
                fontSize: "100px",
                marginTop: "45px"
            }, 2000)

Three dot cartouche

List of commonly used jQuery API methods

Click on the method name to find out more.

  • :nth-child( )

    selects all of the elements that are the nth-child of the specified parent element

  • .add( )

    allows additional selectors to be added the first one for manipulation

  • .addClass( )

    adds a class name to the element(s) specified

  • .after( )

    allows you to insert content after the specified elements

  • .animate( )

    allows animation of elements, movement, changing size, fading, etc.

  • .append( )

    add content to the end of each element specified by the selector

  • .appendTo( )

    appends the contents of the specified element to each matched element

  • .attr( )

    returns the value of an attribute for the element specified

  • .before( )

    places the contents of the parameter before the element in the selector

  • .bind( )

    attach one or more event handlers to the selected elements

  • .change( )

    allows you to attach a function when an element changes value

  • .children( )

    allows you to retrieve the children elements of the selector

  • .click( )

    binds an event handler to the click event for a function

  • .clone( )

    allows you to create a deep copy of the specified element(s)

  • .closest( )

    returns the first specified ancestor of the selected element

  • .contents( )

    retrieve the children of the selected element(s)

  • .css( )

    retrieve or set inline style properties and values for the specified element

  • .data( )

    allows the storage and retrieval of data tied to the first matched element

  • .delay( )

    sets a time to delay the execution of following methods in the queue

  • .detach( )

    remove the specified element(s) from the DOM

  • .each( )

    iterate through each matched element with a function

  • .empty( )

    remove all child nodes from the element(s) that match the selector

  • .fadeIn( )

    display the selected element by adding display: block & increasing its opacity

  • .fadeOut( )

    remove the matched element(s) by decreasing opacity & adding display: none

  • .filter( )

    filter out specified elements from the group of matched elements

  • .find( )

    retrieve the specified descendants of the specified element(s)

  • .focus( )

    used to make events happen with the user clicks inside a text area

  • .get( )

    retrieve one element that matches the selector at the specified index

  • .hide()

    removes the matched element from display on the web page

  • .hover( )

    binds one or two event handlers for the mouseenter and mouseleave events

  • .html( )

    allows you to retrieve HTML contents of an element or add HTML

  • .insertAfter( )

    allows you to insert content after the specified elements

  • .length

    returns the number of elements in the specified object

  • .mousedown( )

    ties events to when the user holds the left button on the mouse down

  • .mouseenter()

    build an event handler for when the cursor enters an object

  • .mouseleave( )

    triggers actions for when the cursor leaves the specified element

  • .mouseup( )

    ties events to when the user releases the left button on the mouse

  • .next( )

    get the sibling that directly follows the selector

  • .not( )

    remove elements from the set of matched elements

  • .offset( )

    get or set the coordinates of an object relative to the screen

  • .on()

    attaches event handlers to the specified matched elements for functions

  • .parent( )

    retrieve the parent of the current selector, option to filter by a selector

  • .remove( )

    removes the specified element(s) from the DOM

  • .removeClass( )

    removes a class name from the element(s) specified

  • .show( )

    display the matched element on the web page

  • .slice( )

    select set of matched elements at a specified point

  • .stop( )

    stops the current animation

  • .toggle( )

    toggles between .hide() and .show() for the selected elements