Docstoc

jQuery

Document Sample
jQuery Powered By Docstoc
					jQuery Introduction
« Previous                                                                             Next Chapter »

The jQuery library can be added to a web page with a single line of markup.



What You Should Already Know
Before you start studying jQuery, you should have a basic knowledge of:


        HTML
        CSS
        JavaScript

If you want to study these subjects first, find the tutorials on our Home page.




What is jQuery?
jQuery is a library of JavaScript Functions.

jQuery is a lightweight "write less, do more" JavaScript library.

The jQuery library contains the following features:


        HTML element selections
        HTML element manipulation
        CSS manipulation
        HTML event functions
        JavaScript Effects and animations
        HTML DOM traversal and modification
        AJAX
        Utilities




Adding the jQuery Library to Your Pages
The jQuery library is stored as a single JavaScript file, containing all the jQuery methods.

It can be added to a web page with the following mark-up:


<head>
<script type="text/javascript" src="jquery.js"></script>
</head>


Please note that the <script> tag should be inside the page's <head> section.
Basic jQuery Example
The following example demonstrates the jQuery hide() method, hiding all <p> elements in an HTML
document.


Example
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

Try it yourself »




Downloading jQuery
Two versions of jQuery are available for downloading: one minified and one uncompressed (for debugging
or reading).

Both versions can be downloaded from jQuery.com.




Alternatives to Downloading
If you don't want to store the jQuery library on your own computer, you can use the hosted jQuery library
from Google or Microsoft.


Alternatives to Downloading
If you don't want to store the jQuery library on your own computer, you can use the hosted jQuery library
from Google or Microsoft.


Google
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script
>
</head>

Try it yourself »



Microsoft
<head>
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
</head>

Try it yourself »



With jQuery you select (query) HTML elements and perform "actions" on them.



jQuery Syntax Examples
$(this).hide()
Demonstrates the jQuery hide() method, hiding the current HTML element.

$("#test").hide()
Demonstrates the jQuery hide() method, hiding the element with id="test".

$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.

$(".test").hide()
Demonstrates the jQuery hide() method, hiding all elements with class="test".




jQuery Syntax
The jQuery syntax is tailor made for selecting HTML elements and perform some action on the
element(s).

Basic syntax is: $(selector).action()


        A dollar sign to define jQuery
        A (selector) to "query (or find)" HTML elements
        A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() - hides current element

$("p").hide() - hides all paragraphs

$("p.test").hide() - hides all paragraphs with class="test"
$("#test").hide() - hides the element with id="test"


          jQuery uses a combination of XPath and CSS selector syntax.
          You will learn more about the selector syntax in the next chapter of this tutorial.




The Document Ready Function
You might have noticed that all jQuery methods, in our examples, are inside a document.ready() function:


$(document).ready(function(){

   // jQuery functions go here...

});


This is to prevent any jQuery code from running before the document is finished loading (is ready).

Here are some examples of actions that can fail if functions are run before the document is fully loaded:


          Trying to hide an element that doesn't exist
          Trying to get the size of an image that is not loaded


jQuery Selectors
In the previous chapter we looked at some examples of how to select different HTML elements.

It is a key point to learn how jQuery selects exactly the elements you want to apply an effect to.

jQuery selectors allow you to select HTML elements (or groups of elements) by element name, attribute
name or by content.


          In HTML DOM terms:

          Selectors allow you to manipulate DOM elements as a group or as a single node.




jQuery Element Selectors
jQuery uses CSS selectors to select HTML elements.

$("p") selects all <p> elements.

$("p.intro") selects all <p> elements with class="intro".

$("p#demo") selects all <p> elements with id="demo".




jQuery Attribute Selectors
jQuery uses XPath expressions to select elements with given attributes.

$("[href]") select all elements with an href attribute.

$("[href='#']") select all elements with an href value equal to "#".

$("[href!='#']") select all elements with an href attribute NOT equal to "#".

