Главная - Skill-Z CMS - Бесплатная cms (php скрипт) blog

1. Core

$(String,Element|jQuery)
$(String expr, Element|jQuery context) returns jQuery
This functionccepts string containing CSS or basic XPath selector which is then used to
tch set of elements.
The core functiolity of jQuery centersround this function. Everything in jQuery is based upon
this, or uses this in some way. The most basic use of this function is to pass inn expression
(usually consisting of CSS or XPath), which then findsll tching elements.
By default, if no context is specified, $() looks for DOM elements within the context of the current
HTML document. If you do specify context, suchs DOM element or jQuery object, the
expression will be tchedgainst the contents of that context.
See [[DOTraversing/Selectors]] for thellowed CSS/XPath syntax for expressions.

Example

 

$("div > p")

HTML

 

<p>one</p> <div><p>two</p></div> <p>three</p>

Result

 

[ <p>two</p> ]

Example

 

$("input:radio", document.forms[0])

Example

 

$("div", xml.responseXML)

$(String)

$(String html) returns jQuery
Crte DOM elements on-the-fly from the provided String of raw HTML.

Example

 

$("<div><p>Hello</p></div>").appendTo("body")

$(Element|Array<Element>)

$(Element|Array elems) returns jQuery
Wrap jQuery functiolityround single or multiple DOM Element(s).
This functionlsoccepts XML Documentsnd Window objectss validrguments (even though
theyre not DOM Elements).

Example

 

$(document.body).css( "background", "black" );

Example

 

$( myForm.elements ).hide()

$(Function)

$(Function fn) returns jQuery
A shorthand for $(document).rdy(),llowing you to bind function to be executed when the
DOM document has finished loading. This function behaves just like $(document).rdy(), in that it
should be used to wrap other $() operations on your page that depend on the DOM being rdy to
be operated on. While this function is, technically, chaible - there rlly isn't much use for
chaininggainst it.
You can haves ny $(document).rdy events on your pages you like.
See rdy(Function) for detailsbout the rdy event.

Example

 

$(function(){

 // Document is rdy

});

Example

 

jQuery(function($) {

 // Your code using failsafe $lias here...

});

length()

length() returns Number
The number of elements currently tched. The size function will return the same value.

Example

 

$("img").length;

HTML

 

<img src="test1.jpg"/> <img src="test2.jpg"/>

Result

size()

size() returns Number
Get the number of elements currently tched. This returns the same numbers the 'length'
property of the jQuery object.

Example

 

$("img").size();

HTML

 

<img src="test1.jpg"/> <img src="test2.jpg"/>

Result

get()

get() returnsrray
Accessll tched DOM elements. This servess backwards-compatible way ofccessingll
tched elements (other than the jQuery object itself, which is, in fact,nrray of elements).
It is useful if you need to operate on the DOM elements themselves instd of using built-in jQuery
functions.

Example

 

$("img").get();

HTML

 

<img src="test1.jpg"/> <img src="test2.jpg"/>

Result

 

[ <img src="test1.jpg"/> <img src="test2.jpg"/> ]

get(Number)

get(Number num) returns Element
Access single tched DOM elementt specified index in the tched set. Thisllows you to
extract thectual DOM elementnd operate on it directly without necessarily using jQuery
functiolity on it.

Example

 

$("img").get(0);

HTML

 

<img src="test1.jpg"/> <img src="test2.jpg"/>

Result

 

<img src="test1.jpg"/>

ch(Function)

ch(Function fn) returns jQuery
Execute function within the context of every tched element. This mns that every time the
passed-in function is executed (which is once for every element tched) the 'this' keyword points
to the specific DOM element.
Additiolly, the function, when executed, is passed singlergument representing the position of
the element in the tched set (integer, zero-index).

Example

 

$("img").ch(function(i){

 this.src = "test" + i + ".jpg";

});

HTML

 

<img/><img/>

Result

 

<img src="test0.jpg"/><img src="test1.jpg"/>

index(Element)

index(Element subject) returns Number
Srches every tched element for the objectnd returns the index of the element, if found,
starting with zero. Returns -1 if the object wasn't found.

Example

 

$("*").index( $('#foobar')[0] )

HTML

 

<div id="foobar"><b></b><span id="foo"></span></div>

Result

Example

 

$("*").index( $('#foo')[0] )

HTML

 

<div id="foobar"><b></b><span id="foo"></span></div>

Result

Example

 

$("*").index( $('#bar')[0] )

HTML

 

<div id="foobar"><b></b><span id="foo"></span></div>

[A me=12][/a]Result

-1

$.extend(Object)

$.extend(Object prop) returns Object
Extends the jQuery object itself. Can be used todd functions into the jQuery mespacend to
[[Plugins/Authoring|add plugin methods]] (plugins).

Example

 

jQuery.fn.extend({

 check: function() {

   return this.ch(function() { this.checked = true; });

 },

 uncheck: function() {

   return this.ch(function() { this.checked = false; });

 }

});

$("input[@type=checkbox]").check();

$("input[@type=radio]").uncheck();

Example

 

jQuery.extend({

 min: function(a, b) { return < b ? : b; },

 x: function(a, b) { return > b ? : b; }

});

$.noConflict()

$.noConflict() returns undefined
Run this function to give control of the $ variable back to whichever library first implemented it.
This helps to ke sure that jQuery doesn't conflict with the $ object of other libraries.
By using this function, you will only beble toccess jQuery using the 'jQuery' variable. For
example, where you used to do $("div p"), you now must do jQuery("div p").

Example

 

jQuery.noConflict();

// Do something with jQuery

jQuery("div p").hide();

// Do something withnother library's $()

$("content").style.display = 'none';

Example

 

jQuery.noConflict();

(function($) {

 $(function() {

   // more code using $slias to jQuery

 });

})(jQuery);

// other code using $snlias to the other library

eq(Number)

eq(Number pos) returns jQuery
Reduce the set of tched elements to single element. The position of the element in the set of
tched elements startst 0nd goes to length - 1.

Example

 

$("p").eq(1)

HTML

 

<p>This is just test.</p><p>So is this</p>

Result

 

[ <p>So is this</p> ]

lt(Number)

lt(Number pos) returns jQuery
Reduce the set of tched elements toll elements before given position. The position of the
element in the set of tched elements startst 0nd goes to length - 1.

Example

 

$("p").lt(1)

HTML

 

<p>This is just test.</p><p>So is this</p>

Result

 

[ <p>This is just test.</p> ]

gt(Number)

gt(Number pos) returns jQuery
Reduce the set of tched elements toll elementsfter given position. The position of the
element in the set of tched elements startst 0nd goes to length - 1.

Example

 

$("p").gt(0)

HTML

 

<p>This is just test.</p><p>So is this</p>

Result

 

[ <p>So is this</p> ]

2. DOM

Attributes
attr(String)
attr(String me) returns Object
Access property on the first tched element. This method kes it sy to retrieve property
value from the first tched element.
If the element does not haventtribute with such me, undefined is returned.

Example

 

$("img").attr("src");

HTML

 

<img src="test.jpg"/>

Result

 

test.jpg

attr(p)

attr(p properties) returns jQuery
Set key/value objects properties toll tched elements.
This servess the best way to set large number of properties onll tched elements.

Example

 

$("img").attr({ src: "test.jpg",lt: "Test Ige" });

HTML

 

<img/>

Result

 

<img src="test.jpg"lt="Test Ige"/>

attr(String,Object)

attr(String key, Object value) returns jQuery
Set single property to value, onll tched elements.
Note that you can't set the me property of input elements in IE. Use $(html) or .append(html) or
.html(html) to crte elements on the fly including the me property.

Example

 

$("img").attr("src","test.jpg");

HTML

 

<img/>

Result

 

<img src="test.jpg"/>

attr(String,Function)

