Download jQuery Visual Cheat Sheet (by WOORK) PDF

TitlejQuery Visual Cheat Sheet (by WOORK)
TagsJ Query Cascading Style Sheets Queue (Abstract Data Type) Html Java Script
File Size536.1 KB
Total Pages6
Document Text Contents
Page 2

★ CORE / 3. DATA ★ ATTRIBUTES / 3. HTML

data( name )
Returns value at named data store for the
element, as set by data(name, value).

Any

data( name, value )
Stores the value in the named spot.

jQuery

removeData( name )
Removes named data store from an element.

jQuery

queue( name )
Returns a reference to the first element's queue
(which is an array of functions).

a<Fx>

queue( name, callback )
Adds a new function, to be executed, onto the
end of the queue of all matched elements.

jQuery

queue( name, queue )
Replaces the queue of all matched element with
this new queue (the array of functions).

jQuery

dequeue( name )
Removes a queued function from the front of the
queue and executes it.

jQuery

★ CORE / 1. THE JQUERY FUNCTION

jQuery( expression, context )
This function accepts a string containing a CSS
selector which is then used to match a set of
elements.

jQuery

jQuery( html, ownerDocument )
Create DOM elements on-the-fly from the
provided String of raw HTML.

jQuery

jQuery( elements )
Wrap jQuery functionality around a single or an
array of DOM Element(s) .

jQuery

jQuery( callback )
A shorthand for $(document).ready().

jQuery

★ CORE / 4. PLUGIN

★ CORE / 2. OBJECT ACCESSORS

each( callback )
Execute a function within the context of every
matched element.

jQuery

size( )
The number of elements in the jQuery object.

Num

length
The number of elements in the jQuery object.

Num

selector
A selector representing selector originally passed
to jQuery().

String

context
The DOM node context originally passed to jQuery
() (if none was passed then context will be equal to
the document).

El

eq( position )
Reduce the set of matched elements to a single
element.

jQuery

get( )
Access all matched DOM elements.

a<El>

get( index )
Access a single matched DOM element at a
specified index in the matched set.

El

index( subject )
Searches every matched element for the object and
returns the index of the element, if found, starting
with zero. If a jQuery object is passed, only the
first element is checked.

Num

jQuery.fn.extend( object )
Extends the jQuery element set to provide new
methods (used to make a typical jQuery plugin).

jQuery

jQuery.extend( object )
Extends the jQuery object itself.

jQuery

★ ATTRIBUTES / 1. ATTR

attr( name )
Access a property on the first matched element.
This method makes it easy to retrieve a
property value from the first matched element.

If the element does not have an attribute with
such a name, undefined is returned.

T Attributes include title, alt, src, href, width,
style, etc.

Object

attr( properties )
Set a key/value object as properties to all
matched elements.

jQuery

attr( key, value )
Set a single property to a value, on all matched
elements.

jQuery

attr( key, fn )
Set a single property to a computed value, on all
matched elements.

jQuery

removeAttr( name )
Remove an attribute from each of the matched
elements.

jQuery

★ CORE / 5. INTEROPERABILITY

jQuery.noConflict( )
Run this function to give control of the $ variable
back to whichever library first implemented it.

jQuery

jQuery.noConflict( extreme )
Extends the jQuery object itself. Use with
discretion.

jQuery

★ ATTRIBUTES / 2. CLASS

addClass( class )
Adds the specified class(es) to each of the set of
matched elements.

jQuery

hasClass( class )
Returns true if the specified class is present on
at least one of the set of matched elements.

0-1

removeClass( class )
Removes all or the specified class(es) from the
set of matched elements.

jQuery

toggleClass( class )
Adds the specified class if it is not present,
removes the specified class if it is present.

jQuery

toggleClass( class, switch )
Adds the specified class if the switch is true,
removes the specified class if the switch is false.

jQuery

★ ATTRIBUTES / 4. TEXT

text( )
Get the combined text contents of all matched
elements.

T How to use:
var str = $("p:first").text();
$("p:last").html(str);

String

text( val )
Set the text contents of all matched elements.

jQuery

★ ATTRIBUTES / 5. VALUE

val( )
Get the input value of the first matched element.

T How to use:
$("input").keyup(function () {
var value = $(this).val();
$("p").text(value);
}).keyup();

String | a<>