$("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".




jQuery CSS Selectors
jQuery CSS selectors can be used to change CSS properties for HTML elements.

The following example changes the background-color of all p elements to yellow:


Example
$("p").css("background-color","yellow");

Try it yourself »




Some More Examples
Syntax                      Description
$(this)                     Current HTML element
$("p")                      All <p> elements
$("p.intro")                All <p> elements with class="intro"
$("p#intro")                All <p> elements with id="intro"
$("p#intro:first")          The first <p> element with id="intro"
$(".intro")                 All elements with class="intro"
$("#intro")                 The first element with id="intro"
$("ul li:first")            The first <li> element of each <ul>
$("[href$='.jpg']")         All elements with an href attribute that ends with ".jpg"
$("div#intro .head")        All elements with class="head" inside a <div> element with id="intro"


Use our excellent jQuery Selector Tester to experiment with the different selectors.

For a full reference please go to our jQuery Selectors Reference


jQuery Event Functions
The jQuery event handling methods are core functions in jQuery.

Event handlers are method that are called when "something happens" in HTML. The term "triggered (or
"fired") by an event" is often used.
It is common to put jQuery code into event handler methods in the <head> section:


Example
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

Try it yourself »


In the example above, a function is called when the click event for the button is triggered:

$("button").click(function() {..some code... } )

The method hides all <p> elements:

$("p").hide();




Functions In a Separate File
If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, put
your jQuery functions in a separate .js file.

When we demonstrate jQuery here, the functions are added directly into the <head> section, However,
sometimes it is preferable to place them in a separate file, like this (refer to the file with the src attribute):


Example
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>




jQuery Name Conflicts
jQuery uses the $ sign as a shortcut for jQuery.

Some other JavaScript libraries also use the dollar sign for their functions.

The jQuery noConflict() method specifies a custom name (like jq), instead of using the dollar sign.

Try it yourself »




jQuery Events
Here are some examples of event methods in jQuery:


Event Method                       Description
$(document).ready(function)        Binds a function to the ready event of a document
                                   (when the document is finished loading)
$(selector).click(function)        Triggers, or binds a function to the click event of selected elements
$(selector).dblclick(function)     Triggers, or binds a function to the double click event of selected
                                   elements
$(selector).focus(function)        Triggers, or binds a function to the focus event of selected elements
$(selector).mouseover(function) Triggers, or binds a function to the mouseover event of selected
                                elements


For a full jQuery event reference, please go to our jQuery Events Reference.




« Previous                                                                              Next Chapter »

Free Online Website Builder - No Downloading Needed
Create a free Flash website with our simple, online web design editing platform. Stunning templates and
user-friendly tools make website building easy and fun.

Start Creating your free website now!




Altova® MissionKit® - Integrated Suite of XML Tools



The Altova MissionKit is an integrated suite of tools ideal for:


        XML development
        Web & Web services development
        Data mapping & integration
        Rendering & publishing XML & database data
        XBRL validation, taxonomy editing, transformation & rendering
         Chart & report generation for XML & XBRL

The MissionKit for XML Developers includes XMLSpy® - the industry-leading XML editor; MapForce® - a
graphical data mapping, conversion, and integration tool; StyleVision® - a visual XSLT stylesheet and
report designer; DiffDog® - an XML-aware diff/merge tool; and 2 additional tools.

Try all 6 products free for 30 days!

Download a fully-functional free trial

Hide, Show, Toggle, Slide, Fade, and Animate. WOW!

                                       Click Here to Show/Hide Panel




Examples
jQuery hide()
Demonstrates a simple jQuery hide() method.

jQuery hide()
Another hide() demonstration. How to hide parts of text.

jQuery slideToggle()
Demonstrates a simple slide panel effect.

jQuery fadeTo()
Demonstrates a simple jQuery fadeTo() method.

jQuery animate()
Demonstrates a simple jQuery animate() method.




jQuery Hide and Show
With jQuery, you can hide and show HTML elements with the hide() and show() methods:


Example
$("#hide").click(function(){
  $("p").hide();
});
$("#show").click(function(){
  $("p").show();
});

Try it yourself »


Both hide() and show() can take the two optional parameters: speed and callback.

Syntax:
$(selector).hide(speed,callback)

$(selector).show(speed,callback)

The speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow",
"fast", "normal", or milliseconds:


Example
$("button").click(function(){
  $("p").hide(1000);
});

Try it yourself »


The callback parameter is the name of a function to be executed after the hide (or show) function
completes. You will learn more about the callback parameter in the next chapter of this tutorial.




