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

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

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

jQuery Selectors
Use our excellent jQuery Selector Tester to experiment with the different selectors. Selector * #id Example $("*") $("#lastname") Selects All elements The element with id=lastname

.class element .class.class :first :last :even :odd :eq(index) :gt(no) :lt(no) :not(selector) :header :animated :contains(text) :empty :hidden :visible s1,s2,s3 [attribute]

$(".intro") $("p") $(".intro.demo") $("p:first") $("p:last") $("tr:even") $("tr:odd") $("ul li:eq(3)") $("ul li:gt(3)") $("ul li:lt(3)") $("input:not(:empty)") $(":header") $(":animated")

All elements with class="intro" All p elements All elements with the classes "intro" and "demo" The first p element The last p element All even tr elements All odd tr elements The fourth element in a list (index starts at 0) List elements with an index greater than 3 List elements with an index less than 3 All input elements that are not empty All header elements h1, h2 ... All animated elements

$(":contains('W3Schools')") All elements which contains the text $(":empty") All elements with no child (elements) nodes $("p:hidden") All hidden p elements $("table:visible") All visible tables $("th,td,.intro") $("[href]") All elements with matching selectors All elements with a href attribute All elements with a href attribute value equal to "default.htm" All elements with a href attribute value not equal to "default.htm" All elements with a href attribute value ending with ".jpg" All input elements All input elements with type="text" All input elements with type="password" All input elements with type="radio" All input elements with type="checkbox" All input elements with type="submit" All input elements with type="reset"

[attribute=value] $("[href='default.htm']") [attribute!=value] $("[href!='default.htm']") [attribute$=value] $("[href$='.jpg']") :input :text :password :radio :checkbox :submit :reset $(":input") $(":text") $(":password") $(":radio") $(":checkbox") $(":submit") $(":reset")

:button :image :file :enabled :disabled :selected :checked

$(":button") $(":image") $(":file") $(":enabled") $(":disabled") $(":selected") $(":checked")

All input elements with type="button" All input elements with type="image" All input elements with type="file" All enabled input elements All disabled input elements All selected input elements All checked input elements

The following table lists all the methods used to handle events. Method bind() Description Add one or more event handlers to matching elements Triggers, or binds a function to the blur event of blur() selected elements Triggers, or binds a function to the change event of change() selected elements Triggers, or binds a function to the click event of click() selected elements Triggers, or binds a function to the dblclick event of dblclick() selected elements Add one or more event handlers to current, or future, delegate() specified child elements of the matching elements Remove all event handlers added with the live() die() function Triggers, or binds a function to the error event of error() selected elements The current DOM element within the event bubbling event.currentTarget phase Contains the optional data passed to jQuery.fn.bind event.data when the current executing handler was bound Returns whether event.preventDefault() was called for event.isDefaultPrevented() the event object Returns whether event.stopImmediatePropagation() event.isImmediatePropagationStopped() was called for the event object Returns whether event.stopPropagation() was called event.isPropagationStopped() for the event object The mouse position relative to the left edge of the event.pageX document The mouse position relative to the top edge of the event.pageY document

event.preventDefault() event.relatedTarget event.result event.stopImmediatePropagation() event.stopPropagation() event.target event.timeStamp event.type event.which focus() focusin() focusout() hover() keydown() keypress() keyup() live() load() mousedown() mouseenter() mouseleave() mousemove()

Prevents the default action of the event The other DOM element involved in the event, if any This attribute contains the last value returned by an event handler that was triggered by this event, unless the value was undefined Prevents other event handlers from being called Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event The DOM element that initiated the event This attribute returns the number of milliseconds since January 1, 1970, when the event is triggered Describes the nature of the event Which key or button was pressed for a key or button event Triggers, or binds a function to the focus event of selected elements Binds a function to the focusin event of selected elements Binds a function to the focusout event of selected elements Binds one or two functions to the hover event of selected elements Triggers, or binds a function to the keydown event of selected elements Triggers, or binds a function to the keypress event of selected elements Triggers, or binds a function to the keyup event of selected elements Add one or more event handlers to current, or future, matching elements Triggers, or binds a function to the load event of selected elements Triggers, or binds a function to the mouse down event of selected elements Triggers, or binds a function to the mouse enter event of selected elements Triggers, or binds a function to the mouse leave event of selected elements Triggers, or binds a function to the mouse move event of selected elements

mouseout() mouseover() mouseup() one() ready() resize() scroll() select() submit() toggle() trigger() triggerHandler() unbind() undelegate() unload()

Triggers, or binds a function to the mouse out event of selected elements Triggers, or binds a function to the mouse over event of selected elements Triggers, or binds a function to the mouse up event of selected elements Add one or more event handlers to matching elements. This handler can only be triggered once per element Binds a function to the ready event of a document (when an HTML document is ready to use) Triggers, or binds a function to the resize event of selected elements Triggers, or binds a function to the scroll event of selected elements Triggers, or binds a function to the select event of selected elements Triggers, or binds a function to the submit event of selected elements Binds two or more functions to the toggle between for the click event for selected elements Triggers all events bound to the selected elements Triggers all functions bound to a specified event for the selected elements Remove an added event handler from selected elements Remove an event handler to selected elements, now or in the future Triggers, or binds a function to the unload event of 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 addClass() after() append() appendTo() Description Adds one or more classes (for CSS) to selected elements Inserts content after selected elements Inserts content at the end of (but still inside) selected elements Inserts content at the end of (but still inside) selected elements

attr() before() clone() detach() empty() hasClass() html() insertAfter() insertBefore() prepend() prependTo() remove() removeAttr() removeClass() replaceAll() replaceWith() text() toggleClass() unwrap() val() wrap() wrapAll() wrapInner()

Sets or returns an attribute and value of selected elements Inserts content before selected elements Makes a copy of selected elements Removes (but keeps a copy of) selected elements Removes all child elements and content from selected elements Checks if any of the selected elements have a specified class (for CSS) Sets or returns the content of selected elements Inserts HTML markup or elements after selected elements Inserts HTML markup or elements before selected elements Inserts content at the beginning of (but still inside) selected elements Inserts content at the beginning of (but still inside) selected elements Removes selected elements Removes an attribute from selected elements Removes one or more classes (for CSS) from selected elements Replaces selected elements with new content Replaces selected elements with new content Sets or returns the text content of selected elements Toggles between adding/removing one or more classes (for CSS) from selected elements Removes the parent element of the selected elements Sets or returns the value attribute of the selected elements (form elements) Wraps specified HTML element(s) around each selected element Wraps specified HTML element(s) around all selected elements Wraps specified HTML element(s) around the content of each selected element

jQuery Misc Methods

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

The following table lists all the jQuery AJAX methods:

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