attr(String key, Function value) returns jQuery
Set single property to computed value, onll tched elements.
Instd of supplying string values described
[[DOAttributes#attr.28_key.2C_value_.29|above]], function is provided that computes the
value.

Example

 

$("img").attr("title", function() { return this.src });

HTML

 

<img src="test.jpg">

Result

 

<img src="test.jpg" title="test.jpg">

Example

 

$("img").attr("title", function(index) { return this.title + (i + 1); });

HTML

 

<img title="pic"><img title="pic"><img title="pic">

Result

 

<img title="pic1"><img title="pic2"><img title="pic3">

text()

text() returns String
Get the text contents ofll tched elements. The result is string that contains the combined
text contents ofll tched elements. This method works on both HTMLnd XML documents.

Example

 

$("p").text();

HTML

 

<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>

Result

 

Test Paragraph.Paraparagraph

text(String)

text(String val) returns String
Set the text contents ofll tched elements.
Similar to html(), but escapes HTML (replace "<"nd ">" with their HTML entities).

Example

 

$("p").text("<b>Some</b> new text.");

HTML

 

<p>Test Paragraph.</p>

Result

 

<p><b>Some</b> new text.</p>

Example

 

$("p").text("<b>Some</b> new text.", true);

HTML

 

<p>Test Paragraph.</p>

Result

 

<p>Some new text.</p>

val()

val() returns String
Get the content of the valuettribute of the first tched element.
Use caution when relying on this function to check the value of multiple-select elementsnd
checkboxes in form. While it will still works intended, it y notccurately represent the value
the server will receive because these elements y sendnrray of values. For more robust
handling of field values, see the [http://www.lsup.cojquery/for#fields fieldValue function of
the Form Plugin].

Example

 

$("input").val();

HTML

 

<input type="text" value="some text"/>

Result

 

"some text"

val(String)

val(String val) returns jQuery
Set the valuettribute of every tched element.

Example

 

$("input").val("test");

HTML

 

<input type="text" value="some text"/>

Result

 

<input type="text" value="test"/>

html()

html() returns String
Get the html contents of the first tched element. This property is notvailable on XML
documents.

Example

 

$("div").html();

HTML

 

<div><input/></div>

Result

 

<input/>

html(String)

html(String val) returns jQuery
Set the html contents of every tched element. This property is notvailable on XML
documents.

Example

 

$("div").html("<b>new stuff</b>");

HTML

 

<div><input/></div>

Result

 

<div><b>new stuff</b></div>

removttr(String)

removttr(String me) returns jQuery
Removenttribute from ch of the tched elements.

Example

 

$("input").removttr("disabled")

HTML

 

<input disabled="disabled"/>

Result

 

<input/>

addClass(String)

addClass(String class) returns jQuery
Adds the specified class(es) to ch of the set of tched elements.

Example

 

$("p").addClass("selected")

HTML

 

<p>Hello</p>

Result

 

[ <p class="selected">Hello</p> ]

Example

 

$("p").addClass("selected highlight")

HTML

 

<p>Hello</p>

Result

 

[ <p class="selected highlight">Hello</p> ]

removeClass(String)

removeClass(String class) returns jQuery
Removesll or the specified class(es) from the set of tched elements.

Example

 

$("p").removeClass()

HTML

 

<p class="selected">Hello</p>

Result

 

[ <p>Hello</p> ]

Example

 

$("p").removeClass("selected")

HTML

 

<p class="selected first">Hello</p>

Result

 

[ <p class="first">Hello</p> ]

Example

 

$("p").removeClass("selected highlight")

HTML

 

<p class="highlight selected first">Hello</p>

Result

 

[ <p class="first">Hello</p> ]

toggleClass(String)

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

Example

 

$("p").toggleClass("selected")

HTML

 

<p>Hello</p><p class="selected">Hellogain</p>

Result

 

[ <p class="selected">Hello</p>, <p>Hellogain</p> ]

<strong>nipulation</strong>

<strong>wrap(String)</strong>

wrap(String html) returns jQuery 

Wrapll tched elements with structure of other elements. This wrapping process is most

useful for injectingdditiol stucture into document, without ruining the origil sentic

qualities of document.

This works by going through the first element provided (which is generated, on the fly, from the

provided HTML)nd finds the deepestncestor element within its structure - it is that element that

will en-wrap everything else.

This does not work with elements that contain text.ny necessary text must beddedfter the

wrapping is done.

Example

 

$("p").wrap("<div class='wrap'></div>");

HTML

 

<p>Test Paragraph.</p>

Result

 

<div class='wrap'><p>Test Paragraph.</p></div>

wrap(Element)

wrap(Element elem) returns jQuery
Wrapll tched elements with structure of other elements. This wrapping process is most
useful for injectingdditiol stucture into document, without ruining the origil sentic
qualities of document.
This works by going through the first element providednd finding the deepestncestor element
within its structure - it is that element that will en-wrap everything else.
This does not work with elements that contain text.ny necessary text must beddedfter the
wrapping is done.

Example

 

$("p").wrap( document.getElementById('content') );

HTML

 

<p>Test Paragraph.</p><div id="content"></div>

Result

 

<div id="content"><p>Test Paragraph.</p></div>

append(<Content>)

append( content) returns jQuery
Append content to the inside of every tched element.
This operation is similar to doingnppendChild toll the specified elements,dding them into
the document.

Example

 

$("p").append("<b>Hello</b>");

HTML

 

<p>I would like to say: </p>

Result

 

<p>I would like to say: <b>Hello</b></p>

Example

 

$("p").append( $("#foo")[0] );

HTML

 

<p>I would like to say: </p><b id="foo">Hello</b>

Result

 

<p>I would like to say: <b id="foo">Hello</b></p>

Example

 

$("p").append( $("b") );

HTML

 

<p>I would like to say: <b>Hello</b></p>

prepend(<Content>)

prepend( content) returns jQuery
Prepend content to the inside of every tched element.
This operation is the best way to insert elements inside,t the beginning, ofll tched elements.

Example

 

$("p").prepend("<b>Hello</b>");

HTML

 

<p>I would like to say: </p>

Result

 

<p><b>Hello</b>I would like to say: </p>

Example

 

$("p").prepend( $("#foo")[0] );

HTML

 

<p>I would like to say: </p><b id="foo">Hello</b>

Result

 

<p><b id="foo">Hello</b>I would like to say: </p>

Example

 

$("p").prepend( $("b") );

HTML

 

<p>I would like to say: </p><b>Hello</b>

[A me=36][/a]Result

 

<p><b>Hello</b>I would like to say: </p>

before(<Content>)

before( content) returns jQuery
Insert content before ch of the tched elements.

Example

 

$("p").before("<b>Hello</b>");

HTML

 

<p>I would like to say: </p>

Result

 

<b>Hello</b><p>I would like to say: </p>

Example

 

$("p").before( $("#foo")[0] );

HTML

 

<p>I would like to say: </p><b id="foo">Hello</b>

Result

 

<b id="foo">Hello</b><p>I would like to say: </p>

Example

 

$("p").before( $("b") );

HTML

 

<p>I would like to say: </p><b>Hello</b>

[A me=38][/a]Result

 

<b>Hello</b><p>I would like to say: </p>

after(<Content>)

after( content) returns jQuery
Insert contentfter ch of the tched elements.

Example

 

$("p").after("<b>Hello</b>");

HTML

 

<p>I would like to say: </p>

Result

 

<p>I would like to say: </p><b>Hello</b>

Example

 

$("p").after( $("#foo")[0] );

HTML

 

<b id="foo">Hello</b><p>I would like to say: </p>

Result

 

<p>I would like to say: </p><b id="foo">Hello</b>

Example

 

$("p").after( $("b") );

HTML

 

<b>Hello</b><p>I would like to say: </p>

[A me=40][/a]Result

 

<p>I would like to say: </p><b>Hello</b>

clone(Booln)

clone(Booln deep) returns jQuery
Clone tched DOM Elementsnd select the clones.
This is useful for moving copies of the elements tonother location in the DOM.

Example

 

$("b").clone().prependTo("p");

HTML

 

<b>Hello</b><p>, howre you?</p>

Result

 

<b>Hello</b><p><b>Hello</b>, howre you?</p>

appendTo(<Content>)

appendTo( content) returns jQuery
Appendll of the tched elements tonother, specified, set of elements. This operation is,
essentially, the reverse of doing regular $(A).append(B), in that instd ofppending B to,
you'reppending to B.

Example

 

$("p").appendTo("#foo");

HTML

 

<p>I would like to say: </p><div id="foo"></div>

Result

 

<div id="foo"><p>I would like to say: </p></div>

prependTo(<Content>)

prependTo( content) returns jQuery
Prependll of the tched elements tonother, specified, set of elements. This operation is,
essentially, the reverse of doing regular $(A).prepend(B), in that instd of prepending B to,
you're prepending to B.

Example

 

$("p").prependTo("#foo");

HTML

 

<p>I would like to say: </p><div id="foo"><b>Hello</b></div>

Result

 

<div id="foo"><p>I would like to say: </p><b>Hello</b></div>

insertBefore(<Content>)

insertBefore( content) returns jQuery
Insertll of the tched elements beforenother, specified, set of elements. This operation is,
essentially, the reverse of doing regular $(A).before(B), in that instd of inserting B before,
you're inserting before B.

Example

 

$("p").insertBefore("#foo");

HTML

 

<div id="foo">Hello</div><p>I would like to say: </p>

Result

 

<p>I would like to say: </p><div id="foo">Hello</div>

insertAfter(<Content>)

insertAfter( content) returns jQuery
Insertll of the tched elementsfternother, specified, set of elements. This operation is,
essentially, the reverse of doing regular $(A).after(B), in that instd of inserting Bfter, you're
insertingfter B.

Example

 

$("p").insertAfter("#foo");

HTML

 

<p>I would like to say: </p><div id="foo">Hello</div>

Result

 

<div id="foo">Hello</div><p>I would like to say: </p>

remove(String)

remove(String expr) returns jQuery
Removesll tched elements from the DOM. This does NOT remove them from the jQuery
object,llowing you to use the tched elements further.
Can be filtered withn optiol expressions.

Example

 

$("p").remove();

HTML

 

<p>Hello</p> howre <p>you?</p>

Result

 

howre

Example

 

$("p").remove(".hello");

HTML

 

<p class="hello">Hello</p> howre <p>you?</p>

Result

 

howre <p>you?</p>

empty()

empty() returns jQuery
Removesll child nodes from the set of tched elements.

Example

 

$("p").empty()

HTML

 

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

Result

 

[ <p></p> ]

<strong>Traversing</strong>

<strong>end()</strong>

end() returns jQuery 

Revert the most recent 'destructive' operation, changing the set of tched elements to its

previous state (right before the destructive operation).

If there was no destructive operation before,n empty set is returned.

A 'destructive' operation isny operation that changes the set of tched jQuery elements. These

functionsre: <code>add</code>, <code>children</code>, <code>clone</code>,

<code>filter</code>, <code>find</code>, <code>not</code>, <code>next</code>,

<code>parent</code>, <code>parents</code>, <code>prev</code>nd <code>siblings</code>.

Example

 

$("p").find("span").end();

HTML

 

<p><span>Hello</span>, howre you?</p>

[A me=48][/a]Result

 

[ <p>...</p> ]

find(String)

find(String expr) returns jQuery
Srches forll elements that tch the specified expression.
This method is good way to finddditiol descendant elements with which to process.
All srching is done using jQuery expression. The expression can be written using CSS 1-3
Selector syntax, or basic XPath.

Example

 

$("p").find("span");

HTML

 

<p><span>Hello</span>, howre you?</p>

Result

 

[ <span>Hello</span> ]

filter(String)

filter(String expression) returns jQuery
Removesll elements from the set of tched elements that do not tch the specified
expression(s). This method is used to rrow down the results of srch.
Provide com-separated list of expressions topply multiple filterst once.

Example

 

$("p").filter(".selected")

HTML

 

<p class="selected">Hello</p><p>Howre you?</p>

Result

 

[ <p class="selected">Hello</p> ]

Example

 

$("p").filter(".selected, :first")

HTML

 

<p>Hello</p><p>Hellogain</p><p class="selected">Andgain</p>

Result

 

[ <p>Hello</p>, <p class="selected">Andgain</p> ]

filter(Function)

filter(Function filter) returns jQuery
Removesll elements from the set of tched elements that do not pass the specified filter. This
method is used to rrow down the results of srch.

Example

 

$("p").filter(function(index) {

 return $("ol", this).length == 0;

})

HTML

 

<p><ol><li>Hello</li></ol></p><p>Howre you?</p>

Result

 

[ <p>Howre you?</p> ]

not(Element)

not(Element el) returns jQuery
Removes the specified Element from the set of tched elements. This method is used to remove
a single Element from jQuery object.

Example

 

$("p").not( $("#selected")[0] )

HTML

 

<p>Hello</p><p id="selected">Hellogain</p>

Result

 

[ <p>Hello</p> ]

not(String)

not(String expr) returns jQuery
Removes elements tching the specified expression from the set of tched elements. This
method is used to remove one or more elements from jQuery object.

Example

 

$("p").not("#selected")

HTML

 

<p>Hello</p><p id="selected">Hellogain</p>

Result

 

[ <p>Hello</p> ]

not(jQuery)

not(jQuery elems) returns jQuery
Removesny elements inside therray of elements from the set of tched elements. This
method is used to remove one or more elements from jQuery object.
Plse note: the expression cannot use reference to the element me. See the two examples
below.

Example

 

$("p").not( $("div p.selected") )

HTML

 

<div><p>Hello</p><p class="selected">Hellogain</p></div>

Result

 

[ <p>Hello</p> ]

add(String)

add(String expr) returns jQuery
Adds more elements, tched by the given expression, to the set of tched elements.

Example

 

$("p").add("span")

HTML

 

(HTML) <p>Hello</p><span>Hellogain</span>

Result

 

(jQuery object tching 2 elements) [ <p>Hello</p>, <span>Hellogain</span> ]

add(String html) returns jQuery 

Adds more elements, crted on the fly, to the set of tched elements.

Example

 

$("p").add("<span>Again</span>")

HTML

 

<p>Hello</p>

Result

 

[ <p>Hello</p>, <span>Again</span> ]

add(Element|Array<Element>)

add(Element|Array elements) returns jQuery
Adds one or more Elements to the set of tched elements.

Example

 

$("p").add( document.getElementById("a") )

HTML

 

<p>Hello</p><p><span id="a">Hellogain</span></p>

Result

 

[ <p>Hello</p>, <span id="a">Hellogain</span> ]

Example

 

$("p").add( document.forms[0].elements )

HTML

 

<p>Hello</p><p><form><input/><butto></form>

Result

 

[ <p>Hello</p>, <input/>, <butto> ]

is(String)

is(String expr) returns Booln
Checks the current selectiongainstn expressionnd returns true, ift lst one element of the
selection fits the given expression.
Does return false, if no element fits or the expression is not valid.
filter(String) is used interlly, thereforell rules thatpply therepply here, too.

Example

 

$("input[@type='checkbox']").parent().is("form")

HTML

 

<form><input type="checkbox"></form>

Result

 

true

Example

 

$("input[@type='checkbox']").parent().is("form")

HTML

 

<form><p><input type="checkbox"></p></form>

Result

 

false

parent(String)

parent(String expr) returns jQuery
Get set of elements containing the unique parents of the tched set of elements.
You y usen optiol expression to filter the set of parent elements that will tch.

Example

 

$("p").parent()

HTML

 

<div><p>Hello</p><p>Hello</p></div>

Result

 

[ <div><p>Hello</p><p>Hello</p></div> ]

Example

 

$("p").parent(".selected")

HTML

 

<div><p>Hello</p></div><div class="selected"><p>Hellogain</p></div>

Result

 

[ <div class="selected"><p>Hellogain</p></div> ]

parents(String)

parents(String expr) returns jQuery
Get set of elements containing the uniquencestors of the tched set of elements (except for
the root element).
The tched elements can be filtered withn optiol expression.

Example

 

$("span").parents()

HTML

 

<html><body><div><p><span>Hello</span></p><span>Hello

Again</span></div></body></html>

Result

 

[ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]

Example

 

$("span").parents("p")

HTML

 

<html><body><div><p><span>Hello</span></p><span>Hello

Again</span></div></body></html>

Result

 

[ <p><span>Hello</span></p> ]

next(String)

next(String expr) returns jQuery
Get set of elements containing the unique next siblings of ch of the tched set of elements.
It only returns the very next sibling for ch element, notll next siblings.
You y providen optiol expression to filter the tch.

Example

 

$("p").next()

HTML

 

<p>Hello</p><p>Hellogain</p><div><span>Andgain</span></div>

Result

 

[ <p>Hellogain</p>, <div><span>Andgain</span></div> ]

Example

 

$("p").next(".selected")

HTML

 

<p>Hello</p><p class="selected">Hellogain</p><div><span>Andgain</span></div>

Result

 

[ <p class="selected">Hellogain</p> ]

prev(String)

prev(String expr) returns jQuery
Get set of elements containing the unique previous siblings of ch of the tched set of
elements.
Usen optiol expression to filter the tched set.
Only the immediately previous sibling is returned, notll previous siblings.

Example

 

$("p").prev()

HTML

 

<p>Hello</p><div><span>Hellogain</span></div><p>Andgain</p>

Result

 

[ <div><span>Hellogain</span></div> ]

Example

 

$("p").prev(".selected")

HTML

 

<div><span>Hello</span></div><p class="selected">Hellogain</p><p>Andgain</p>

Result

 

[ <div><span>Hello</span></div> ]

siblings(String)

siblings(String expr) returns jQuery
Get set of elements containingll of the unique siblings of ch of the tched set of elements.
Can be filtered withn optiol expressions.

Example

 

$("div").siblings()

HTML

 

<p>Hello</p><div><span>Hellogain</span></div><p>Andgain</p>

Result

 

[ <p>Hello</p>, <p>Andgain</p> ]

Example

 

$("div").siblings(".selected")

HTML

 

<div><span>Hello</span></div><p class="selected">Hellogain</p><p>Andgain</p>

Result

 

[ <p class="selected">Hellogain</p> ]

children(String)

children(String expr) returns jQuery
Get set of elements containingll of the unique children of ch of the tched set of elements.
This set can be filtered withn optiol expression that will cause only elements tching the
selector to be collected.

Example

 

$("div").children()

HTML

 

<p>Hello</p><div><span>Hellogain</span></div><p>Andgain</p>

Result

 

[ <span>Hellogain</span> ]

Example

 

$("div").children(".selected")

HTML

 

<div><span>Hello</span><p class="selected">Hellogain</p><p>Andgain</p></div>

Result

 

[ <p class="selected">Hellogain</p> ]

contains(String)

contains(String str) returns jQuery
Filter the set of elements to those that contain the specified text.

Example

 

$("p").contains("test")

HTML

 

<p>This is just test.</p><p>So is this</p>

Result

 

[ <p>This is just test.</p> ]

3. CSS

css(String)
css(String me) returns String
Access style property on the first tched element. This method kes it sy to retrieve style
property value from the first tched element.

Example

 

$("p").css("color");

HTML

 

<p style="color:red;">Test Paragraph.</p>

Result

 

"red"

Example

 

$("p").css("font-weight");

HTML

 

<p style="font-weight: bold;">Test Paragraph.</p>

Result

 

"bold"

css(p)

css(p properties) returns jQuery
Set key/value objects style properties toll tched elements.
This servess the best way to set large number of style properties onll tched elements.

Example

 

$("p").css({ color: "red", background: "blue" });

HTML

 

<p>Test Paragraph.</p>

Result

 

<p style="color:red; background:blue;">Test Paragraph.</p>

css(String,String|Number)

css(String key, String|Number value) returns jQuery
Set single style property to value, onll tched elements. If number is provided, it is
autotically converted into pixel value.

Example

 

$("p").css("color","red");

HTML

 

<p>Test Paragraph.</p>

Result

 

<p style="color:red;">Test Paragraph.</p>

Example

 

$("p").css("left",30);

HTML

 

<p>Test Paragraph.</p>

Result

 

<p style="left:30px;">Test Paragraph.</p>

width()

width() returns String
Get the current computed, pixel, width of the first tched element.

Example

 

$("p").width();

HTML

 

<p>This is just test.</p>

Result

width(String|Number)

width(String|Number val) returns jQuery
Set the CSS width of every tched element. If no explicit unit was specified (like 'em' or '%') then
"px" isdded to the width.

Example

 

$("p").width(20);

HTML

 

<p>This is just test.</p>

Result

 

<p style="width:20px;">This is just test.</p>

Example

 

$("p").width("20em");

HTML

 

<p>This is just test.</p>

Result

 

<p style="width:20em;">This is just test.</p>

height()

height() returns String
Get the current computed, pixel, height of the first tched element.

Example

 

$("p").height();

HTML

 

<p>This is just test.</p>

Result

height(String|Number)

height(String|Number val) returns jQuery
Set the CSS height of every tched element. If no explicit unit was specified (like 'em' or '%')
then "px" isdded to the width.

Example

 

$("p").height(20);

HTML

 

<p>This is just test.</p>

Result

 

<p style="height:20px;">This is just test.</p>

Example

 

$("p").height("20em");

HTML

 

<p>This is just test.</p>

Result

 

<p style="height:20em;">This is just test.</p>

4. JavaScript

$.extend(Object,Object,Object)
$.extend(Object target, Object prop1, Object propN) returns
Object
Extend one object with one or more others, returning the origil, modified, object. This is grt
utility for simple inheritance.

Example

 

var settings = { validate: false, limit: 5, me: "foo" };

var options = { validate: true, me: "bar" };

jQuery.extend(settings, options);

Result

 

settings == { validate: true, limit: 5, me: "bar" }

Example

 

var defaults = { validate: false, limit: 5, me: "foo" };

var options = { validate: true, me: "bar" };

var settings = jQuery.extend({}, defaults, options);

Result

 

settings == { validate: true, limit: 5, me: "bar" }

$.ch(Object,Function)

$.ch(Object obj, Function fn) returns Object
A generic iterator function, which can be used to smlessly iterate over both objectsndrrays.
This function is not the sames $().ch() - which is used to iterate, exclusively, over jQuery
object. This function can be used to iterate overnything.
The callback has tworguments:the key (objects) or index (arrays)s first the first,nd the value
as the second.

Example

 

$.ch( [0,1,2], function(i, n){

 alert( "Item #" + i + ": " + n );

});

Example

 

$.ch( { me: "John", lang: "JS" }, function(i, n){

 alert( "me: " + i + ", Value: " + n );

});

$.trim(String)

$.trim(String str) returns String
Remove the whitespace from the beginningnd end of string.

Example

 

$.trim("  hello, howre you?  ");

Result

 

"hello, howre you?"

$.merge(Array,Array)

$.merge(Array first,rray second) returnsrray
Merge tworrays together by concateting them.

Example

 

$.merge( [0,1,2], [2,3,4] )

Result

 

[0,1,2,2,3,4]

$.unique(Array)

$.unique(Arrayrray) returnsrray
Reducenrray (of jQuery objects only) to its unique elements.

Example

 

$.unique( [x1, x2, x3, x2, x3] )

Result

 

[x1, x2, x3]

$.grep(Array,Function,Booln)

$.grep(Arrayrray, Function fn, Booln inv) returnsrray
Filter items out ofnrray, by using filter function.
The specified function will be passed tworguments: The currentrray itemnd the index of the
item in therray. The function must return 'true' to keep the item in therray, false to remove it.

Example

 

$.grep( [0,1,2], function(i){

 return i > 0;

});

Result

 

[1, 2]

$.p(Array,Function)

$.p(Arrayrray, Function fn) returnsrray
Translatell items innrray tonotherrray of items.
The translation function that is provided to this method is called for ch item in therraynd is
passed onergument: The item to be translated.
The function can then return the translated value, 'null' (to remove the item), or nrray of values
- which will be flattened into the fullrray.

Example

 

$.p( [0,1,2], function(i){

 return i + 4;

});

Result

 

[4, 5, 6]

Example

 

$.p( [0,1,2], function(i){

 return i > 0 ? i + 1 : null;

});

Result

 

[2, 3]

Example

 

$.p( [0,1,2], function(i){

 return [ i, i + 1 ];

});

[A me=79][/a]Result

 

[0, 1, 1, 2, 2, 3]

$.browser()

$.browser() returns Booln
Contains flags for the useragent, rd from vigator.userAgent.vailable flagsre: safari, opera,
msie, mozilla
This property isvailable before the DOM is rdy, therefore you can use it todd rdy events
only for certain browsers.
Therere situations where object detections is not reliable enough, in that cases it kes sense
to use browser detection. Simply try tovoid both!
A combition of browsernd object detection yields quite reliable results.

Example

 

$.browser.msie

Example

 

if($.browser.safari) { $( function() {lert("this is safari!"); } ); }

5. Events

bind(String,Object,Function)
bind(String type, Object data, Function fn) returns jQuery
Binds handler to particular event (like click) for ch tched element. The event handler is
passedn event object that you can use to prevent default behaviour. To stop both defaultction
and event bubbling, your handler has to return false.
In most cases, you can define your event handlerssnonymous functions (see first example). In
cases where that is not possible, you can passdditiol datas the second parameter (and the
handler functions the third), see second example.
Calling bind withn event type of "unload" willutotically use the one method instd of bind to
prevent memory lks.

Example

 

$("p").bind("click", function(){

 alert( $(this).text() );

});

HTML

 

<p>Hello</p>

Result

 

alert("Hello")

Example

 

function handler(event) {

 alert(event.data.foo);

}

$("p").bind("click", {foo: "bar"}, handler)

Result

 

alert("bar")

Example

 

$("form").bind("submit", function() { return false; })

Example

 

$("form").bind("submit", function(event){

 event.preventDefault();

});

Example

 

$("form").bind("submit", function(event){

 event.stopPropagation();

});

one(String,Object,Function)

one(String type, Object data, Function fn) returns jQuery
Binds handler to particular event (like click) for ch tched element. The handler is
executed only once for ch element. Otherwise, the same ruless described in bind()pply. The
event handler is passedn event object that you can use to prevent default behaviour. To stop
both defaultctionnd event bubbling, your handler has to return false.
In most cases, you can define your event handlerssnonymous functions (see first example). In
cases where that is not possible, you can passdditiol datas the second paramter (and the
handler functions the third), see second example.

Example

 

$("p").one("click", function(){

 alert( $(this).text() );

});

HTML

 

<p>Hello</p>

Result

 

alert("Hello")

unbind(String,Function)

unbind(String type, Function fn) returns jQuery
The opposite of bind, removes bound event from ch of the tched elements.
Withoutnyrguments,ll bound eventsre removed.
If the type is provided,ll bound events of that typere removed.
If the function that was passed to bind is provideds the secondrgument, only that specific event
handler is removed.

Example

 

$("p").unbind()

HTML

 

<p onclick="alert('Hello');">Hello</p>

Result

 

[ <p>Hello</p> ]

Example

 

$("p").unbind( "click" )

HTML

 

<p onclick="alert('Hello');">Hello</p>

Result

 

[ <p>Hello</p> ]

Example

 

$("p").unbind( "click", function() {lert("Hello"); } )

HTML

 

<p onclick="alert('Hello');">Hello</p>

Result

 

Trigger type of event on every tched element. This willlso cause the defaultction of the

browser with the same me (if one exists) to be executed. For example, passing 'submit' to the

trigger() function willlso cause the browser to submit the form. This defaultction can be

prevented by returning false from one of the functions bound to the event.

You canlso trigger custom events registered with bind.

Example

 

$("p").trigger("click")

HTML

 

<p click="alert('hello')">Hello</p>

Result

 

alert('hello')

Example

 

$("p").click(function(event,, b) {

 // when norl click fires,nd bre undefined

 // for trigger like below refers too "foo"nd b refers to "bar"

}).trigger("click", ["foo", "bar"]);

Example

 

$("p").bind("myEvent",function(event,message1,message2) {

alert(message1 + ' ' + message2);

});

$("p").trigger("myEvent",["Hello","World"]);

Result

 

alert('Hello World') // One for ch paragraph

toggle(Function,Function)

toggle(Function even, Function odd) returns jQuery
Toggle between two function calls every other click. Whenever tched element is clicked, the
first specified function is fired, when clickedgain, the second is fired.ll subsequent clicks
continue to rotate through the two functions.
Use unbind("click") to remove.

Example

 

$("p").toggle(function(){

 $(this).addClass("selected");

},function(){

 $(this).removeClass("selected");

});

hover(Function,Function)

hover(Function over, Function out) returns jQuery
A method for simulating hovering (moving the mouse on,nd off,n object). This is custom
method which providesn 'in' to frequent task.
Whenever the mouse cursor is moved over tched element, the first specified function is fired.
Whenever the mouse moves off of the element, the second specified function fires. dditiolly,
checksre in place to see if the mouse is still within the specified element itself (for example,n
ige inside of div), nd if it is, it will continue to 'hover',nd not move out (a common error in
using mouseout event handler).

Example

 

$("p").hover(function(){

 $(this).addClass("hover");

},function(){

 $(this).removeClass("hover");

});

rdy(Function)

rdy(Function fn) returns jQuery
Bind function to be executed whenever the DOM is rdy to be traversednd nipulated. This
is probably the most important function included in the event module,s it can grtly improve the
response times of your webpplications.
In nutshell, this is solid replacement for using window.onload, ndttaching function to that.
By using this method, your bound function will be called the instant the DOM is rdy to be rd
and nipulated, which is when what 99.99% ofll JavaScript code needs to run.
There is onergument passed to the rdy event handler: reference to the jQuery function. You
can me thatrgument whatever you like,nd can therefore stick with the $lias without risk of
ming collisions.
Plse ensure you have no code in your onload event handler, otherwise
$(document).rdy() y not fire.
You can haves ny $(document).rdy events on your pages you like. The functionsre
then executed in the order they weredded.

Example

 

$(document).rdy(function(){ Your code here... });

Example

 

jQuery(function($) {

 // Your code using failsafe $lias here...

});

scroll(Function)

scroll(Function fn) returns jQuery
Bind function to the scroll event of ch tched element.

Example

 

$("p").scroll( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onscroll="alert('Hello');">Hello</p>

submit(Function)

submit(Function fn) returns jQuery
Bind function to the submit event of ch tched element.

Example

 

$("#myform").submit( function() {

 return $("input", this).val().length > 0;

} );

HTML

 

<form id="myform"><input></form>

submit()

submit() returns jQuery
Trigger the submit event of ch tched element. This causesll of the functions that have been
bound to that submit event to be executed,nd calls the browser's default submitction on the
tching element(s). This defaultction can be prevented by returning false from one of the
functions bound to the submit event.
Note: This does not execute the submit method of the form element! If you need to submit the
form via code, you have to use the DOM method, eg. $("form")[0].submit();

Example

 

$("form").submit();

focus(Function)

focus(Function fn) returns jQuery
Bind function to the focus event of ch tched element.

Example

 

$("p").focus( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onfocus="alert('Hello');">Hello</p>

focus()

focus() returns jQuery
Trigger the focus event of ch tched element. This causesll of the functions that have been
bound to thet focus event to be executed.
Note: This does not execute the focus method of the underlying elements! If you need to focusn
element via code, you have to use the DOM method, eg. $("#myinput")[0].focus();

Example

 

$("p").focus();

HTML

 

<p onfocus="alert('Hello');">Hello</p>

Result

 

alert('Hello');

keydown(Function)

keydown(Function fn) returns jQuery
Bind function to the keydown event of ch tched element.

Example

 

$("p").keydown( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onkeydown="alert('Hello');">Hello</p>

dblclick(Function)

dblclick(Function fn) returns jQuery
Bind function to the dblclick event of ch tched element.

Example

 

$("p").dblclick( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p ondblclick="alert('Hello');">Hello</p>

keypress(Function)

keypress(Function fn) returns jQuery
Bind function to the keypress event of ch tched element.

Example

 

$("p").keypress( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onkeypress="alert('Hello');">Hello</p>

error(Function)

error(Function fn) returns jQuery
Bind function to the error event of ch tched element.

Example

 

$("p").error( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onerror="alert('Hello');">Hello</p>

blur(Function)

blur(Function fn) returns jQuery
Bind function to the blur event of ch tched element.

Example

 

$("p").blur( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onblur="alert('Hello');">Hello</p>

blur()

blur() returns jQuery
Trigger the blur event of ch tched element. This causesll of the functions that have been
bound to that blur event to be executed,nd calls the browser's default blurction on the
tching element(s). This defaultction can be prevented by returning false from one of the
functions bound to the blur event.
Note: This does not execute the blur method of the underlying elements! If you need to blurn
element via code, you have to use the DOM method, eg. $("#myinput")[0].blur();

Example

 

$("p").blur();

HTML

 

<p onblur="alert('Hello');">Hello</p>

Result

 

alert('Hello');

load(Function)

load(Function fn) returns jQuery
Bind function to the load event of ch tched element.

Example

 

$("p").load( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onload="alert('Hello');">Hello</p>

select(Function)

select(Function fn) returns jQuery
Bind function to the select event of ch tched element.

Example

 

$("p").select( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onselect="alert('Hello');">Hello</p>

select()

select() returns jQuery
Trigger the select event of ch tched element. This causesll of the functions that have been
bound to that select event to be executed,nd calls the browser's default selectction on the
tching element(s). This defaultction can be prevented by returning false from one of the
functions bound to the select event.

Example

 

$("p").select();

HTML

 

<p onselect="alert('Hello');">Hello</p>

Result

 

alert('Hello');

mouseup(Function)

mouseup(Function fn) returns jQuery
Bind function to the mouseup event of ch tched element.

Example

 

$("p").mouseup( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onmouseup="alert('Hello');">Hello</p>

unload(Function)

unload(Function fn) returns jQuery
Bind function to the unload event of ch tched element.

Example

 

$("p").unload( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onunload="alert('Hello');">Hello</p>

change(Function)

change(Function fn) returns jQuery
Bind function to the change event of ch tched element.

Example

 

$("p").change( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onchange="alert('Hello');">Hello</p>

mouseout(Function)

mouseout(Function fn) returns jQuery
Bind function to the mouseout event of ch tched element.

Example

 

$("p").mouseout( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onmouseout="alert('Hello');">Hello</p>

keyup(Function)

keyup(Function fn) returns jQuery
Bind function to the keyup event of ch tched element.

Example

 

$("p").keyup( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onkeyup="alert('Hello');">Hello</p>

click(Function)

click(Function fn) returns jQuery
Bind function to the click event of ch tched element.

Example

 

$("p").click( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onclick="alert('Hello');">Hello</p>

click()

click() returns jQuery
Trigger the click event of ch tched element. This causesll of the functions that have been
bound to thet click event to be executed.

Example

 

$("p").click();

HTML

 

<p onclick="alert('Hello');">Hello</p>

Result

 

alert('Hello');

resize(Function)

resize(Function fn) returns jQuery
Bind function to the resize event of ch tched element.

Example

 

$("p").resize( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onresize="alert('Hello');">Hello</p>

mousemove(Function)

mousemove(Function fn) returns jQuery
Bind function to the mousemove event of ch tched element.

Example

 

$("p").mousemove( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onmousemove="alert('Hello');">Hello</p>

mousedown(Function)

mousedown(Function fn) returns jQuery
Bind function to the mousedown event of ch tched element.

Example

 

$("p").mousedown( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onmousedown="alert('Hello');">Hello</p>

mouseover(Function)

mouseover(Function fn) returns jQuery
Bind function to the mouseover event of ch tched element.

Example

 

$("p").mouseover( function() {lert("Hello"); } );

HTML

 

<p>Hello</p>

Result

 

<p onmouseover="alert('Hello');">Hello</p>

6. Effects

show()
show() returns jQuery
Displays ch of the set of tched elements if theyre hidden.

Example

 

$("p").show()

HTML

 

<p style="display: none">Hello</p>

Result

 

[ <p style="display: block">Hello</p> ]

show(String|Number,Function)

show(String|Number speed, Function callback) returns jQuery
Showll tched elements using gracefulnitionnd firingn optiol callbackfter
completion.
The height, width,nd opacity of ch of the tched elements re changed dymically
according to the specified speed.

Example

 

$("p").show("slow");

Example

 

$("p").show("slow",function(){

 alert("Anition Done.");

});

hide()

hide() returns jQuery
Hides ch of the set of tched elements if theyre shown.

Example

 

$("p").hide()

HTML

 

<p>Hello</p>

Result

 

[ <p style="display: none">Hello</p> ]

hide(String|Number,Function)

hide(String|Number speed, Function callback) returns jQuery
Hidell tched elements using gracefulnitionnd firingn optiol callbackfter
completion.
The height, width,nd opacity of ch of the tched elements re changed dymically
according to the specified speed.

Example

 

$("p").hide("slow");

Example

 

$("p").hide("slow",function(){

 alert("Anition Done.");

});

toggle()

toggle() returns jQuery
Toggles ch of the set of tched elements. If theyre shown, toggle kes them hidden. If
theyre hidden, toggle kes them shown.

Example

 

$("p").toggle()

HTML

 

<p>Hello</p><p style="display: none">Hellogain</p>

Result

 

[ <p style="display: none">Hello</p>, <p style="display: block">Hellogain</p> ]

slideDown(String|Number,Function)

slideDown(String|Number speed, Function callback) returns
jQuery
Revlll tched elements bydjusting their heightnd firingn optiol callbackfter
completion.
Only the height isdjusted for thisnition, causingll tched elements to be revled in
"sliding" nner.

Example

 

$("p").slideDown("slow");

Example

 

$("p").slideDown("slow",function(){

 alert("Anition Done.");

});

slideUp(String|Number,Function)

slideUp(String|Number speed, Function callback) returns jQuery
Hidell tched elements bydjusting their heightnd firingn optiol callbackfter
completion.
Only the height isdjusted for thisnition, causingll tched elements to be hidden in
"sliding" nner.

Example

 

$("p").slideUp("slow");

Example

 

$("p").slideUp("slow",function(){

 alert("Anition Done.");

});

slideToggle(String|Number,Function)

slideToggle(String|Number speed, Function callback) returns
jQuery
Toggle the visibility ofll tched elements bydjusting their heightnd firingn optiol callback
after completion.
Only the height isdjusted for thisnition, causingll tched elements to be hidden in
"sliding" nner.

Example

 

$("p").slideToggle("slow");

Example

 

$("p").slideToggle("slow",function(){

 alert("Anition Done.");

});

fadeIn(String|Number,Function)

fadeIn(String|Number speed, Function callback) returns jQuery
Fade inll tched elements bydjusting their opacitynd firingn optiol callbackfter
completion.
Only the opacity isdjusted for thisnition, mning thatll of the tched elements should
alrdy have some form of heightnd widthssociated with them.

Example

 

$("p").fadeIn("slow");

Example

 

$("p").fadeIn("slow",function(){

 alert("Anition Done.");

});

fadeOut(String|Number,Function)

fadeOut(String|Number speed, Function callback) returns jQuery
Fade outll tched elements bydjusting their opacitynd firingn optiol callbackfter
completion.
Only the opacity isdjusted for thisnition, mning thatll of the tched elements should
alrdy have some form of heightnd widthssociated with them.

Example

 

$("p").fadeOut("slow");

Example

 

$("p").fadeOut("slow",function(){

 alert("Anition Done.");

});

fadeTo(String|Number,Number,Function)

fadeTo(String|Number speed, Number opacity, Function callback)
returns jQuery
Fade the opacity ofll tched elements to specified opacitynd firingn optiol callbackfter
completion.
Only the opacity isdjusted for thisnition, mning thatll of the tched elements should
alrdy have some form of heightnd widthssociated with them.

Example

 

$("p").fadeTo("slow", 0.5);

Example

 

$("p").fadeTo("slow", 0.5, function(){

 alert("Anition Done.");

});

anite(Hash,String|Number,String,Function)

anite(Hash params, String|Number speed, String sing,
Function callback) returns jQuery
A function for king your own, customnitions. The keyspect of this function is the object of
style properties that will benited,nd to what end. ch key within the object represents
style property that willlso benited (for example: "height", "top", or "opacity").
Note that properties should be specified using camel case eg. rginLeft instd of rgin-left.
The valuessociated with the key represents to what end the property will benited. If
number is provideds the value, then the style property will be transitioned from its current state
to that new number. Otherwise if the string "hide", "show", or "toggle" is provided, default
anition will be constructed for that property.

Example

 

$("p").anite({

 height: 'toggle', opacity: 'toggle'

}, "slow");

Example

 

$("p").anite({

 left: 50, opacity: 'show'

}, 500);

Example

 

$("p").anite({

 opacity: 'show'

}, "slow", "sein");

7.jax

loadIfModified(String,p,Function)
loadIfModified(String url, p params, Function callback)
returns jQuery
Load HTML from remote filend inject it into the DOM, only if it's been modified by the server.

Example

 

$("#feeds").loadIfModified("feeds.html");

HTML

 

<div id="feeds"></div>

Result

 

<div id="feeds"><b>45</b> feeds found.</div>

load(String,Object,Function)

load(String url, Object params, Function callback) returns
jQuery
Load HTML from remote filend inject it into the DOM.
Note:void to use this to load scripts, instd use $.getScript. IE strips script tags when there
aren'tny other characters in front of it.

Example

 

$("#feeds").load("feeds.html");

HTML

 

<div id="feeds"></div>

Result

 

<div id="feeds"><b>45</b> feeds found.</div>

Example

 

$("#feeds").load("feeds.html",

 {limit: 25},

 function() {lert("The last 25 entries in the feed have been loaded"); }

);

serialize()

serialize() returns String
Serializes set of input elements into string of data. This will serializell given elements.
A serialization similar to the form submit of browser is provided by the
[http://www.lsup.cojquery/for Form Plugin]. Itlso takes multiple-selects intoccount,
while this method recognizes only single option.

Example

 

$("input[@type=text]").serialize();

HTML

 

<input type='text' me='me' value='John'/>

<input type='text' me='location' value='Boston'/>

ajaxStart(Function)

ajaxStart(Function callback) returns jQuery
Attach function to be executed whenevernJAX request beginsnd there is nonelrdy
active.

Example

 

$("#loading").ajaxStart(function(){

 $(this).show();

});

ajaxStop(Function)

ajaxStop(Function callback) returns jQuery
Attach function to be executed wheneverllJAX requests have ended.

Example

 

$("#loading").ajaxStop(function(){

 $(this).hide();

});

ajaxComplete(Function)

ajaxComplete(Function callback) returns jQuery
Attach function to be executed whenevernJAX request completes.
The XMLHttpRequestnd settings used for that requestre passedsrguments to the callback.

Example

 

$("#msg").ajaxComplete(function(request, settings){

 $(this).append("<li>Request Complete.</li>");

});

ajaxSuccess(Function)

ajaxSuccess(Function callback) returns jQuery
Attach function to be executed whenevernJAX request completes successfully.
The XMLHttpRequestnd settings used for that requestre passedsrguments to the callback.

Example

 

$("#msg").ajaxSuccess(function(request, settings){

 $(this).append("<li>Successful Request!</li>");

});

ajaxError(Function)

ajaxError(Function callback) returns jQuery
Attach function to be executed whenevernJAX request fails.
The XMLHttpRequestnd settings used for that requestre passedsrguments to the callback.
A thirdrgument,n exception object, is passed ifn exception occured while processing the
request.

Example

 

$("#msg").ajaxError(function(request, settings){

 $(this).append("<li>Error requesting page " + settings.url + "</li>");

});

ajaxSend(Function)

ajaxSend(Function callback) returns jQuery
Attach function to be executed beforenJAX request is sent.
The XMLHttpRequestnd settings used for that requestre passedsrguments to the callback.

Example

 

$("#msg").ajaxSend(function(request, settings){

 $(this).append("<li>Starting requestt " + settings.url + "</li>");

});

$.get(String,p,Function)

$.get(String url, p params, Function callback) returns
XMLHttpRequest
Load remote page usingn HTTP GET request.
This isn sy way to send simple GET request to server without having to use the more
complex $.ajax function. Itllows single callback function to be specified that will be executed
when the request is complete (and only if the response has successful response code). If you
need to have both errornd success callbacks, you y want to use $.ajax.

Example

 

$.get("test.cgi");

Example

 

$.get("test.cgi", { me: "John", time: "2pm" } );

Example

 

$.get("test.cgi", function(data){

 alert("Data Loaded: " + data);

});

Example

 

$.get("test.cgi",

 { me: "John", time: "2pm" },

 function(data){

   alert("Data Loaded: " + data);

 }

);

$.getIfModified(String,p,Function)

$.getIfModified(String url, p params, Function callback)
returns XMLHttpRequest
Load remote page usingn HTTP GET request, only if it hasn't been modified since it was last
retrieved.

Example

 

$.getIfModified("test.html");

Example

 

$.getIfModified("test.html", { me: "John", time: "2pm" } );

Example

 

$.getIfModified("test.cgi", function(data){

 alert("Data Loaded: " + data);

});

Example

 

$.getifModified("test.cgi",

 { me: "John", time: "2pm" },

 function(data){

   alert("Data Loaded: " + data);

 }

);

$.getScript(String,Function)

$.getScript(String url, Function callback) returns
XMLHttpRequest
Loads,nd executes, remote JavaScript file usingn HTTP GET request.
Warning: Safari <= 2.0.x is uble to evaluate scripts in global context synchronously. If you load
functions via getScript, ke sure to call themfter delay.

Example

 

$.getScript("test.js");

Example

 

$.getScript("test.js", function(){

 alert("Script loadednd executed.");

});

$.getJSON(String,p,Function)

$.getJSON(String url, p params, Function callback) returns
XMLHttpRequest
Load JSON data usingn HTTP GET request.

Example

 

$.getJSON("test.js", function(json){

 alert("JSON Data: " + json.users[3].me);

});

Example

 

$.getJSON("test.js",

 { me: "John", time: "2pm" },

 function(json){

   alert("JSON Data: " + json.users[3].me);

 }

);

$.post(String,p,Function)

$.post(String url, p params, Function callback) returns
XMLHttpRequest
Load remote page usingn HTTP POST request.

Example

 

$.post("test.cgi");

Example

 

$.post("test.cgi", { me: "John", time: "2pm" } );

Example

 

$.post("test.cgi", function(data){

 alert("Data Loaded: " + data);

});

Example

 

$.post("test.cgi",

 { me: "John", time: "2pm" },

 function(data){

   alert("Data Loaded: " + data);

 }

);

$.ajaxTimeout(Number)

$.ajaxTimeout(Number time) returns undefined
Set the timeout in milliseconds ofllJAX requests to specificmount of time. This will kell
futureJAX requests timeoutfter specifiedmount of time.
Set to null or 0 to disable timeouts (default).
You can nuallybort requests with the XMLHttpRequest's (returned bylljax functions)
abort() method.
Deprecated. Use $.ajaxSetup instd.

Example

 

$.ajaxTimeout( 5000 );

$.ajaxSetup(p)

$.ajaxSetup(p settings) returns undefined
Setup global settings forJAX requests.
See $.ajax for description ofllvailable options.

Example

 

$.ajaxSetup( {

 url: "/xmlhttp/",

 global: false,

 type: "POST"

} );

$.ajax({ data: myData });

$.ajax(p)

$.ajax(p properties) returns XMLHttpRequest
Load remote page usingn HTTP request.
This is jQuery's low-levelJAX implementation. See $.get, $.post etc. for higher-levelbstractions
thatre often sier to understandnd use, but don't offers much functiolity (suchs error
callbacks).
$.ajax() returns the XMLHttpRequest that it crtes. In most cases you won't need that object to
nipulate directly, but it isvailable if you need tobort the request nually.
'''Note:''' If you specify the dataType option described below, ke sure the server sends the
correct MIME type in the response (eg. xmls "text/xml"). Sending the wrong MIME type can ld
to unexpected problems in your script. See [[Specifying the Data Type forJAX Requests]] for
more infortion.
Supported datatypesre (see dataType option):
"xml": Returns XML document that can be processed via jQuery.
"html": Returns HTMLs plain text, included script tagsre evaluated.
"script": Evaluates the responses Javascriptnd returns its plain text.
"json": Evaluates the responses JSONnd returns Javascript Object
$.ajax() takes onergument,n object of key/value pairs, thatre used to initalizend handle the
request. Theserell the key/values that can be used:
(String) url - The URL to request.
(String) type - The type of request to ke ("POST" or "GET"), default is "GET".
(String) dataType - The type of data that you're expecting back from the server. No default: If the
server sends xml, the responseXML, otherwise the responseText is passed to the success
callback.
(Booln) ifModified -llow the request to be successful only if the response has changed since
the last request. This is done by checking the Last-Modified hder. Default value is false, ignoring
the hder.
(Number) timeout - Local timeout in milliseconds to override global timeout, eg. to give single
request longer timeout whilell others timeoutfter 1 second. See $.ajaxTimeout() for global
timeouts.
(Booln) global - Whether to trigger globalJAX event handlers for this request, default is true.
Set to false to prevent that global handlers likejaxStart orjaxStopre triggered.
(Function) error - function to be called if the request fails. The function gets passed tree
arguments: The XMLHttpRequest object, string describing the type of error that occurredndn
optiol exception object, if one occured.
(Function) success - function to be called if the request succeeds. The function gets passed one
argument: The data returned from the server, forttedccording to the 'dataType' parameter.
(Function) complete - function to be called when the request finishes. The function gets passed
tworguments: The XMLHttpRequest objectnd string describing the type of success of the
request.
(Object|String) data - Data to be sent to the server. Converted to query string, if notlrdy

[A me=143][/a]string. Isppended to the url for GET-requests. See processData option to prevent thisutotic
processing.
(String) contentType - When sending data to the server, use this content-type. Default is
"applicatiox-www-form-urlencoded", which is fine for most cases.
(Booln) processData - By default, data passed in to the data optionsn object others string
will be processednd transformed into query string, fitting to the default content-type
"applicatiox-www-form-urlencoded". If you want to send DOMDocuments, set this option to false.
(Booln)sync - By default,ll requestsre sentsynchronous (set to true). If you need
synchronous requests, set this option to false.
(Function) beforeSend - pre-callback to set custom hders etc., the XMLHttpRequest is passed
as the onlyrgument.

Example

 

$.ajax({

 type: "GET",

 url: "test.js",

 dataType: "script"

})

Example

 

$.ajax({

 type: "POST",

 url: "some.php",

 data: "me=John&location=Boston",

 success: function(msg){

   alert( "Data Saved: " + msg );

 }

});

Example

 

var html = $.ajax({

url: "some.php",

async: false

}).responseText;

[A me=144][/a]Example

 

var xmlDocument = [crte xml document];

$.ajax({

 url: "page.php",

 processData: false,

 data: xmlDocument,

 success: handleResponse

});

8. Plugins

Accordion
Accordion(p)
Accordion(p options) returns jQuery
ke the selected elementsccordion widgets.
Sentic requirements:
If the structure of your container is flat with unique tags for hdernd content elements, eg.
definition list (dl > dt + dd), you don't have to specifyny optionstll.
If your structure uses the same elements for hdernd content or uses some kind of nested
structure, you have to specify the hder elements, eg. via class, see the second example.
Usectivate(Number) to change thective content programtically.
A change event is triggered everytime theccordion changes.part from the event object,ll
argumentsre jQuery objects.rguments: event, newHder, oldHder, newContent,
oldContent

Example

 

jQuery('#v').Accordion();

HTML

 

<dl id="v">

 <dt>Hder 1</dt>

 <dd>Content 1</dd>

 <dt>Hder 2</dt>

 <dd>Content 2</dd>

</dl>

Example

 

jQuery('#v').Accordion({

 hder: '.title'

});

[A me=146][/a]HTML

 

<div id="v">

<div>

  <div class="title">Hder 1</div>

  <div>Content 1</div>

</div>

<div>

  <div class="title">Hder 2</div>

  <div>Content 2</div>

</div>

</div>

Example

 

jQuery('#v').Accordion({

 hder: '.hd',

 vigation: true

});

HTML

 

<ul id="v">

 <li>

   <a class="hd" href="books/">Books</a>

   <ul>

     <li><a href="books/fantasy/">Fantasy</a></li>

     <li><a href="books/programming/">Programming</a></li>

   </ul>

 </li>

 <li>

   <a class="hd" href="movies/">Movies</a>

   <ul>

     <li><a href="movies/fantasy/">Fantasy</a></li>

     <li><a href="movies/programming/">Programming</a></li>

   </ul>

 </li>

</ul>

Example

 

jQuery('#accordion').Accordion().change(function(event, newHder, oldHder,

newContent, oldContent) {

 jQuery('#status').html(newHder.text());

});

activate(String|Element|jQuery|Booln|Number)

activate(String|Element|jQuery|Booln|Number index) returns
jQuery
Activate content part of theccordion programtically.
The index can be zero-indexed number to tch the position of the hder to close or string
expression tchingn element. Pass -1 to closell (only possible withlwaysOpen:false).

Example

 

jQuery('#accordion').activate(1);

Example

 

jQuery('#accordion').activate("a:first");

Example

 

jQuery('#v').activate(false);

<strong>Button</strong>

<strong>button(hOptions)</strong>

button(hOptions hash) returns jQuery 

Crtes button fromn ige element.

This functionttempts to mimic the functiolity of the "button" found in modern day GUIs. There

are two different buttons you can crte using this plugin; Norl buttons,nd Toggle buttons.

<strong>Center</strong>

<strong>center()</strong>

center() returns jQuery

Takesll tched elementsnd centers them,bsolutely, within the context of their parent

element. Grt for doing slideshows.

[A me=149][/a]Example

 

$("div img").center();

<strong>Cookie</strong>

<strong>$.cookie(String,String,Object)</strong>

$.cookie(String me, String value, Object options) returns

undefined 

Crte cookie with the given mend valuend other optiol parameters.

Example

 

$.cookie('the_cookie', 'the_value');

Example

 

$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', doin: 'jquery.com',

secure: true});

Example

 

$.cookie('the_cookie', 'the_value');

Example

 

$.cookie('the_cookie', null);

$.cookie(String)

$.cookie(String me) returns String
Get the value of cookie with the given me.

Example

 

$.cookie('the_cookie');

<strong>Form</strong>

<strong>ajaxSubmit(options)</strong>

ajaxSubmit(options object) returns jQuery 

ajaxSubmit() provides mechanism for submittingn HTML form usingJAX.

ajaxSubmitccepts singlergument which can be either success callback function orn

options Object.  If function is provided it will be invoked upon successful completion of the

submitnd will be passed the response from the server. Ifn options Object is provided, the

followingttributesre supported:

target:   Identifies the element(s) in the page to be updated with the server response.

          This value y be specified as jQuery selection string, jQuery object,

          or DOM element.

          default value: null

url:      URL to which the form data will be submitted.

          default value: value of form's 'action'ttribute

type:     The method in which the form data should be submitted, 'GET' or 'POST'.

          default value: value of form's 'method'ttribute (or 'GET' if none found)

beforeSubmit:  Callback method to be invoked before the form is submitted.

          default value: null

success:  Callback method to be invokedfter the form has been successfully submitted

         nd the response has been returned from the server

          default value: null

dataType: Expected dataType of the response.  One of: null, 'xml', 'script', or 'json'

          default value: null

sentic: Booln flag indicating whether data must be submitted in sentic order (slower).

          default value: false

resetForm: Booln flag indicating whether the form should be reset if the submit is successful

clrForm: Booln flag indicating whether the form should be clred if the submit is successful

The 'beforeSubmit' callback can be provided as hook for running pre-submit logic or for

[A me=151][/a]validating the form data. If the 'beforeSubmit' callback returns false then the form will not be
submitted. The 'beforeSubmit' callback is invoked with threerguments: the form data inrray
fort, the jQuery object,nd the options object passed intojaxSubmit. The form datarray
takes the following form:
[ { me: 'userme', value: 'jresig' }, { me: 'password', value: 'secret' } ]
If 'success' callback method is provided it is invokedfter the response has been returned from
the server. It is passed the responseText or responseXML value (depending on dataType). See
jQuery.ajax for further details.
The dataType option provides mns for specifying how the server response should be handled.
This ps directly to the jQuery.httpData method. The following valuesre supported:
'xml': if dataType == 'xml' the server response is trteds XMLnd the 'success'
callback method, if specified, will be passed the responseXML value
'json': if dataType == 'json' the server response will be evalutednd passed to
the 'success' callback, if specified
'script': if dataType == 'script' the server response is evaluated in the global context
Note that it does not ke sense to use both the 'target'nd 'dataType' options. If bothre
provided the target will be ignored.
The senticrgument can be used to force form serialization in sentic order. This is norlly
truenyway, unless the form contains input elements of type='ige'. If your form must be
submitted with mvalue pairs in sentic ordernd your form containsn input of
type='ige" then pass true for thisrg, otherwise pass false (or nothing) tovoid the overhd
for this logic.
When used on its own,jaxSubmit() is typically bound to form's submit event like this:
$("#form-id").submit(function() {
$(this).ajaxSubmit(options);
return false;/ cancel conventiol submit });
When usingjaxForm(), however, this is done for you.

Example

 

$('#myForm').ajaxSubmit(function(data) {

   alert('Form submit succeeded! Server returned: ' + data);

});

Example

 

var options = {

   target: '#myTargetDiv'

};

$('#myForm').ajaxSubmit(options);

[A me=152][/a]Example

 

var options = {

   success: function(responseText) {

       alert(responseText);

   }

};

$('#myForm').ajaxSubmit(options);

Example

 

var options = {

   beforeSubmit: function(forrray, jqForm) {

       if (forrray.length == 0) {

           alert('Plse enter data.');

           return false;

       }

   }

};

$('#myForm').ajaxSubmit(options);

Example

 

var options = {

   url: myJsonUrl.php,

   dataType: 'json',

   success: function(data) {

      // 'data' isn object representing the the evaluated json data

   }

};

$('#myForm').ajaxSubmit(options);

Example

 

var options = {

   url: myXmlUrl.php,

   dataType: 'xml',

   success: function(responseXML) {

      // responseXML is XML document object

      var data = $('myElement', responseXML).text();

[A me=153][/a] }
};
$('#myForm').ajaxSubmit(options);

Example

 

var options = {

   resetForm: true

};

$('#myForm').ajaxSubmit(options);

Example

 

$('#myForm).submit(function() {

  $(this).ajaxSubmit();

  return false;

});

ajaxForm(options)

ajaxForm(options object) returns jQuery
ajaxForm() provides mechanism for fullyutoting form submission.
Thedvantages of using this method instd ofjaxSubmit()re:
1: This method will include coordites for elements (if the element
is used to submit the form). 2. This method will include the submit element's mvalue data (for
the element that was
used to submit the form). 3. This method binds the submit() method to the form for you.
Note that forccurate x/y coordites of ige submit elements inll browsers you need tolso
use the "dimensions" plugin (this method willuto-detect its presence).
The optionsrgument forjaxForm works exactlys it does forjaxSubmit. jaxForm merely
passes the optionsrgumentlongfter properly binding events for submit elementsnd the form
itself. SeejaxSubmit for full description of the optionsrgument.

Example

 

var options = {

   target: '#myTargetDiv'

};

$('#myForm').ajaxSForm(options);

Example

 

var options = {

   success: function(responseText) {

       alert(responseText);

   }

};

$('#myForm').ajaxSubmit(options);

Example

 

var options = {

   beforeSubmit: function(forrray, jqForm) {

       if (forrray.length == 0) {

           alert('Plse enter data.');

           return false;

[A me=155][/a] }
}
};
$('#myForm').ajaxSubmit(options);

ajaxFormUnbind()

ajaxFormUnbind() returns jQuery
ajaxFormUnbind unbinds the event handlers that were bound byjaxForm

formToArray(sentic)

formToArray(sentic true) returnsrray