jQuery Toggle
The jQuery toggle() method toggles the visibility of HTML elements using the show() or hide() methods.

Shown elements are hidden and hidden elements are shown.

Syntax:

$(selector).toggle(speed,callback)

The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.


Example
$("button").click(function(){
  $("p").toggle();
});

Try it yourself »


The callback parameter is the name of a function to be executed after the hide (or show) method
completes.




jQuery Slide - slideDown, slideUp, slideToggle
The jQuery slide methods gradually change the height for selected elements.

jQuery has the following slide methods:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.

The callback parameter is the name of a function to be executed after the function completes.


slideDown() Example
$(".flip").click(function(){
  $(".panel").slideDown();
});

Try it yourself »



slideUp() Example
$(".flip").click(function(){
  $(".panel").slideUp()
})

Try it yourself »



slideToggle() Example
$(".flip").click(function(){
  $(".panel").slideToggle();
});

Try it yourself »




jQuery Fade - fadeIn, fadeOut, fadeTo
The jQuery fade methods gradually change the opacity for selected elements.

jQuery has the following fade methods:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.

The opacity parameter in the fadeTo() method allows fading to a given opacity.

The callback parameter is the name of a function to be executed after the function completes.


fadeTo() Example
$("button").click(function(){
  $("div").fadeTo("slow",0.25);
});

Try it yourself »



fadeOut() Example
$("button").click(function(){
  $("div").fadeOut(4000);
});

Try it yourself »




jQuery Custom Animations
The syntax of jQuery's method for making custom animations is:

$(selector).animate({params},[duration],[easing],[callback])

The key parameter is params. It defines the CSS properties that will be animated. Many properties can
be animated at the same time:


animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});


The second parameter is duration. It specifies the speed of the animation. Possible values are "fast",
"slow", "normal", or milliseconds.


Example 1
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({height:300},"slow");
    $("div").animate({width:300},"slow");
    $("div").animate({height:100},"slow");
    $("div").animate({width:100},"slow");
  });
});
</script>

Try it yourself »



Example 2
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:"100px"},"slow");
    $("div").animate({fontSize:"3em"},"slow");
  });
});
</script>

Try it yourself »
        HTML elements are positioned static by default and cannot be moved.
        To make elements moveable, set the CSS position property to fixed, relative or absolute.




jQuery Effects
Here are some examples of effect functions in jQuery:


Function                            Description
$(selector).hide()                  Hide selected elements
$(selector).show()                  Show selected elements
$(selector).toggle()                Toggle (between hide and show) selected elements
$(selector).slideDown()             Slide-down (show) selected elements
$(selector).slideUp()               Slide-up (hide) selected elements
$(selector).slideToggle()           Toggle slide-up and slide-down of selected elements
$(selector).fadeIn()                Fade in selected elements
$(selector).fadeOut()               Fade out selected elements
$(selector).fadeTo()                Fade out selected elements to a given opacity
$(selector).animate()               Run a custom animation on selected elements


For a full jQuery effect reference, please go to our jQuery Effect Reference.


jQuery Callback Functions
A callback function is executed after the current animation (effect) is finished.

JavaScript statements are executed line by line. However, with animations, the next line of code can be
run even though the animation is not finished. This can create errors.

To prevent this, you can create a callback function. The callback function will not be called until after the
animation is finished.




jQuery Callback Example
Typical syntax: $(selector).hide(speed,callback)

The callback parameter is a function to be executed after the hide effect is completed:


Example with Callback
$("p").hide(1000,function(){
  alert("The paragraph is now hidden");
});

Try it yourself »


Without a callback parameter, the alert box is displayed before the hide effect is completed:
Example without Callback
$("p").hide(1000);
alert("The paragraph is now hidden");

Try it yourself »



Changing HTML Content
$(selector).html(content)

The html() method changes the contents (innerHTML) of matching HTML elements.


Example
$("p").html("W3Schools");

Try it yourself »




Adding HTML content
$(selector).append(content)

The append() method appends content to the inside of matching HTML elements.

$(selector).prepend(content)

The prepend() method "prepends" content to the inside of matching HTML elements.


Example
$("p").append(" W3Schools");

Try it yourself »