val( val )
Set the text contents of all matched elements.
Checks, or selects, all the radio buttons,
checkboxes, and select options that match the set
of values.

jQuery

html( )
Get the html contents (innerHTML) of the first
matched element. This property is not available
on XML documents (although it will work for
XHTML documents).

T How to use:
$("p").click(function () {
var htmlStr = $(this).html();
$(this).text(htmlStr);
});

String

html( val )
Set the html contents of every matched element.
This property is not available on XML
documents (although it will work for XHTML
documents).

T How to use:

$("div").html("
<span class='red'>Hello
<b>Again</b></span>");

jQuery

JQUERY 1.3 VISUAL CHEAT SHEET ★ SELECTORS ★ CORE ★ ATTRIBUTES ★ TRAVERSING ★ MANIPULATION ★ CSS ★ EVENTS ★ EFFECTS ★ AJAX ★ UTILITIES

http://docs.jquery.com/Selectors/first
http://docs.jquery.com/Selectors/first
http://docs.jquery.com/Selectors/last
http://docs.jquery.com/Selectors/last
http://docs.jquery.com/Attributes/html
http://docs.jquery.com/Attributes/html
http://docs.jquery.com/Events/keyup
http://docs.jquery.com/Events/keyup
http://docs.jquery.com/Attributes/text
http://docs.jquery.com/Attributes/text
http://docs.jquery.com/Events/keyup
http://docs.jquery.com/Events/keyup
http://docs.jquery.com/Events/click
http://docs.jquery.com/Events/click
http://docs.jquery.com/Attributes/text
http://docs.jquery.com/Attributes/text

Page 3

★ TRAVERSING / 3. FINDING ★ MANIPULATION / 4. INSERTING AROUD

add( expr )
Adds more elements, matched by the given
expression, to the set of matched elements.

jQuery

children( expr )
Get a set of elements containing all of the unique
immediate children of each of the matched set of
elements.

jQuery

closest( expr )
Get a set of elements containing the closest
parent element that matches the specified
selector, the starting element included.

jQuery

contents( )
Find all the child nodes inside the matched
elements (including text nodes), or the content
document, if the element is an iframe.

jQuery

find( expr )
Searches for descendent elements that match the
specified expression.

jQuery

next( expr )
Get a set of elements containing the unique next
siblings of each of the given set of elements.

jQuery

nextAll( expr )
Find all sibling elements after the current
element.

jQuery

offsetParent( )
Returns a jQuery collection with the positioned
parent of the first matched element.

jQuery

parent( expr )
Get the direct parent of an element. If called on
a set of elements, parent returns a set of their
unique direct parent elements.

jQuery

parents( expr )
Get a set of elements containing the unique
ancestors of the matched set of elements (except
for the root element).

jQuery

prev( expr )
Get a set of elements containing the unique
previous siblings of each of the matched set of
elements.

jQuery

prevAll( expr )
Find all sibling elements in front of the current
element.

jQuery

siblings( expr )
Get a set of elements containing all of the unique
siblings of each of the matched set of elements.

jQuery

★ TRAVERSING / 1. FILTERING

eq( index )
Reduce the set of matched elements to a single
element.

T How to use:

$("div").eq(2).addClass("blue");

jQuery

filter( expr )
Removes all elements from the set of matched
elements that do not match the specified
expression(s).

T How to use:

$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");

jQuery

filter( fn )
Removes all elements from the set of matched
elements that do not match the specified function.

jQuery

is( expr )
Checks the current selection against an expression
and returns true, if at least one element of the
selection fits the given expression.

0-1

map( callback )
Translate a set of elements in the jQuery object
into another set of values in a jQuery array
(which may, or may not contain elements).

jQuery

not( expr )
Removes elements matching the specified
expression from the set of matched elements.

jQuery

slice( start, end )
Selects a subset of the matched elements.

jQuery

★ TRAVERSING / 2. CHAINING

andSelf( )
Add the previous selection to the current selection.

T How to use:

$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");

jQuery

end( )
Revert the most recent 'destructive' operation,
changing the set of matched elements to its
previous state (right before the destructive
operation).

jQuery

★ MANIPULATION / 1. CONTENTS

html( )
Get the html contents (innerHTML) of the first
matched element.
T This property is not available on XML
documents

String

html( val )
Set the html contents of every matched element.
T This property is not available on XML
documents

jQuery

text( )
Get the combined text contents of all matched
elements.

String

text( val )
Set the text contents of all matched elements.

jQuery

★ MANIPULATION / 2. INSERTING INSIDE

append( content )
Append content to the inside of every matched
element.

jQuery

appendTo( selector )
Append all of the matched elements to another,
specified, set of elements.

jQuery

prepend( content )
Prepend content to the inside of every matched
element.

jQuery

prependTo( selector )
Prepend all of the matched elements to another,
specified, set of elements.

jQuery

wrap( html )
Wrap each matched element with the specified
HTML content.

jQuery

wrap( elem )
Wrap each matched element with the specified
element.

jQuery

wrapAll( html )
Wrap all the elements in the matched set into a
single wrapper element.

jQuery

wrapAll( elem )
Wrap all the elements in the matched set into a
single wrapper element.

jQuery

wrapInner( html )
Wrap the inner child contents of each matched
element (including text nodes) with an HTML
structure.

jQuery

wrapInner( elem )
Wrap the inner child contents of each matched
element (including text nodes) with a DOM
element.

jQuery

★ MANIPULATION / 3. INSERTING OUTSIDE

after( content )
Insert content after each of the matched elements.

jQuery

before( content )
Insert content before each of the matched elements.

jQuery

insertAfter( selector )
Insert all of the matched elements after another,
specified, set of elements.

jQuery

insertBefore( selector )
Insert all of the matched elements before another,
specified, set of elements.

jQuery

★ MANIPULATION / 5. REPLACING

replaceWith( content )
Replaces all matched elements with the specified
HTML or DOM elements. This returns the
JQuery element that was just replaced, which
has been removed from the DOM.

jQuery

replaceAll( selector )
Replaces the elements matched by the specified
selector with the matched elements.

jQuery

★ MANIPULATION / 6. REMOVING

empty( )
Remove all child nodes from the set of matched
elements.

jQuery

remove( expr )
Removes all matched elements from the DOM.

jQuery

JQUERY 1.3 VISUAL CHEAT SHEET ★ SELECTORS ★ CORE ★ ATTRIBUTES ★ TRAVERSING ★ MANIPULATION ★ CSS ★ EVENTS ★ EFFECTS ★ AJAX ★ UTILITIES

http://docs.jquery.com/Core/queue#name
http://docs.jquery.com/Core/queue#name
http://docs.jquery.com/Selectors
http://docs.jquery.com/Selectors
http://docs.jquery.com/Traversing/parent
http://docs.jquery.com/Traversing/parent
http://docs.jquery.com/CSS/css
http://docs.jquery.com/CSS/css
http://docs.jquery.com/CSS/css
http://docs.jquery.com/CSS/css
http://docs.jquery.com/Traversing/find
http://docs.jquery.com/Traversing/find
http://docs.jquery.com/Attributes/addClass
http://docs.jquery.com/Attributes/addClass
http://docs.jquery.com/Traversing/find
http://docs.jquery.com/Traversing/find
http://docs.jquery.com/Attributes/addClass
http://docs.jquery.com/Attributes/addClass

Page 5

★ EFFECTS / 2. SLIDING ★ AJAX / 2. EVENTS

slideDown( speed, callback )
Reveal all matched elements by adjusting their
height and firing an optional callback after
completion.

jQuery

slideUp( speed, callback )
Hide all matched elements by adjusting their
height and firing an optional callback after
completion.

jQuery

slideToggle( speed, callback )
Toggle the visibility of all matched elements by
adjusting their height and firing an optional
callback after completion.

jQuery

★ EFFECTS / 5. CUSTOM

★ AJAX / 1. AJAX REQUESTS

jQuery.ajax( options )
Load a remote page using an HTTP request.

XMLHttpReq

load( url, data, callback )
Load HTML from a remote file and inject it into
the DOM.

jQuery

jQuery.get( url, data, callback, type )

Load a remote page using an HTTP GET
request.

XMLHttpReq

jQuery.getJSON( url, data, callback, type )

Load JSON data using an HTTP GET request. XMLHttpReq

jQuery.getScript( url, callback )
Loads, and executes, a local JavaScript file
using an HTTP GET request.

XMLHttpReq

jQuery.post( url, data, callback, type )

Load a remote page using an HTTP POST
request.

T How to use:

$.post("test.php", { func:
"getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");

XMLHttpReq

select( ) / select( fn )
Triggers / Bind a function to the select event of
each matched element.

jQuery

submit( ) / submit( fn )
Triggers / Bind a function to the submit event of
each matched element.

jQuery

unload( fn )
Binds a function to the unload event of each
matched element.

jQuery

★ EFFECTS / 1. BASICS

show( )
Displays each of the set of matched elements if
they are hidden.

T How to use:
$("p").show()

jQuery

show( speed, callback )
Show all matched elements using a graceful
animation and firing an optional callback after
completion.

jQuery

hide( )
Hides each of the set of matched elements if they
are shown.

T How to use:

$("p").hide()

jQuery

hide( speed, callback )
Hide all matched elements using a graceful
animation and firing an optional callback after
completion.

0-1

toggle( )
Toggle displaying each of the set of matched
elements.

T How to use:

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

jQuery

toggle( switch )
Toggle displaying each of the set of matched
elements based upon the switch (true shows all
elements, false hides all elements).

jQuery

toggle( speed, callback )
Toggle displaying each of the set of matched
elements using a graceful animation and firing
an optional callback after completion.

jQuery

★ EFFECTS / 3. FADING

fadeIn( speed, callback )
Fade in all matched elements by adjusting their
opacity and firing an optional callback after
completion.

T How to use:

$(document.body).click(function () {
$("div:hidden:first").fadeIn("slow");
});

jQuery

fadeOut( speed, callback )
Fade out all matched elements by adjusting
their opacity to 0, then setting display to "none"
and firing an optional callback after
completion.

jQuery

fadeTo( speed, opacity, callback )
Fade the opacity of all matched elements to a
specified opacity and firing an optional callback
after completion.

T How to use:
$("p:first").click(function () {
$(this).fadeTo("slow", 0.33);
});

jQuery

★ EFFECTS / 4. SETTINGS

animate( params, duration, easing, callback )

A function for making custom animations.

T How to use:

$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
}, 1500 );
});