$(selector).after(content)

The after() method inserts HTML content after all matching elements.

$(selector).before(content)

The before() method inserts HTML content before all matching elements.


Example
$("p").after(" W3Schools.");

Try it yourself »
jQuery HTML Manipulation Methods From This Page:
Function                           Description
$(selector).html(content)          Changes the (inner) HTML of selected elements
$(selector).append(content)        Appends content to the (inner) HTML of selected elements
$(selector).after(content)         Adds HTML after selected elements


For a full jQuery HTML reference, please go to our jQuery HTML Methods Reference.


jQuery css() Method
jQuery has one important method for CSS manipulation: css()

The css() method has three different syntaxes, to perform different tasks.


        css(name) - Return CSS property value
        css(name,value) - Set CSS property and value
        css({properties}) - Set multiple CSS properties and values




Return CSS Property
Use css(name) to return the specified CSS property value of the FIRST matched element:


Example
$(this).css("background-color");

Try it yourself »




Set CSS Property and Value
Use css(name,value) to set the specified CSS property for ALL matched elements:


Example
$("p").css("background-color","yellow");

Try it yourself »




Set Multiple CSS Property/Value Pairs
Use css({properties}) to set one or more CSS property/value pairs for the selected elements:
Example
$("p").css({"background-color":"yellow","font-size":"200%"});

Try it yourself »




jQuery height() and width() Methods
jQuery has two important methods for size manipulation.


       height()
       width()




Size Manipulation Examples
The height() method sets the height of all matching elements:


Example
$("#div1").height("200px");

Try it yourself »


The width() method sets the width of all matching elements:


Example
$("#div2").width("300px");

Try it yourself »




jQuery CSS Methods From this Page:
CSS Properties                     Description
$(selector).css(name)              Get the style property value of the first matched element
$(selector).css(name,value)        Set the value of one style property for matched elements
$(selector).css({properties})      Set multiple style properties for matched elements
$(selector).height(value)          Set the height of matched elements
$(selector).width(value)           Set the width of matched elements


For a full jQuery CSS reference, please go to our jQuery CSS Methods Reference.


What is AJAX?
AJAX = Asynchronous JavaScript and XML.
AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the
server behind the scenes. This means that it is possible to update parts of a web page, without reloading
the whole page.

You can learn more about AJAX in our AJAX tutorial.




AJAX and jQuery
jQuery provides a rich set of methods for AJAX web development.

With jQuery AJAX, you can request TXT, HTML, XML or JSON data from a remote server using both HTTP
Get and HTTP Post.

And you can load remote data directly into selected HTML elements of your web page!




Write Less, Do More
The jQuery load() method is a simple (but very powerful) AJAX function. It has the following syntax:

$(selector).load(url,data,callback)

Use the selector to define the HTML element(s) to change, and the url parameter to specify a web
address for your data.

Try it yourself »


Only if you want to send data to the server, you need to use the data parameter. Only if you need to
trigger a function after completion, you will use the callback parameter.




Low Level AJAX
$.ajax(options) is the syntax of the low level AJAX function.

$.ajax offers more functionality than higher level functions like load, get, and post, but it is also more
difficult to use.

The option parameter takes name|value pairs defining url data, passwords, data types, filters, character
sets, timeout and error functions.

Try it yourself »




jQuery AJAX Methods From This Page:
Request                                       Description
$(selector).load(url,data,callback)           Load remote data into selected elements
$.ajax(options)                             Load remote data into an XMLHttpRequest object


For a full jQuery AJAX reference, please go to our jQuery AJAX Methods Reference.


jQuery Syntax Examples
$(this).hide()
Demonstrates the jQuery hide() method, hiding the current HTML element.

$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.

$(".test").hide()
Demonstrates the jQuery hide() method, hiding all elements, with class="test".

$("#test").hide()
Demonstrates the jQuery hide() method, hiding the element, with id="test".

Examples explained




Hiding - Sliding- Fading
jQuery fadeOut()
Demonstrates a simple jQuery fadeout() method.

jQuery hide()
Demonstrates a simple jQuery hide() method.

Hide explanations
Demonstrates how to hide parts of text.

Slide panel
Demonstrates a simple Slide Panel effect.

jQuery animate()
Demonstrates a simple jQuery animate() method.

Examples explained




HTML Manipulation
Change the Content of an HTML element

Append content to HTML elements

Append content after HTML elements

Examples explained
CSS Manipulation
Change a CSS property of HTML elements

Change multiple CSS properties

Get a CSS property from an element

Examples explained




AJAX and jQuery
Change HTML content using $(selector).load(url)

Change HTML content using $.ajax(options)

Examples explained


jQuery Selectors
Use our excellent jQuery Selector Tester to experiment with the different selectors.


Selector           Example                      Selects
*                  $("*")                       All elements
#id                $("#lastname")               The element with id=lastname
.class             $(".intro")                  All elements with class="intro"
element            $("p")                       All p elements
.class.class       $(".intro.demo")             All elements with the classes "intro" and "demo"


:first             $("p:first")                 The first p element
:last              $("p:last")                  The last p element
:even              $("tr:even")                 All even tr elements
:odd               $("tr:odd")                  All odd tr elements


:eq(index)         $("ul li:eq(3)")             The fourth element in a list (index starts at 0)
:gt(no)            $("ul li:gt(3)")             List elements with an index greater than 3
:lt(no)            $("ul li:lt(3)")             List elements with an index less than 3
:not(selector)     $("input:not(:empty)")       All input elements that are not empty


:header            $(":header")                 All header elements h1, h2 ...
:animated          $(":animated")               All animated elements


:contains(text)    $(":contains('W3Schools')") All elements which contains the text
:empty             $(":empty")                  All elements with no child (elements) nodes
:hidden            $("p:hidden")                All hidden p elements
:visible            $("table:visible")            All visible tables


s1,s2,s3            $("th,td,.intro")             All elements with matching selectors


[attribute]         $("[href]")                   All elements with a href attribute
[attribute=value]   $("[href='default.htm']")     All elements with a href attribute value equal to
                                                  "default.htm"
[attribute!=value] $("[href!='default.htm']")     All elements with a href attribute value not equal to
                                                  "default.htm"
[attribute$=value] $("[href$='.jpg']")            All elements with a href attribute value ending with ".jpg"


:input              $(":input")                   All input elements
:text               $(":text")                    All input elements with type="text"
:password           $(":password")                All input elements with type="password"
:radio              $(":radio")                   All input elements with type="radio"
:checkbox           $(":checkbox")                All input elements with type="checkbox"
:submit             $(":submit")                  All input elements with type="submit"
:reset              $(":reset")                   All input elements with type="reset"
:button             $(":button")                  All input elements with type="button"
:image              $(":image")                   All input elements with type="image"
:file               $(":file")                    All input elements with type="file"


:enabled            $(":enabled")                 All enabled input elements
:disabled           $(":disabled")                All disabled input elements
:selected           $(":selected")                All selected input elements
:checked            $(":checked")                 All checked input elements


jQuery Event Methods
Event methods trigger, or bind a function to an event for all matching elements.

Trigger example:

$("button").click() - triggers the click event for a button element.

Binding example:

$("button").click(function(){$("img").hide()}) - binds a function to the click event.

The following table lists all the methods used to handle events.


Method                                          Description
bind()                                          Add one or more event handlers to matching elements
blur()                                          Triggers, or binds a function to the blur event of selected
                                                elements
change()                                        Triggers, or binds a function to the change event of selected
                                                elements
click()                                         Triggers, or binds a function to the click event of selected
                                        elements
dblclick()                              Triggers, or binds a function to the dblclick event of selected
                                        elements
delegate()                              Add one or more event handlers to current, or future,
                                        specified child elements of the matching elements
die()                                   Remove all event handlers added with the live() function
error()                                 Triggers, or binds a function to the error event of selected
                                        elements
event.currentTarget                     The current DOM element within the event bubbling phase
event.data                              Contains the optional data passed to jQuery.fn.bind when
                                        the current executing handler was bound
event.isDefaultPrevented()              Returns whether event.preventDefault() was called for the
                                        event object
event.isImmediatePropagationStopped()   Returns whether event.stopImmediatePropagation() was
                                        called for the event object
event.isPropagationStopped()            Returns whether event.stopPropagation() was called for the
                                        event object