jQuery

animate( params, options )
A function for making custom animations.

jQuery

stop( clearQueue, gotoEnd )
Stops all the currently running animations on all
the specified elements.

jQuery

jQuery.fx.off
Globally disable all animations.

T How to use:

jQuery.fx.off = true;
$("input").click(function(){
$("div").toggle("slow");
});

0-1

ajaxComplete( callback )
Attach a function to be executed whenever an
AJAX request completes.

T How to use:

$("#msg").ajaxComplete(function
(event,request, settings){
$(this).append("<li>Complete!</li>");
});

jQuery

ajaxError( callback )
Attach a function to be executed whenever an
AJAX request fails.

jQuery

ajaxSend( callback )
Attach a function to be executed before an AJAX
request is sent.

T How to use:

$("#msg").ajaxSend(function(evt, request,
settings){
$(this).append("<li>Starting request at " +
settings.url + "</li>");
});

jQuery

ajaxStart( callback )
Attach a function to be executed whenever an
AJAX request begins and there is none already
active.

jQuery

ajaxStop( callback )
Attach a function to be executed whenever all
AJAX requests have ended.

jQuery

ajaxSuccess( callback )
Attach a function to be executed whenever an
AJAX request completes successfully.

jQuery

★ AJAX / 3. MISC

jQuery.ajaxSetup( options )
Setup global settings for AJAX requests.

serialize( )
Serializes a set of input elements into a string of
data.

String

serializeArray( )
Serializes all forms and form elements (like
the .serialize() method) but returns a JSON data
structure for you to work with.

a<Object>

JQUERY 1.3 VISUAL CHEAT SHEET ★ SELECTORS ★ CORE ★ ATTRIBUTES ★ TRAVERSING ★ MANIPULATION ★ CSS ★ EVENTS ★ EFFECTS ★ AJAX ★ UTILITIES

http://docs.jquery.com/Events/click
http://docs.jquery.com/Events/click
http://docs.jquery.com/Events/click
http://docs.jquery.com/Events/click
http://docs.jquery.com/Events/click
http://docs.jquery.com/Events/click
http://docs.jquery.com/Events/click
http://docs.jquery.com/Events/click
http://docs.jquery.com/Effects/toggle
http://docs.jquery.com/Effects/toggle
http://docs.jquery.com/Ajax/serialize
http://docs.jquery.com/Ajax/serialize

Similer Documents