event.pageX                             The mouse position relative to the left edge of the
                                        document
event.pageY                             The mouse position relative to the top edge of the
                                        document
event.preventDefault()                  Prevents the default action of the event
event.relatedTarget                     The other DOM element involved in the event, if any
event.result                            This attribute contains the last value returned by an event
                                        handler that was triggered by this event, unless the value
                                        was undefined
event.stopImmediatePropagation()        Prevents other event handlers from being called
event.stopPropagation()                 Prevents the event from bubbling up the DOM tree,
                                        preventing any parent handlers from being notified of the
                                        event
event.target                            The DOM element that initiated the event
event.timeStamp                         This attribute returns the number of milliseconds since
                                        January 1, 1970, when the event is triggered
event.type                              Describes the nature of the event
event.which                             Which key or button was pressed for a key or button event
focus()                                 Triggers, or binds a function to the focus event of selected
                                        elements
focusin()                               Binds a function to the focusin event of selected elements
focusout()                              Binds a function to the focusout event of selected elements
hover()                                 Binds one or two functions to the hover event of selected
                                        elements
keydown()                               Triggers, or binds a function to the keydown event of
                                        selected elements
keypress()                              Triggers, or binds a function to the keypress event of
                                        selected elements
keyup()                                 Triggers, or binds a function to the keyup event of selected
                                        elements
live()                                  Add one or more event handlers to current, or future,
                                        matching elements
load()                                  Triggers, or binds a function to the load event of selected
                                        elements
mousedown()                                    Triggers, or binds a function to the mouse down event of
                                               selected elements
mouseenter()                                   Triggers, or binds a function to the mouse enter event of
                                               selected elements
mouseleave()                                   Triggers, or binds a function to the mouse leave event of
                                               selected elements
mousemove()                                    Triggers, or binds a function to the mouse move event of
                                               selected elements
mouseout()                                     Triggers, or binds a function to the mouse out event of
                                               selected elements
mouseover()                                    Triggers, or binds a function to the mouse over event of
                                               selected elements
mouseup()                                      Triggers, or binds a function to the mouse up event of
                                               selected elements
one()                                          Add one or more event handlers to matching elements. This
                                               handler can only be triggered once per element
ready()                                        Binds a function to the ready event of a document
                                               (when an HTML document is ready to use)
resize()                                       Triggers, or binds a function to the resize event of selected
                                               elements
scroll()                                       Triggers, or binds a function to the scroll event of selected
                                               elements
select()                                       Triggers, or binds a function to the select event of selected
                                               elements
submit()                                       Triggers, or binds a function to the submit event of selected
                                               elements
toggle()                                       Binds two or more functions to the toggle between for the
                                               click event for selected elements
trigger()                                      Triggers all events bound to the selected elements
triggerHandler()                               Triggers all functions bound to a specified event for the
                                               selected elements
unbind()                                       Remove an added event handler from selected elements
undelegate()                                   Remove an event handler to selected elements, now or in
                                               the future
unload()                                       Triggers, or binds a function to the unload event of selected
                                               elements



jQuery Effect Methods
The following table lists all the methods used to create animation effects.


Method                Description
animate()             Performs a custom animation (of a set of CSS properties) for selected elements
clearQueue()          Removes all queued functions for the selected element
delay()               Sets a delay for all queued functions for the selected element
dequeue()             Runs the next queued functions for the selected element
fadeIn()              Gradually changes the opacity, for selected elements, from hidden to visible
fadeOut()             Gradually changes the opacity, for selected elements, from visible to hidden
fadeTo()              Gradually changes the opacity, for selected elements, to a specified opacity
fadeToggle()
hide()               Hides selected elements
queue()              Shows the queued functions for the selected element
show()               Shows hidden selected elements
slideDown()          Gradually changes the height, for selected elements, from hidden to visible
slideToggle()        Toggles between slideUp() and slideDown() for selected elements
slideUp()            Gradually changes the height, for selected elements, from visible to hidden
stop()               Stops a running animation on selected elements
toggle()             Toggles between hide() and show(), or custom functions, for selected elements


jQuery HTML Methods
The following table lists all the methods used to manipulate the DOM.

The methods below work for both HTML and XML documents. Exception: the html() method.


Method               Description
addClass()           Adds one or more classes (for CSS) to selected elements
after()              Inserts content after selected elements
append()             Inserts content at the end of (but still inside) selected elements
appendTo()           Inserts content at the end of (but still inside) selected elements
attr()               Sets or returns an attribute and value of selected elements
before()             Inserts content before selected elements
clone()              Makes a copy of selected elements
detach()             Removes (but keeps a copy of) selected elements
empty()              Removes all child elements and content from selected elements
hasClass()           Checks if any of the selected elements have a specified class (for CSS)
html()               Sets or returns the content of selected elements
insertAfter()        Inserts HTML markup or elements after selected elements
insertBefore()       Inserts HTML markup or elements before selected elements
prepend()            Inserts content at the beginning of (but still inside) selected elements
prependTo()          Inserts content at the beginning of (but still inside) selected elements
remove()             Removes selected elements
removeAttr()         Removes an attribute from selected elements
removeClass()        Removes one or more classes (for CSS) from selected elements
replaceAll()         Replaces selected elements with new content
replaceWith()        Replaces selected elements with new content
text()               Sets or returns the text content of selected elements
toggleClass()        Toggles between adding/removing one or more classes (for CSS) from selected
                     elements
unwrap()             Removes the parent element of the selected elements
val()                Sets or returns the value attribute of the selected elements (form elements)
wrap()               Wraps specified HTML element(s) around each selected element
wrapAll()            Wraps specified HTML element(s) around all selected elements
wrapInner()          Wraps specified HTML element(s) around the content of each selected element
jQuery CSS Methods
The following table lists all the methods used to manipulate CSS properties.


Method               Description
addClass()           Adds one or more classes to selected elements
css()                Sets or returns one or more style properties for selected elements
hasClass()           Checks if any of the selected elements have a specified class
height()             Sets or returns the height of selected elements
offset()             Sets or returns the position (relative to the document) for selected elements
offsetParent()       Returns the first parent element that is positioned
position()           Returns the position (relative to the parent element) of the first selected element
removeClass()        Removes one or more classes from selected elements
scrollLeft()         Sets or returns the horizontal position of the scrollbar for the selected elements
scrollTop()          Sets or returns the vertical position of the scrollbar for the selected elements
toggleClass()        Toggles between adding/removing one or more classes from selected elements
width()              Sets or returns the width of selected elements

jQuery AJAX Methods
AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the
whole page.

The following table lists all the jQuery AJAX methods:


Method               Description
$.ajax()             Performs an AJAX request
ajaxComplete()       Specifies a function to run when the AJAX request completes
ajaxError()          Specifies a function to run when the AJAX request completes with an error
ajaxSend()           Specifies a function to run before the AJAX request is sent
$.ajaxSetup()        Sets the default values for future AJAX requests
ajaxStart()          Specifies a function to run when the first AJAX request begins
ajaxStop()           Specifies a function to run when all AJAX requests have completed
ajaxSuccess()        Specifies a function to run an AJAX request completes successfully
$.get()              Loads data from a server using an AJAX HTTP GET request
$.getJSON()          Loads JSON-encoded data from a server using a HTTP GET request
$.getScript()        Loads (and executes) a JavaScript from the a server using an AJAX HTTP GET
                     request
load()               Loads data from a server and puts the returned HTML into the selected element
$.param()            Creates a serialized representation of an array or object (can be used as URL query
                     string for AJAX requests)
$.post()             Loads data from a server using an AJAX HTTP POST request
serialize()          Encodes a set of form elements as a string for submission
serializeArray()     Encodes a set of form elements as an array of names and values



jQuery Misc Methods
Method           Description
data()           Attaches data to, or gets data from, selected elements
each()           Run a function for each element matched by the jQuery selector
get()            Get the DOM elements matched by the selector
index()          Search for a given element from among the matched elements
$.noConflict()   Release jQuery's control of the $ variable
$.param()        Creates a serialized representation of an array or object (can be used as URL query
                 string for AJAX requests)
removeData()     Removes a previously-stored piece of data
size()           Return the number of DOM elements matched by the jQuery selector
toArray()        Retrieve all the DOM elements contained in the jQuery set, as an array

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:14
posted:9/23/2011
language:English
pages:24