Function: jQuery

Reference

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

Signature
jQuery(expression, context) → jQuery
Description
The core functionality of jQuery centers around 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 in an expression (usually consisting of CSS), which then finds all matching elements. By default, if no context is specified, $() looks for DOM elements within the context of the current HTML document. If you do specify a context, such as a DOM element or jQuery object, the expression will be matched against the contents of that context. See <a href='Selectors'>Selectors</a> for the allowed CSS syntax for expressions.
Parameters
  • String expression : An expression to search with.
  • Element, jQuery context : A DOM Element, Document or jQuery to use as context
Examples
Example:
Finds all p elements that are children of a div element.
$("div > p").css("border", "1px solid gray");

<p>one</p> <div><p>two</p></div> <p>three</p>
Example:
Finds all inputs of type radio within the first form in the document.
$("input:radio", document.forms[0]);
Example:
Finds all div elements within an XML document from an AJAX response.
$("div", xml.responseXML);
Added
1.0
Timestamp: 2007-11-17T11:56:36Z, Build date: 06-09-2008 13:41


Function: jQuery

Reference

[Function] jQuery(html)
Create DOM elements on-the-fly from the provided String of raw HTML.

Signature
jQuery(html) → jQuery
Description
You can pass in plain HTML Strings written by hand, create them using some template engine or plugin, or load them via AJAX. There are limitations when creating input elements, see the second example. Also when passing strings that may include slashes (such as an image path), escape the slashes. When creating single elements use the closing tag or XHTML format. For example, to create a span use $("<span/>") or $("<span></span>") instead of without the closing slash/tag.
Parameters
  • String html : A string of HTML to create on the fly.
Examples
Example:
Creates a div element (and all of its contents) dynamically, and appends it to the body element. Internally, an element is created and its innerHTML property set to the given markup. It is therefore both quite flexible and limited.
$("<div><p>Hello</p></div>").appendTo("body")
Example:
Do not create <input>-Elements without a type-attribute, due to Microsofts read/write-once-rule for the type-attribute of <input>-elements, see this [http://msdn2.microsoft.com/en-us/library/ms534700.aspx official statement] for details.
// Does NOT work in IE:
$("<input/>").attr("type", "checkbox");
// Does work in IE:
$("<input type='checkbox'/>");
Added
1.0
Timestamp: 2007-11-17T11:56:36Z, Build date: 06-09-2008 13:41


Function: jQuery

Reference

[Function] jQuery(elements)
Wrap jQuery functionality around a single or multiple DOM Element(s).

Signature
jQuery(elements) → jQuery
Description
This function also accepts XML Documents and Window objects as valid arguments (even though they are not DOM Elements).
Parameters
  • Element, Array elements : DOM element(s) to be encapsulated by a jQuery object.
Examples
Example:
Sets the background color of the page to black.
$(document.body).css( "background", "black" );
Example:
Hides all the input elements within a form.
$(myForm.elements).hide()
Added
1.0
Timestamp: 2007-11-17T11:56:36Z, Build date: 06-09-2008 13:41


Function: jQuery

Reference

[Function] jQuery(callback)
A shorthand for $(document).ready().

Signature
jQuery(callback) → jQuery
Description
Allows you to bind a function to be executed when the DOM document has finished loading. This function behaves just like $(document).ready(), in that it should be used to wrap other $() operations on your page that depend on the DOM being ready to be operated on. While this function is, technically, chainable - there really isn't much use for chaining against it. You can have as many $(document).ready events on your page as you like. See ready(Function) for details about the ready event.
Parameters
  • Function callback : The function to execute when the DOM is ready.
Examples
Example:
Executes the function when the DOM is ready to be used.
$(function(){
  // Document is ready
});
Example:
Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias.
jQuery(function($) {
  // Your code using failsafe $ alias here...
});
Added
1.0
Timestamp: 2007-11-17T11:56:36Z, Build date: 06-09-2008 13:41


Function: each

Reference

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

Signature
each(callback) → jQuery
Description
This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element. Additionally, the function, when executed, is passed a single argument representing the position of the element in the matched set (integer, zero-index). Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with a normal loop).
Parameters
  • Function callback : The callback to execute for each matched element. <pre>function callback(index, domElement) { this; // this == domElement } </pre>
Examples
Example:
Iterates over three divs and sets their color property.
    $(document.body).click(function () {
      $("div").each(function (i) {
        if (this.style.color != "blue") {
          this.style.color = "blue";
        } else {
          this.style.color = "";
        }
      });
    });

<div>Click here</div>
  <div>to iterate through</div>
  <div>these divs.</div>

  div { color:red; text-align:center; cursor:pointer;
        font-weight:bolder; width:300px; }
Example:
If you want to have the jQuery object instead of the regular DOM element, use the $(this) function, for example:
    $("span").click(function () {
      $("li").each(function(){
        $(this).toggleClass("example");
      });
    });

To do list: <span>(click here to change)</span>
  <ul>
    <li>Eat</li>
    <li>Sleep</li>
    <li>Be merry</li>
  </ul>

  ul { font-size:18px; margin:0; }
  span { color:blue; text-decoration:underline; cursor:pointer; }
  .example { font-style:italic; }
Example:
You can use 'return' to break out of each() loops early.
    $("button").click(function () {
      $("div").each(function (index, domEle) {
        // domEle == this
        $(domEle).css("backgroundColor", "yellow");
        if ($(this).is("#stop")) {
          $("span").text("Stopped at div index #" + index);
          return false;
        }
      });
    });

<button>Change colors</button>
  <span></span>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="stop">Stop here</div>
  <div></div>
  <div></div>
  <div></div>

  div { width:40px; height:40px; margin:5px; float:left;
        border:2px blue solid; text-align:center; }
  span { color:red; }
Added
1.0
Timestamp: 2007-10-12T06:03:00Z, Build date: 06-09-2008 13:41


Function: eq

Reference

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

Signature
eq(position) → jQuery
Description
The position of the element in the set of matched elements starts at 0 and goes to length - 1.
Parameters
  • Number position : The index of the element to select.
Examples
Example:
Reduces the selection to the second selected element.
$("p").eq(1).css("color", "red")

<p>This is just a test.</p><p>So is this</p>
Added
1.0
Timestamp: 2008-08-10T17:10:11Z, Build date: 06-09-2008 13:41


Function: get

Reference

[Function] get()
Access all matched DOM elements.

Signature
get() → Array
Description
This serves as a backwards-compatible way of accessing all matched elements (other than the jQuery object itself, which is, in fact, an array of elements). It is useful if you need to operate on the DOM elements themselves instead of using built-in jQuery functions.
Examples
Example:
Selects all divs in the document and returns the DOM Elements as an Array, then uses the built-in reverse-method to reverse that array.
    function disp(divs) {
      var a = [];
      for (var i = 0; i < divs.length; i++) {
        a.push(divs[i].innerHTML);
      }
      $("span").text(a.join(" "));
    }

    disp( $("div").get().reverse() );

Reversed - <span></span>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>

  span { color:red; }
Added
1.0
Timestamp: 2007-11-02T02:07:00Z, Build date: 06-09-2008 13:41


Function: get

Reference

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

Signature
get(index) → Element
Description
This allows you to extract the actual DOM element and operate on it directly without necessarily using jQuery functionality on it. This function called as $(this).get(0) is the equivalent of using square bracket notation on the jQuery object itself like $(this)[0].
Parameters
  • Number index : Access the element in the Nth position.
Examples
Example:
Gives the tag name of the element clicked on.
    $("*", document.body).click(function (e) {
      e.stopPropagation();
      var domEl = $(this).get(0);
      $("span:first").text("Clicked on - " + domEl.tagName);
    });

<span>&nbsp;</span>
  <p>In this paragraph is an <span>important</span> section</p>
  <div><input type="text" /></div>

  span { color:red; }
  div { background:yellow; }
Added
1.0
Timestamp: 2007-11-02T02:07:00Z, Build date: 06-09-2008 13:41


Function: index

Reference

[Function] index(subject)
Searches every matched element for the object and returns the index of the element, if found, starting with zero.

Signature
index(subject) → Number
Description
Returns -1 if the object wasn't found.
Parameters
  • Element subject : Object to search for.
Examples
Example:
On click, returns the index (based zero) of that div in the page.
    $("div").click(function () {
      // this is the dom element clicked
      var index = $("div").index(this);
      $("span").text("That was div index #" + index);
    });

<span>Click a div!</span>
  <div>First div</div>
  <div>Second div</div>
  <div>Third div</div>

  div { background:yellow; margin:5px; }
  span { color:red; }
Example:
Returns the index for the element with ID foobar.
$("*").index( $('#foobar')[0] )

<div id="foobar"><b></b><span id="foo"></span></div>
Example:
Returns the index for the element with ID foo within another element.
$("*").index( $('#foo')[0] )

<div id="foobar"><b></b><span id="foo"></span></div>
Example:
Returns the index for the element clicked within a collection.
var mainNavLinks = $('ul#mainNav li a');
mainNavLinks.click(function(){alert(mainNavLinks.index(this)0;});
Example:
Returns -1, as there is no element with ID bar.
$("*").index( $('#bar')[0] )

<div id="foobar"><b></b><span id="foo"></span></div>
Added
1.0
Timestamp: 2007-10-12T05:51:36Z, Build date: 06-09-2008 13:41


Function: data

Reference

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

Signature
data(name) → Any
Description
<p>If the jQuery collection references multiple elements, the value returned refers to the first element.</p><p>This function is used to get stored data on an element without the risk of a circular reference. It uses jQuery.data and is new to version 1.2.3. It can be used for many reasons and jQuery UI uses it heavily. </p>
Parameters
  • String name : Name of the data stored.
Examples
Example:
Get the data named "blah" stored at for an element.
    $("button").click(function(e) {
      var value;

      switch ($("button").index(this)) {
        case 0 :
          value = $("div").data("blah");
          break;
        case 1 :
          $("div").data("blah", "hello");
          value = "Stored!";
          break;
        case 2 :
          $("div").data("blah", 86);
          value = "Stored!";
          break;
        case 3 :
          $("div").removeData("blah");
          value = "Removed!";
          break;
      }

      $("span").text("" + value);
    });

<div>A div</div>
  <button>Get "blah" from the div</button>
  <button>Set "blah" to "hello"</button>
  <button>Set "blah" to 86</button>
  <button>Remove "blah" from the div</button>
  <p>The "blah" value of this div is <span>?</span></p>

  div { margin:5px; background:yellow; }
  button { margin:5px; font-size:14px; }
  p { margin:5px; color:blue; }
  span { color:red; }
Added
1.2.3
Timestamp: 2008-08-29T13:33:46Z, Build date: 06-09-2008 13:41


Function: data

Reference

[Function] data(name, value)
Stores the value in the named spot and also returns the value.

Signature
data(name, value) → Any
Description
<p>If the jQuery collection references multiple elements, the data element is set on all of them.</p><p>This function can be useful for attaching data to elements without having to create a new expando. It also isn't limited to a string. The value can be any format.</p>
Parameters
  • String name : Name of the data to store.
  • Any value : Value to be stored.
Examples
Example:
Store then retrieve a value from the div element.
    $("div").data("test", { first: 16, last: "pizza!" });
    $("span:first").text($("div").data("test").first);
    $("span:last").text($("div").data("test").last);

<div>
    The values stored were
    <span></span>
    and
    <span></span>
  </div>

  div { color:blue; }
  span { color:red; }
Added
1.2.3
Timestamp: 2008-08-29T13:33:46Z, Build date: 06-09-2008 13:41


Function: removeData

Reference

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

Signature
removeData(name) → jQuery
Description
This is the complement function to $(...).data(name, value).
Parameters
  • String name : The name of the data store property to remove.
Examples
Example:
Set a data store for 2 names then remove one of them.
    $("span:eq(0)").text("" + $("div").data("test1"));
    $("div").data("test1", "VALUE-1");
    $("div").data("test2", "VALUE-2");
    $("span:eq(1)").text("" + $("div").data("test1"));
    $("div").removeData("test1");
    $("span:eq(2)").text("" + $("div").data("test1"));
    $("span:eq(3)").text("" + $("div").data("test2"));

<div>value1 before creation: <span></span></div>
  <div>value1 after creation: <span></span></div>
  <div>value1 after removal: <span></span></div>
  <div>value2 after removal: <span></span></div>

  div { margin:2px; color:blue; }
  span { color:red; }
Added
1.2.3
Timestamp: 2008-03-15T02:19:27Z, Build date: 06-09-2008 13:41


Function: jQuery.fn.extend

Reference

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

Signature
jQuery.fn.extend(object) → jQuery
Description
Can be used to add functions into the to add <a href='Plugins/Authoring'>plugin methods (plugins)</a>.
Parameters
  • Object object : The object that will be merged into the jQuery object.
Examples
Example:
Adds two plugin methods.
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
Added
1.0
Timestamp: 2007-10-12T05:47:51Z, Build date: 06-09-2008 13:41


Function: jQuery.extend

Reference

[Function] jQuery.extend(object)
Extends the jQuery object itself.

Signature
jQuery.extend(object) → jQuery
Description
Can be used to add functions into the jQuery namespace. See <a href='Core/jQuery.fn.extend'>jQuery.fn.extend</a> for more information on using this method to add <a href='Plugins/Authoring'>Plugins</a>.
Parameters
  • Object object : The object that will be merged into the jQuery object.
Examples
Example:
Adds two functions into the jQuery namespace.
jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});
Added
1.0
Timestamp: 2007-10-12T05:46:58Z, Build date: 06-09-2008 13:41


Function: jQuery.noConflict

Reference

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

Signature
jQuery.noConflict() → jQuery
Description
This helps to make sure that jQuery doesn't conflict with the $ object of other libraries. By using this function, you will only be able to access jQuery using the 'jQuery' variable. For example, where you used to do $("div p"), you now must do jQuery("div p"). '''NOTE:''' This function must be called after including the jQuery javascript file, but '''before''' including any other conflicting library, and also before actually that other conflicting library gets used, in case jQuery is included last. noConflict can be called at the end of the jQuery.js file to globally disable the $() jQuery alias. jQuery.noConflict returns a reference to jQuery, so it can be used to override the $() alias of the jQuery object.
Examples
Example:
Maps the original object that was referenced by $ back to $.
jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
Example:
Reverts the $ alias and then creates and executes a function to provide the $ as a jQuery alias inside the functions scope. Inside the function the original $ object is not available. This works well for most plugins that don't rely on any other library.
jQuery.noConflict();
(function($) {
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library
Example:
Creates a different alias instead of jQuery to use in the rest of the script.
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
Added
1.0
Timestamp: 2008-07-26T05:28:44Z, Build date: 06-09-2008 13:41


Function: jQuery.noConflict

Reference

[Function] jQuery.noConflict(extreme)
Revert control of both the $ and jQuery variables to their original owners. '''Use with discretion.'''

Signature
jQuery.noConflict(extreme) → jQuery
Description
This is a more-extreme version of the simple <a href='Core/jQuery.noConflict'>noConflict</a> method, as this one will completely undo what jQuery has introduced. This is to be used in an extreme case where you'd like to embed jQuery into a high-conflict environment. '''NOTE:''' It's very likely that plugins won't work after this particular method has been called.
Parameters
  • Boolean extreme : Set to true to enable the extreme rollback of jQuery and its variables.
Examples
Example:
Completely move jQuery to a new namespace in another object.
var dom = {};
dom.query = jQuery.noConflict(true);
Added
1.1.4
Timestamp: 2008-07-26T05:28:44Z, Build date: 06-09-2008 13:41


Selector: id

Reference

[Selector] id
Matches a single element with the given id attribute.

Signature
id → Array
Description
If the id contains characters like periods or colons you have to escape those characters with backslashes [http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_that_has_weird_characters_in_its_ID.3F].
Sample
#id
Parameters
  • String id : An ID to search for, specified via the id attribute of an element.
Examples
Example:
Finds the element with the id "myDiv".
$("#myDiv").css("border","3px solid red");

<div id="notMe"><p>id="notMe"</p></div>
  <div id="myDiv">id="myDiv"</div>

  div {
    width: 90px;
    height: 90px;
    float:left;
    padding: 5px;
    margin: 5px;
    background-color: #EEEEEE;
  }
Example:
Finds the element with the id "myID.entry[1]". See how certain characters must be escaped with backslashes.
$("#myID\\.entry\\[1\\]").css("border","3px solid red");

<div id="myID.entry[0]">id="myID.entry[0]"</div>
  <div id="myID.entry[1]">id="myID.entry[1]"</div>
  <div id="myID.entry[2]">id="myID.entry[2]"</div>

  div {
    width: 300px;
    float:left;
    padding: 2px;
    margin: 3px;
    background-color: #EEEEEE;
  }
Added
1.0
Timestamp: 2008-04-12T10:45:53Z, Build date: 06-09-2008 13:41


Selector: element

Reference

[Selector] element
Matches all elements with the given name.

Signature
element → Array
Sample
element
Parameters
  • String element : An element to search for. Refers to the tagName of DOM nodes.
Examples
Example:
Finds every DIV element.
$("div").css("border","3px solid red");

<div>DIV1</div>
  <div>DIV2</div>
  <span>SPAN</span>

  div,span {
    width: 60px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
Added
1.0
Timestamp: 2008-05-25T22:30:44Z, Build date: 06-09-2008 13:41


Selector: class

Reference

[Selector] class
Matches all elements with the given class.

Signature
class → Array
Sample
.class
Parameters
  • String class : A class to search for. An element can have multiple classes, one of them must match.
Examples
Example:
Finds the element with the class "myClass".
$(".myClass").css("border","3px solid red");

<div class="notMe">div class="notMe"</div>
  <div class="myClass">div class="myClass"</div>
  <span class="myClass">span class="myClass"</span>

  div,span {
    width: 150px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
Added
1.0
Timestamp: 2008-04-12T10:43:39Z, Build date: 06-09-2008 13:41


Selector: all

Reference

[Selector] all
Matches all elements.

Signature
all → Array
Description
Most useful when combined with a context to search in.
Sample
*
Examples
Example:
Finds every element (including head, body, etc).
$("*").css("border","3px solid red");

<div>DIV</div>
  <span>SPAN</span>
  <p>P <button>Button</button></p>

  div,span,p {
    width: 150px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
Example:
A common way to find all elements is to set the 'context' to document.body so elements like head, script, etc are left out.
$("*", document.body).css("border","3px solid red");
Added
1.0
Timestamp: 2008-04-12T10:44:19Z, Build date: 06-09-2008 13:41


Selector: multiple

Reference

[Selector] multiple
Matches the combined results of all the specified selectors.

Signature
multiple → Array
Description
You can specify any number of selectors to combine into a single result. Note order of the dom elements in the jQuery object aren't necessarily identical.
Sample
selector1, selector2, selectorN
Parameters
  • Selector selector1 : Any valid selector
  • Selector selector2 : Another valid selector
  • Selector selectorN : As many more valid selectors as you like
Examples
Example:
Finds the elements that match any of these three selectors.
$("div,span,p.myClass").css("border","3px solid red");

<div>div</div>
  <p class="myClass">p class="myClass"</p>
  <p class="notMyClass">p class="notMyClass"</p>
  <span>span</span>

  div,span,p {
    width: 130px;
    height: 60px;
    float:left;
    padding: 3px;
    margin: 2px;
    background-color: #EEEEEE;
    font-size:14px;
  }
Example:
Show the order in the jQuery object.
    var list = $("div,p,span").map(function () {
      return this.tagName;
    }).get().join(", ");
    $("b").append(document.createTextNode(list));

<span>span</span>
  <p>p</p>
  <p>p</p>
  <div>div</div>
  <span>span</span>
  <p>p</p>
  <div>div</div>
  <b></b>

  b { color:red; font-size:16px; display:block; clear:left; }
  div,span,p { width: 40px; height: 40px; float:left;
               margin: 10px; background-color: blue;
               padding:3px; color:white; }
Added
1.0
Timestamp: 2008-04-12T10:44:47Z, Build date: 06-09-2008 13:41


Selector: descendant

Reference

[Selector] descendant
Matches all descendant elements specified by "descendant" of elements specified by "ancestor".

Signature
descendant → Array
Sample
ancestor descendant
Parameters
  • Selector ancestor : Any valid selector.
  • Selector descendant : A selector to match elements that are descendants of the first selector.
Examples
Example:
Finds all input descendants of forms.
$("form input").css("border", "2px dotted blue");

<form>
    <div>Form is surrounded by the green outline</div>
    <label>Child:</label>
    <input name="name" />
    <fieldset>
      <label>Grandchild:</label>
      <input name="newsletter" />
    </fieldset>
  </form>
  Sibling to form: <input name="none" />

  body { font-size:14px; }
  form { border:2px green solid; padding:2px; margin:0;
         background:#efe; }
  div { color:red; }
  fieldset { margin:1px; padding:3px; }
Added
1.0
Timestamp: 2008-04-12T10:45:22Z, Build date: 06-09-2008 13:41


Selector: child

Reference

[Selector] child
Matches all child elements specified by "child" of elements specified by "parent".

Signature
child → Array
Sample
parent > child
Parameters
  • Selector parent : Any valid selector.
  • Selector child : A selector to match elements that are children of the first selector.
Examples
Example:
Finds all children of the element with id "main" which is yellow.
$("#main > *").css("border", "3px double red");

<span id="main">
    <div></div>
    <button>Child</button>
    <div class="mini"></div>
    <div>
      <div class="mini"></div>
      <div class="mini"></div>
    </div>
    <div><button>Grand</button></div>
    <div><span>A Span <em>in</em> child</span></div>
    <span>A Span in main</span>
  </span>

  body { font-size:14px; }
  span#main { display:block; background:yellow; height:110px; }
  button { display:block; float:left; margin:2px;
           font-size:14px; }
  div { width:90px; height:90px; margin:5px; float:left;
        background:#bbf; font-weight:bold; }
  div.mini { width:30px; height:30px; background:green; }
Added
1.0
Timestamp: 2008-04-12T10:46:31Z, Build date: 06-09-2008 13:41


Selector: next

Reference

[Selector] next
Matches all next elements specified by "next" that are next to elements specified by "prev".

Signature
next → Array
Sample
prev + next
Parameters
  • Selector prev : Any valid selector.
  • Selector next : A selector to match elements that are next to the first selector.
Examples
Example:
Finds all inputs that are next to a label.
$("label + input").css("color", "blue").val("Labeled!")

<form>
    <label>Name:</label>
    <input name="name" />
    <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
    </fieldset>
  </form>
  <input name="none" />
Added
1.0
Timestamp: 2008-04-12T10:47:01Z, Build date: 06-09-2008 13:41


Selector: siblings

Reference

[Selector] siblings
Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.

Signature
siblings → Array
Sample
prev ~ siblings
Parameters
  • Selector prev : Any valid selector.
  • Selector siblings : A filter selector to match elements that are following siblings to the first selector.
Examples
Example:
Finds all divs that are siblings after the element with #prev as its id. Notice the span isn't selected since it is not a div and the "niece" isn't selected since it is a child of a sibling, not an actual sibling.
$("#prev ~ div").css("border", "3px groove blue");

<div>div (doesn't match since before #prev)</div>
  <div id="prev">div#prev</div>
  <div>div sibling</div>
  <div>div sibling <div id="small">div neice</div></div>
  <span>span sibling (not div)</span>
  <div>div sibling</div>

  div,span {
    display:block;
    width:80px;
    height:80px;
    margin:5px;
    background:#bbffaa;
    float:left;
    font-size:14px;
  }
  div#small {
    width:60px;
    height:25px;
    font-size:12px;
    background:#fab;
  }
Added
1.0
Timestamp: 2008-04-12T10:47:41Z, Build date: 06-09-2008 13:41


Selector: first

Reference

[Selector] first
Matches the first selected element.

Signature
first → Array
Description
While this matches only a single element, <a href='Selectors/firstChild'>:first-child</a> matches more than one: One for each parent.
Sample
:first
Examples
Example:
Finds the first table row.
$("tr:first").css("font-style", "italic");

<table>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
  </table>

  td { color:blue; font-weight:bold; }
Added
1.0
Timestamp: 2008-05-10T19:24:23Z, Build date: 06-09-2008 13:41


Selector: last

Reference

[Selector] last
Matches the last selected element.

Signature
last → Array
Sample
:last
Examples
Example:
Finds the last table row.
$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});

<table>
    <tr><td>First Row</td></tr>
    <tr><td>Middle Row</td></tr>
    <tr><td>Last Row</td></tr>
  </table>
Added
1.0
Timestamp: 2008-04-12T10:49:46Z, Build date: 06-09-2008 13:41


Selector: not

Reference

[Selector] not
Filters out all elements matching the given selector.

Signature
not → Array
Sample
:not(selector)
Parameters
  • Selector selector : A selector with which to filter by.
Examples
Example:
Finds all inputs that are not checked and highlights the next sibling span. Notice there is no change when clicking the checkboxes since no click events have been linked.
    $("input:not(:checked) + span").css("background-color", "yellow");
    $("input").attr("disabled", "disabled");

<div>
    <input type="checkbox" name="a" />
    <span>Mary</span>
  </div>
  <div>
    <input type="checkbox" name="b" />
    <span>lcm</span>
  </div>
  <div>
    <input type="checkbox" name="c" checked="checked" />
    <span>Peter</span>
  </div>
Added
1.1.4
Timestamp: 2008-05-22T15:26:25Z, Build date: 06-09-2008 13:41


Selector: even

Reference

[Selector] even
Matches even elements, zero-indexed.

Signature
even → Array
Sample
:even
Examples
Example:
Finds even table rows, matching the first, third and so on (index 0, 2, 4 etc.).
$("tr:even").css("background-color", "#bbbbff");

<table border="1">
    <tr><td>Row with Index #0</td></tr>
    <tr><td>Row with Index #1</td></tr>
    <tr><td>Row with Index #2</td></tr>
    <tr><td>Row with Index #3</td></tr>
  </table>

  table {
    background:#eeeeee;
  }
Added
1.0
Timestamp: 2008-04-12T10:50:56Z, Build date: 06-09-2008 13:41


Selector: odd

Reference

[Selector] odd
Matches odd elements, zero-indexed.

Signature
odd → Array
Sample
:odd
Examples
Example:
Finds odd table rows, matching the second, fourth and so on (index 1, 3, 5 etc.).
$("tr:odd").css("background-color", "#bbbbff");

<table border="1">
    <tr><td>Row with Index #0</td></tr>
    <tr><td>Row with Index #1</td></tr>
    <tr><td>Row with Index #2</td></tr>
    <tr><td>Row with Index #3</td></tr>
  </table>

  table {
    background:#f3f7f5;
  }
Added
1.0
Timestamp: 2008-04-12T10:51:33Z, Build date: 06-09-2008 13:41


Selector: eq

Reference

[Selector] eq
Matches a single element by its index.

Signature
eq → Array
Sample
:eq(index)
Parameters
  • Number index : Zero-based index of the element to match.
Examples
Example:
Finds the third td.
$("td:eq(2)").css("color", "red");

<table border="1">
    <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
    <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
    <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
  </table>
Added
1.0
Timestamp: 2008-04-15T22:47:38Z, Build date: 06-09-2008 13:41


Selector: gt

Reference

[Selector] gt
Matches all elements with an index above the given one.

Signature
gt → Array
Sample
:gt(index)
Parameters
  • Number index : Zero-based index.
Examples
Example:
Finds TD #5 and higher. Reminder: the indexing starts at 0.
$("td:gt(4)").css("text-decoration", "line-through");

<table border="1">
    <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
    <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
    <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
  </table>
Added
1.0
Timestamp: 2008-04-15T22:48:14Z, Build date: 06-09-2008 13:41


Selector: lt

Reference

[Selector] lt
Matches all elements with an index below the given one.

Signature
lt → Array
Sample
:lt(index)
Parameters
  • Number index : Zero-based index.
Examples
Example:
Finds TDs less than the one with the 4th index (TD#4).
$("td:lt(4)").css("color", "red");

<table border="1">
    <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
    <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
    <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
  </table>
Added
1.0
Timestamp: 2008-04-12T10:53:26Z, Build date: 06-09-2008 13:41


Selector: header

Reference

[Selector] header
Matches all elements that are headers, like h1, h2, h3 and so on.

Signature
header → Array
Sample
:header
Examples
Example:
Adds a background and text color to all the headers on the page.
$(":header").css({ background:'#CCC', color:'blue' });

<h1>Header 1</h1>
  <p>Contents 1</p>
  <h2>Header 2</h2>
  <p>Contents 2</p>

  body { font-size: 10px; font-family: Arial; }
  h1, h2 { margin: 3px 0; }
Added
1.2
Timestamp: 2008-04-12T10:53:37Z, Build date: 06-09-2008 13:41


Selector: animated

Reference

[Selector] animated
Matches all elements that are currently being animated.

Signature
animated → Array
Sample
:animated
Examples
Example:
Change the color of any div that is animated.
    $("#run").click(function(){
      $("div:animated").toggleClass("colored");
    });
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
    }
    animateIt();

<button id="run">Run</button>
  <div></div>
  <div id="mover"></div>
  <div></div>

  div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left; }
  div.colored { background:green; }
Added
1.2
Timestamp: 2008-04-12T10:53:52Z, Build date: 06-09-2008 13:41


Selector: contains

Reference

[Selector] contains
Matches elements which contain the given text.

Signature
contains → Array
Sample
:contains(text)
Parameters
  • String text : A string of text to look for. It's case sensitive.
Examples
Example:
Finds all divs containing "John" and underlines them.
$("div:contains('John')").css("text-decoration", "underline");

<div>John Resig</div>
  <div>George Martin</div>
  <div>Malcom John Sinclair</div>
  <div>J. Ohn
Added
1.1.4
Timestamp: 2008-04-15T22:49:43Z, Build date: 06-09-2008 13:41


Selector: empty

Reference

[Selector] empty
Matches all elements that have no children (including text nodes).

Signature
empty → Array
Sample
:empty
Examples
Example:
Finds all elements that are empty - they don't have child elements or text.
$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');

<table border="1">
    <tr><td>TD #0</td><td></td></tr>
    <tr><td>TD #2</td><td></td></tr>
    <tr><td></td><td>TD#5</td></tr>
  </table>

  td { text-align:center; }
Added
1.0
Timestamp: 2008-04-12T10:56:28Z, Build date: 06-09-2008 13:41


Selector: has

Reference

[Selector] has
Matches elements which contain at least one element that matches the specified selector.

Signature
has → Array
Sample
:has(selector)
Parameters
  • Selector selector : A selector with which to filter by.
Examples
Example:
Adds the class "test" to all divs that have a paragraph inside of them.
$("div:has(p)").addClass("test");

<div><p>Hello in a paragraph</p></div>
  <div>Hello again! (with no paragraph)</div>

  .test{ border: 3px inset red; }
Added
1.1.4
Timestamp: 2008-04-12T10:57:09Z, Build date: 06-09-2008 13:41


Selector: parent

Reference

[Selector] parent
Matches all elements that are parents - they have child elements, including text.

Signature
parent → Array
Sample
:parent
Examples
Example:
Finds all tds with children, including text.
$("td:parent").fadeTo(1500, 0.3);

<table border="1">
    <tr><td>Value 1</td><td></td></tr>
    <tr><td>Value 2</td><td></td></tr>
  </table>

td { width:40px; background:green; }
Added
1.0
Timestamp: 2008-04-12T10:58:06Z, Build date: 06-09-2008 13:41


Selector: hidden

Reference

[Selector] hidden
Matches all elements that are hidden, or input elements of type "hidden".

Signature
hidden → Array
Sample
:hidden
Examples
Example:
Shows all hidden divs and counts hidden inputs.
    // in some browsers :hidden includes head, title, script, etc... so limit to body
    $("span:first").text("Found " + $(":hidden", document.body).length +
                         " hidden elements total.");
    $("div:hidden").show(3000);
    $("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");

<span></span>
  <div></div>
  <div style="display:none;">Hider!</div>
  <div></div>
  <div class="starthidden">Hider!</div>
  <div></div>
  <form>
    <input type="hidden" />
    <input type="hidden" />
    <input type="hidden" />
  </form>
  <span>
  </span>

  div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
  span { display:block; clear:left; color:red; }
  .starthidden { display:none; }
Added
1.0
Timestamp: 2008-04-12T10:58:18Z, Build date: 06-09-2008 13:41


Selector: visible

Reference

[Selector] visible
Matches all elements that are visible.

Signature
visible → Array
Sample
:visible
Examples
Example:
Make all visible divs turn yellow on click.
    $("div:visible").click(function () {
      $(this).css("background", "yellow");
    });
    $("button").click(function () {
      $("div:hidden").show("fast");
    });

<button>Show hidden to see they don't change</button>
  <div></div>
  <div class="starthidden"></div>
  <div></div>
  <div></div>
  <div style="display:none;"></div>

  div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
  .starthidden { display:none; }
Added
1.0
Timestamp: 2008-04-12T10:58:29Z, Build date: 06-09-2008 13:41


Selector: attributeHas

Reference

[Selector] attributeHas
Matches elements that have the specified attribute. Note the "@" before the attribute name was deprecated as of version 1.2.

Signature
attributeHas → Array
Sample
[attribute]
Parameters
  • String attribute : An attribute name.
Examples
Example:
Bind a single click that adds the div id to its text.
    $("div[id]").one("click", function(){
      var idString = $(this).text() + " = " + $(this).attr("id");
      $(this).text(idString);
    });

<div>no id</div>
  <div id="hey">with id</div>
  <div id="there">has an id</div>
  <div>nope</div>
Added
1.0
Timestamp: 2008-07-10T21:51:29Z, Build date: 06-09-2008 13:41


Selector: attributeEquals

Reference

[Selector] attributeEquals
Matches elements that have the specified attribute with a certain value.

Signature
attributeEquals → Array
Sample
[attribute=value]
Parameters
  • String attribute : An attribute name.
  • String value : An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]".
Examples
Example:
Finds all inputs with name 'newsletter' and changes the text of the span next to it.
$("input[name='newsletter']").next().text(" is newsletter");

<div>
    <input type="radio" name="newsletter" value="Hot Fuzz" />
    <span>name?</span>
  </div>
  <div>
    <input type="radio" name="newsletters" value="Cold Fusion" />
    <span>name?</span>
  </div>
  <div>
    <input type="radio" name="accept" value="Evil Plans" />
    <span>name?</span>
  </div>
Added
1.0
Timestamp: 2008-05-25T09:16:45Z, Build date: 06-09-2008 13:41


Selector: attributeNotEqual

Reference

[Selector] attributeNotEqual
Matches elements that either don't have the specified attribute or do have the specified attribute but not with a certain value.

Signature
attributeNotEqual → Array
Sample
[attribute!=value]
Parameters
  • String attribute : An attribute name.
  • String value : An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]".
Examples
Example:
Finds all inputs that don't have the name 'newsletter' and changes the text of the span next to it.
$("input[name!='newsletter']").next().text(" is not newsletter");

<div>
    <input type="radio" name="newsletter" value="Hot Fuzz" />
    <span>name?</span>
  </div>
  <div>
    <input type="radio" value="Cold Fusion" />
    <span>name?</span>
  </div>
  <div>
    <input type="radio" name="accept" value="Evil Plans" />
    <span>name?</span>
  </div>
Added
1.0
Timestamp: 2008-09-05T03:01:27Z, Build date: 06-09-2008 13:41


Selector: attributeStartsWith

Reference

[Selector] attributeStartsWith
Matches elements that have the specified attribute and it starts with a certain value.

Signature
attributeStartsWith → Array
Sample
[attribute^=value]
Parameters
  • String attribute : An attribute name.
  • String value : An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]".
Examples
Example:
Finds all inputs with an attribute name that starts with 'news' and puts text in them.
$("input[name^='news']").val("news here!");

<input name="newsletter" />
  <input name="milkman" />
  <input name="newsboy" />
Added
1.0
Timestamp: 2008-07-04T19:42:52Z, Build date: 06-09-2008 13:41


Selector: attributeEndsWith

Reference

[Selector] attributeEndsWith
Matches elements that have the specified attribute and it ends with a certain value.

Signature
attributeEndsWith → Array
Sample
[attribute$=value]
Parameters
  • String attribute : An attribute name.
  • String value : An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]".
Examples
Example:
Finds all inputs with an attribute name that ends with 'letter' and puts text in them.
$("input[name$='letter']").val("a letter");

<input name="newsletter" />
  <input name="milkman" />
  <input name="jobletter" />
Added
1.0
Timestamp: 2008-07-04T19:43:15Z, Build date: 06-09-2008 13:41


Selector: attributeContains

Reference

[Selector] attributeContains
Matches elements that have the specified attribute and it contains a certain value.

Signature
attributeContains → Array
Sample
[attribute*=value]
Parameters
  • String attribute : An attribute name.
  • String value : An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]".
Examples
Example:
Finds all inputs with a name attribute that contains 'man' and sets the value with some text.
$("input[name*='man']").val("has man in it!");

<input name="man-news" />
  <input name="milkman" />
  <input name="letterman2" />
  <input name="newmilk" />
Added
1.0
Timestamp: 2008-07-10T21:48:57Z, Build date: 06-09-2008 13:41


Selector: attributeMultiple

Reference

[Selector] attributeMultiple
Matches elements that match all of the specified attribute filters.

Signature
attributeMultiple → Array
Sample
[attributeFilter1][attributeFilter2][attributeFilterN]
Parameters
  • Selector attributeFilter1 : An attribute filter.
  • Selector attributeFilter2 : Another attribute filter, reducing the selection even more
  • Selector attributeFilterN : As many more attribute filters as necessary
Examples
Example:
Finds all inputs that have an id attribute and whose name attribute ends with man and sets the value.
$("input[id][name$='man']").val("only this one");

<input id="man-news" name="man-news" />
  <input name="milkman" />
  <input id="letterman" name="new-letterman" />
  <input name="newmilk" />
Added
1.0
Timestamp: 2008-06-18T04:22:36Z, Build date: 06-09-2008 13:41


Selector: nthChild

Reference

[Selector] nthChild
Matches all elements that are the nth-child of their parent or that are the parent's even or odd children.

Signature
nthChild → Array
Description
While <a href='Selectors/eq'>:eq(index)</a> matches only a single element, this matches more then one: One for each parent with index. Multiple for each parent with even, odd, or equation. The specified index is one-indexed, in contrast to :eq() which starts at zero.
Sample
:nth-child(index/even/odd/equation)
Parameters
  • Number/String index : The index of each child to match, starting with 1 or the string even, odd, or equation ( eg. :nth-child(even), :nth-child(4n) )
Examples
Example:
Finds the second li in each matched ul and notes it.
$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

<div><ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
  </ul></div>
  <div><ul>
    <li>Sam</li>
  </ul></div>
  <div><ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul></div>

  div { float:left; }
  span { color:blue; }
Example:
This is a playground to see how the selector works with different strings. Notice that this is different from the :even and :odd which have no regard for parent and just filter the list of elements to every other one. The :nth-child, however, counts the index of the child to its particular parent. In any case, it's easier to see than explain so...
    $("button").click(function () {
      var str = $(this).text();
      $("tr").css("background", "white");
      $("tr" + str).css("background", "#ff0000");
      $("#inner").text(str);
    });

<div>
    <button>:nth-child(even)</button>
    <button>:nth-child(odd)</button>
    <button>:nth-child(3n)</button>
    <button>:nth-child(2)</button>
  </div>
  <div>
    <button>:nth-child(3n+1)</button>
    <button>:nth-child(3n+2)</button>
    <button>:even</button>
    <button>:odd</button>
  </div>
  <div><table>
    <tr><td>John</td></tr>
    <tr><td>Karl</td></tr>
    <tr><td>Brandon</td></tr>
    <tr><td>Benjamin</td></tr>
  </table></div>
  <div><table>
    <tr><td>Sam</td></tr>
  </table></div>
  <div><table>
    <tr><td>Glen</td></tr>
    <tr><td>Tane</td></tr>
    <tr><td>Ralph</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Mike</td></tr>
    <tr><td>Dan</td></tr>
  </table></div>
  <span>
    tr<span id="inner"></span>
  </span>

  button { display:block; font-size:12px; width:100px; }
  div { float:left; margin:10px; font-size:10px;
        border:1px solid black; }
  span { color:blue; font-size:18px; }
  #inner { color:red; }
  td { width:50px; text-align:center; }
Added
1.1.4
Timestamp: 2008-04-12T11:03:57Z, Build date: 06-09-2008 13:41


Selector: firstChild

Reference

[Selector] firstChild
Matches all elements that are the first child of their parent.

Signature
firstChild → Array
Description
While <a href='Selectors/first'>:first</a> matches only a single element, this matches more than one: One for each parent.
Sample
:first-child
Examples
Example:
Finds the first span in each matched div to underline and add a hover state.
    $("div span:first-child")
        .css("text-decoration", "underline")
        .hover(function () {
              $(this).addClass("sogreen");
            }, function () {
              $(this).removeClass("sogreen");
            });

<div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon</span>
  </div>
  <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph</span>
  </div>

  span { color:#008; }
  span.sogreen { color:green; font-weight: bolder; }
Added
1.1.4
Timestamp: 2008-07-16T21:48:17Z, Build date: 06-09-2008 13:41


Selector: lastChild

Reference

[Selector] lastChild
Matches all elements that are the last child of their parent.

Signature
lastChild → Array
Description
While <a href='Selectors/last'>:last</a> matches only a single element, this matches more then one: One for each parent.
Sample
:last-child
Examples
Example:
Finds the last span in each matched div and adds some css plus a hover state.
    $("div span:last-child")
        .css({color:"red", fontSize:"80%"})
        .hover(function () {
              $(this).addClass("solast");
            }, function () {
              $(this).removeClass("solast");
            });

<div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon,</span>
    <span>Sam</span>
  </div>
  <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph,</span>
    <span>David</span>
  </div>

  span.solast { text-decoration:line-through; }
Added
1.1.4
Timestamp: 2008-04-12T11:04:20Z, Build date: 06-09-2008 13:41


Selector: onlyChild

Reference

[Selector] onlyChild
Matches all elements that are the only child of their parent.

Signature
onlyChild → Array
Description
If the parent has other child elements, nothing is matched.
Sample
:only-child
Examples
Example:
Finds the button with no siblings in each matched div and modifies look.
$("div button:only-child").text("Alone").css("border", "2px blue solid");

<div>
    <button>Sibling!</button>
    <button>Sibling!</button>
  </div>
  <div>
    <button>Sibling!</button>
  </div>
  <div>
    None
  </div>
  <div>
    <button>Sibling!</button>
    <button>Sibling!</button>
    <button>Sibling!</button>
  </div>
  <div>
    <button>Sibling!</button>
  </div>

  div { width:100px; height:80px; margin:5px; float:left; background:#b9e }
Added
1.1.4
Timestamp: 2008-04-12T11:05:16Z, Build date: 06-09-2008 13:41


Selector: input

Reference

[Selector] input
Matches all input, textarea, select and button elements.

Signature
input → Array
Sample
:input
Examples
Example:
Finds all input elements.
    var allInputs = $(":input");
    var formChildren = $("form > *");
    $("#messages").text("Found " + allInputs.length + " inputs and the form has " +
                             formChildren.length + " children.");

    // so it won't submit
    $("form").submit(function () { return false; });

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div id="messages">
  </div>

  textarea { height:45px; }
Added
1.0
Timestamp: 2008-08-27T16:34:24Z, Build date: 06-09-2008 13:41


Selector: text

Reference

[Selector] text
Matches all input elements of type text.

Signature
text → Array
Sample
:text
Examples
Example:
Finds all text inputs.
    var input = $(":text").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>
  </div>

  textarea { height:45px; }
Added
1.0
Timestamp: 2008-04-12T11:06:45Z, Build date: 06-09-2008 13:41


Selector: password

Reference

[Selector] password
Matches all input elements of type password.

Signature
password → Array
Sample
:password
Examples
Example:
Finds all password inputs.
    var input = $(":password").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>
  </div>

  textarea { height:45px; }
Added
1.0
Timestamp: 2008-04-12T11:08:50Z, Build date: 06-09-2008 13:41


Selector: radio

Reference

[Selector] radio
Matches all input elements of type radio.

Signature
radio → Array
Sample
:radio
Examples
Example:
Finds all radio inputs.
    var input = $(":radio").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" name="asdf" />
    <input type="radio" name="asdf" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>
  </div>

  textarea { height:45px; }
Added
1.0
Timestamp: 2008-04-12T11:09:01Z, Build date: 06-09-2008 13:41


Selector: checkbox

Reference

[Selector] checkbox
Matches all input elements of type checkbox.

Signature
checkbox → Array
Sample
:checkbox
Examples
Example:
Finds all checkbox inputs.
    var input = $(":checkbox").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>
  </div>

  textarea { height:45px; }
Added
1.0
Timestamp: 2008-04-12T11:09:18Z, Build date: 06-09-2008 13:41


Selector: submit

Reference

[Selector] submit
Matches all input elements of type submit.

Signature
submit → Array
Sample
:submit
Examples
Example:
Finds all submit inputs.
    var input = $(":submit").parent('td').css({background:"yellow", border:"3px red solid"});

    $('#result').text('jQuery matched ' + input.length + ' elements.');

    // so it won't submit
    $("form").submit(function () { return false; });

    // Extra JS to make the HTML easier to edit (None of this is relevant to the ':submit' selector
    $('#exampleTable').find('td').each(function(i, el) {
        var inputEl = $(el).children().get(0);
        $(el).before('<td>' + $(inputEl).attr('type') + '</td>');
    })

<table>
<form>
<table id="exampleTable" border="1" cellpadding="10" align="center">
    <tr>
        <th>
            Element Type
        </th>
        <th>
            Element
        </th>
    </tr
    <tr>
        <td>
            <input type="button" value="Input Button"/>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="file" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="hidden" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="image" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="password" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="radio" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="reset" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="submit" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
            <select><option>Option</option></select>
        </td>
    </tr>
    <tr>
        <td>
            <textarea></textarea>
        </td>
    </tr>
    <tr>
        <td>
            <button>Button</button>
          </td>
      </tr>
</table>
</form>
<div id="result"></div>

  textarea { height:45px; }
Added
1.0
Timestamp: 2008-08-27T16:17:46Z, Build date: 06-09-2008 13:41


Selector: image

Reference

[Selector] image
Matches all input elements of type image.

Signature
image → Array
Sample
:image
Examples
Example:
Finds all image inputs.
    var input = $(":image").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>
  </div>

  textarea { height:45px; }
Added
1.0
Timestamp: 2008-04-12T11:10:23Z, Build date: 06-09-2008 13:41


Selector: reset

Reference

[Selector] reset
Matches all input elements of type reset.

Signature
reset → Array
Sample
:reset
Examples
Example:
Finds all reset inputs.
    var input = $(":reset").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>
  </div>

  textarea { height:45px; }
Added
1.0
Timestamp: 2008-04-12T11:10:35Z, Build date: 06-09-2008 13:41


Selector: button

Reference

[Selector] button
Matches all button elements and input elements of type button.

Signature
button → Array
Sample
:button
Examples
Example:
Finds all button inputs.
    var input = $(":button").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>
  </div>

  textarea { height:45px; }
Added
1.0
Timestamp: 2008-05-26T02:16:22Z, Build date: 06-09-2008 13:41


Selector: file

Reference

[Selector] file
Matches all input elements of type file.

Signature
file → Array
Sample
:file
Examples
Example:
Finds all file inputs.
    var input = $(":file").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>
  </div>

  textarea { height:45px; }
Added
1.0
Timestamp: 2008-04-12T11:11:01Z, Build date: 06-09-2008 13:41


Selector: enabled

Reference

[Selector] enabled
Matches all elements that are enabled.

Signature
enabled → Array
Sample
:enabled
Examples
Example:
Finds all input elements that are enabled.
$("input:enabled").val("this is it");

<form>
    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
Added
1.0
Timestamp: 2008-04-12T11:11:12Z, Build date: 06-09-2008 13:41


Selector: disabled

Reference

[Selector] disabled
Matches all elements that are disabled.

Signature
disabled → Array
Sample
:disabled
Examples
Example:
Finds all input elements that are disabled.
$("input:disabled").val("this is it");

<form>
    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
Added
1.0
Timestamp: 2008-04-12T11:11:25Z, Build date: 06-09-2008 13:41


Selector: checked

Reference

[Selector] checked
Matches all elements that are checked.

Signature
checked → Array
Sample
:checked
Examples
Example:
Finds all input elements that are checked.
    function countChecked() {
      var n = $("input:checked").length;
      $("div").text(n + (n == 1 ? " is" : " are") + " checked!");
    }
    countChecked();
    $(":checkbox").click(countChecked);

<form>
    <input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
    <input type="checkbox" name="newsletter" value="Daily" />
    <input type="checkbox" name="newsletter" value="Weekly" />
    <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
    <input type="checkbox" name="newsletter" value="Yearly" />
  </form>
  <div></div>

  div { color:red; }
Added
1.0
Timestamp: 2008-04-12T11:12:41Z, Build date: 06-09-2008 13:41


Selector: selected

Reference

[Selector] selected
Matches all elements that are selected.

Signature
selected → Array
Sample
:selected
Examples
Example:
Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.
    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .trigger('change');

<select name="garden" multiple="multiple">
    <option>Flowers</option>
    <option selected="selected">Shrubs</option>
    <option>Trees</option>
    <option selected="selected">Bushes</option>
    <option>Grass</option>
    <option>Dirt</option>
  </select>
  <div></div>

  div { color:red; }
Added
1.0
Timestamp: 2008-04-15T03:15:02Z, Build date: 06-09-2008 13:41


Function: attr

Reference

[Function] 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. Attributes include title, alt, src, href, width, style, etc.

Signature
attr(name) → Object
Parameters
  • String name : The name of the property to access.
Examples
Example:
Finds the title attribute of the first <em> in the page.
    var title = $("em").attr("title");
    $("div").text(title);

<p>
    Once there was a <em title="huge, gigantic">large</em> dinosaur...
  </p>
  The title of the emphasis is:<div></div>

  em { color:blue; font-weight;bold; }
  div { color:red; }
Timestamp: 2008-08-27T16:28:41Z, Build date: 06-09-2008 13:41


Function: attr

Reference

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

Signature
attr(properties) → jQuery
Description
This serves as the best way to set a large number of properties on all matched elements. Note that you must use 'className' as key if you want to set the class-Attribute. Or use .addClass( class ) or .removeClass( class ). Keep in mind this recursively calls attr( key, value ) or attr ( key, fn ), so if one of the properties you are passing is a function, the function will be evaluated and not stored as the attribute itself.
Parameters
  • Map properties : Key/value pairs to set as object properties.
Examples
Example:
Set some attributes for all <img>s in the page.
    $("img").attr({
          src: "/images/hat.gif",
          title: "jQuery",
          alt: "jQuery Logo"
        });
    $("div").text($("img").attr("alt"));

<img />
  <img />
  <img />
  <div></div>

  img { padding:10px; }
  div { color:red; font-size:24px; }
Timestamp: 2008-08-27T16:28:41Z, Build date: 06-09-2008 13:41


Function: attr

Reference

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

Signature
attr(key, value) → jQuery
Parameters
  • String key : The name of the property to set.
  • Object value : The value to set the property to.
Examples
Example:
Disables buttons greater than the 1st button.
$("button:gt(1)").attr("disabled","disabled");

<button>0th Button</button>
  <button>1st Button</button>
  <button>2nd Button</button>

  button { margin:10px; }
Timestamp: 2008-08-27T16:28:41Z, Build date: 06-09-2008 13:41


Function: attr

Reference

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

Signature
attr(key, fn) → jQuery
Description
Instead of supplying a string value as described <a href='#keyvalue'>above</a>, a function is provided that computes the value.
Parameters
  • String key : The name of the property to set.
  • Function fn : A function returning the value to set. Scope: Current element, argument: Index of current element <pre>function callback(indexArray) { // indexArray == position in the jQuery object this; // dom element } </pre>
Examples
Example:
Sets id for divs based on the position in the page.
    $("div").attr("id", function (arr) {
          return "div-id" + arr;
        })
        .each(function () {
          $("span", this).html("(ID = '<b>" + this.id + "</b>')");
        });

<div>Zero-th <span></span></div>
  <div>First <span></span></div>
  <div>Second <span></span></div>

  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }
Example:
Sets src attribute from title attribute on the image.
    $("img").attr("src", function() {
          return "/images/" + this.title;
        });

<img title="hat.gif"/>
  <img title="hat-old.gif"/>
  <img title="hat2-old.gif"/>
Timestamp: 2008-08-27T16:28:41Z, Build date: 06-09-2008 13:41


Function: removeAttr

Reference

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

Signature
removeAttr(name) → jQuery
Parameters
  • String name : The name of the property to remove.
Examples
Example:
Clicking the button enables the input next to it.
    $("button").click(function () {
      $(this).next().removeAttr("disabled")
             .focus()
             .val("editable now");
    });

<button>Enable</button>
  <input type="text" disabled="disabled" value="can't edit this" />
Timestamp: 2007-10-23T08:13:39Z, Build date: 06-09-2008 13:41


Function: addClass

Reference

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

Signature
addClass(class) → jQuery
Parameters
  • String class : One or more classes to add to the elements, these are separated by spaces.
Examples
Example:
Adds the class 'selected' to the matched elements.
$("p:last").addClass("selected");

<p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>

  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }
Example:
Adds the classes 'selected' and 'highlight' to the matched elements.
$("p:last").addClass("selected highlight");

<p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>

  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }
Timestamp: 2008-07-18T17:51:11Z, Build date: 06-09-2008 13:41


Function: hasClass

Reference

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

Signature
hasClass(class) → Boolean
Parameters
  • String class : One CSS class name to be checked for.
Examples
Example:
Looks for the class 'selected' on the matched elements.
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());

<p>Hello</p>
  <p class="selected">Goodbye</p>
  <div id="result1">First paragraph has selected class: </div>
  <div id="result2">Last paragraph has selected class: </div>
  <div id="result3">Some paragraph has selected class: </div>

  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }
Timestamp: 2008-02-02T16:29:45Z, Build date: 06-09-2008 13:41


Function: removeClass

Reference

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

Signature
removeClass(class) → jQuery
Parameters
  • String class : One or more CSS classes to remove from the elements, these are separated by spaces.
Examples
Example:
Remove the class 'blue' from the matched elements.
$("p:even").removeClass("blue");

<p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>

  p { margin: 4px; font-size:16px; font-weight:bolder; }
  .blue { color:blue; }
  .under { text-decoration:underline; }
  .highlight { background:yellow; }
Example:
Remove the class 'blue' and 'under' from the matched elements.
$("p:odd").removeClass("blue under");

<p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>

  p { margin: 4px; font-size:16px; font-weight:bolder; }
  .blue { color:blue; }
  .under { text-decoration:underline; }
  .highlight { background:yellow; }
Example:
Remove all the classes from the matched elements.
$("p:eq(1)").removeClass();

<p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>

  p { margin: 4px; font-size:16px; font-weight:bolder; }
  .blue { color:blue; }
  .under { text-decoration:underline; }
  .highlight { background:yellow; }
Timestamp: 2008-04-17T04:58:42Z, Build date: 06-09-2008 13:41


Function: toggleClass

Reference

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

Signature
toggleClass(class) → jQuery
Parameters
  • String class : A CSS class to toggle on the elements.
Examples
Example:
Toggle the class 'highlight' when a paragraph is clicked.
    $("p").click(function () {
      $(this).toggleClass("highlight");
    });

<p class="blue">Click to toggle</p>
  <p class="blue highlight">highlight</p>
  <p class="blue">on these</p>
  <p class="blue">paragraphs</p>

  p { margin: 4px; font-size:16px; font-weight:bolder;
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:yellow; }
Timestamp: 2007-10-23T08:50:30Z, Build date: 06-09-2008 13:41


Function: html

Reference

[Function] 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).

Signature
html() → String
Examples
Example:
Click a paragraph to convert it from html to text.
    $("p").click(function () {
      var htmlStr = $(this).html();
      $(this).text(htmlStr);
    });

<p>
    <b>Click</b> to change the <span id="tag">html</span>
  </p>
  <p>
    to a <span id="text">text</span> node.
  </p>
  <p>
    This <button name="nada">button</button> does nothing.
  </p>

  p { margin:8px; font-size:20px; color:blue;
      cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }
Timestamp: 2008-04-17T03:59:51Z, Build date: 06-09-2008 13:41


Function: html

Reference

[Function] 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).

Signature
html(val) → jQuery
Parameters
  • String val : Set the html contents to the specified value.
Examples
Example:
Add some html to each div.
$("div").html("<span class='red'>Hello <b>Again</b></span>");

<span>Hello</span>
  <div></div>
  <div></div>
  <div></div>

  .red { color:red; }
Example:
Add some html to each div then immediately do further manipulations to the inserted html.
    $("div").html("<b>Wow!</b> Such excitement...");
    $("div b").append(document.createTextNode("!!!"))
              .css("color", "red");

<div></div>
  <div></div>
  <div></div>

  div { color:blue; font-size:18px; }
Timestamp: 2008-04-17T03:59:51Z, Build date: 06-09-2008 13:41


Function: text

Reference

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

Signature
text() → String
Description
The result is a string that contains the combined text contents of all matched elements. This method works on both HTML and XML documents. Cannot be used on input elements. For input field text use the <a href='Attributes/val#val'>val attribute</a>.
Examples
Example:
Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).
    var str = $("p:first").text();
    $("p:last").html(str);

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

  p { color:blue; margin:8px; }
  b { color:red; }
Timestamp: 2008-07-03T01:28:53Z, Build date: 06-09-2008 13:41


Function: text

Reference

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

Signature
text(val) → jQuery
Description
Similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities). Cannot be used on input elements. For input field text use the <a href='Attributes/val#val'>val attribute</a>.
Parameters
  • String val : The text value to set the contents of the element to.
Examples
Example:
Add text to the paragraph (notice the bold tag is escaped).
$("p").text("<b>Some</b> new text.");

<p>Test Paragraph.</p>

  p { color:blue; margin:8px; }
Timestamp: 2008-07-03T01:28:53Z, Build date: 06-09-2008 13:41


Function: val

Reference

[Function] val()
Get the content of the value attribute of the first matched element.

Signature
val() → String, Array
Description
In jQuery 1.2, a value is now returned for all elements, including selects. For multiple selects an array of values is returned. For older versions of jQuery use the [http://www.malsup.com/jquery/form/#fields fieldValue function of the Form Plugin]. For selects and checkboxes, see the <a href='Selectors/selected'>:selected</a> and <a href='Selectors/checked'>:checked</a> selectors.
Examples
Example:
Get the single value from a single select and an array of values from a multiple select and display their values.
    function displayVals() {
      var singleValues = $("#single").val();
      var multipleValues = $("#multiple").val() || [];
      $("p").html("<b>Single:</b> " +
                  singleValues +
                  " <b>Multiple:</b> " +
                  multipleValues.join(", "));
    }

    $("select").change(displayVals);
    displayVals();

<p></p>
  <select id="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>

  p { color:red; margin:4px; }
  b { color:blue; }
Example:
Find the value of an input box.
    $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();

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

  p { color:blue; margin:8px; }
Added
1.0
Timestamp: 2008-05-08T05:57:08Z, Build date: 06-09-2008 13:41


Function: val

Reference

[Function] val(val)
Set the value attribute of every matched element.

Signature
val(val) → jQuery
Description
In jQuery 1.2, this is also able to set the value of select elements, but selecting the appropriate options.
Parameters
  • String val : The value to set on the matched element.
Examples
Example:
Set the value of an input box.
    $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });

<div>
    <button>Feed</button>
    <button>the</button>
    <button>Input</button>
  </div>
  <input type="text" value="click a button" />

  button { margin:4px; cursor:pointer; }
  input { margin:4px; color:blue; }
Added
1.0
Timestamp: 2008-05-08T05:57:08Z, Build date: 06-09-2008 13:41


Function: val

Reference

[Function] val(val)
Checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.

Signature
val(val) → jQuery
Parameters
  • Array val : The set of values to check/select.
Examples
Example:
Set a single select and a multiple select .
    $("#single").val("Single2");
    $("#multiple").val(["Multiple2", "Multiple3"]);
    $("input").val(["check1","check2", "radio1" ]);

<select id="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="checkboxname" value="check1"/> check1
  <input type="checkbox" name="checkboxname" value="check2"/> check2
  <input type="radio"  name="r" value="radio1"/> radio1
  <input type="radio"  name="r" value="radio2"/> radio2

  body { color:blue; }
Added
1.2
Timestamp: 2008-05-08T05:57:08Z, Build date: 06-09-2008 13:41


Function: eq

Reference

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

Signature
eq(index) → jQuery
Description
The position of the element in the set of matched elements starts at 0 and goes to length - 1.
Parameters
  • Integer index : The index of the element in the jQuery object.
Examples
Example:
Turn the div with index 2 blue by adding an appropriate class.
    $("div").eq(2).addClass("blue");

<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  div { width:60px; height:60px; margin:10px; float:left;
        border:2px solid blue; }
  .blue { background:blue; }
Added
1.1.2
Timestamp: 2008-05-10T11:13:56Z, Build date: 06-09-2008 13:41


Function: hasClass

Reference

[Function] hasClass(class)
Checks the current selection against a class and returns true, if at least one element of the selection has the given class.

Signature
hasClass(class) → Boolean
Description
This is an alternative to is("." + class).
Parameters
  • String class : The class to match.
Examples
Example:
Check to see if an element has a specific class, and if so, perform an action.
    $("div").click(function(){
      if ( $(this).hasClass("protected") )
        $(this).animate({ left: -10 }, 75)
               .animate({ left: 10 }, 75)
               .animate({ left: -10 }, 75)
               .animate({ left: 10 }, 75)
               .animate({ left: 0 }, 75);
    });

<span></span><div class="protected"></div>
  <span></span><div></div>
  <span></span><div></div>
  <span></span><div class="protected"></div>

  div { width: 80px; height: 80px; background: #abc;
        position: relative; border: 2px solid black;
        margin: 20px 0px; float: left; left:0 }
  div.protected { border-color: red; }
  span { display:block; float:left; width:20px;
         height:20px; }
Added
1.2
Timestamp: 2007-10-23T11:05:26Z, Build date: 06-09-2008 13:41


Function: filter

Reference

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

Signature
filter(expr) → jQuery
Description
This method is used to narrow down the results of a search. Provide a comma-separated list of expressions to apply multiple filters at once.
Parameters
  • Expression expr : An expression to pass into the filter
Examples
Example:
Change the color of all divs then put a border around only some of them.
    $("div").css("background", "#c8ebcc")
            .filter(".middle")
            .css("border-color", "red");

<div></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div></div>

  div { width:60px; height:60px; margin:5px; float:left;
        border:2px white solid;}
Example:
Selects all paragraphs and removes those without a class "selected".
$("p").filter(".selected")
Example:
Selects all paragraphs and removes those that aren't of class "selected" or the first one.
$("p").filter(".selected, :first")
Added
1.0
Timestamp: 2007-10-24T23:35:26Z, Build date: 06-09-2008 13:41


Function: filter

Reference

[Function] filter(fn)
Removes all elements from the set of matched elements that does not match the specified function.

Signature
filter(fn) → jQuery
Description
The function is called with a context equal to the current element (just like <a href='Core/each'>$.each</a>). If the function returns false, then the element is removed - anything else and the element is kept.
Parameters
  • Function fn : A function to pass into the filter <pre>function callback(indexInJQueryObject) { var keepItBoolean = true; this; // dom element return keepItBoolean; } </pre>
Examples
Example:
Change the color of all divs then put a border two specific ones.
    $("div").css("background", "#b4b0da")
            .filter(function (index) {
                  return index == 1 || $(this).attr("id") == "fourth";
                })
            .css("border", "3px double red");

<div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
  <div id="fourth"></div>
  <div id="fifth"></div>
  <div id="sixth"></div>

  div { width:60px; height:60px; margin:5px; float:left;
        border:3px white solid; }
Example:
Remove all elements that have a descendant ol element
 $("p").filter(function(index) {
   return $("ol", this).length == 0;
 });
Added
1.0
Timestamp: 2007-10-24T23:35:26Z, Build date: 06-09-2008 13:41


Function: is

Reference

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

Signature
is(expr) → Boolean
Description
If no element fits, or the expression is not valid, then the response will be 'false'. '''Note''': Only ''simple'' expressions are supported. Complex expressions, such as those containing hierarchy selectors (such as +, ~, and >) will always return 'true'. <a href='Traversing/filter'>filter</a> is used internally, therefore all rules that apply there apply here, as well.
Parameters
  • String expr : The expression with which to filter
Examples
Example:
Shows a few ways is() can be used inside an event handler.
    $("div").one('click', function () {
      if ($(this).is(":first-child")) {
        $("p").text("It's the first div.");
      } else if ($(this).is(".blue,.red")) {
        $("p").text("It's a blue or red div.");
      } else if ($(this).is(":contains('Peter')")) {
        $("p").text("It's Peter!");
      } else {
        $("p").html("It's nothing <em>special</em>.");
      }
      $("p").hide().slideDown("slow");
      $(this).css({"border-style": "inset", cursor:"default"});
    });

<div></div>
  <div class="blue"></div>
  <div></div>
  <div class="red"></div>
  <div><br/><span>Peter</span></div>
  <div class="blue"></div>
  <p>&nbsp;</p>

  div { width:60px; height:60px; margin:5px; float:left;
        border:4px outset; background:green; text-align:center;
        font-weight:bolder; cursor:pointer; }
  .blue { background:blue; }
  .red { background:red; }
  span { color:white; font-size:16px; }
  p { color:red; font-weight:bolder; background:yellow;
      margin:3px; clear:left; display:none; }
Example:
Returns true, because the parent of the input is a form element
    var isFormParent = $("input[@type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);

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

div { color:red; }
Example:
Returns false, because the parent of the input is a p element
    var isFormParent = $("input[@type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);

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

div { color:red; }
Added
1.0
Timestamp: 2008-07-13T21:32:34Z, Build date: 06-09-2008 13:41


Function: map

Reference

[Function] map(callback)
Translate a set of elements in the jQuery object into another set of values in an array (which may, or may not, be elements).

Signature
map(callback) → jQuery
Description
You could use this to build lists of values, attributes, css values - or even perform special, custom, selector transformations. This is provided as a convenience method for using <a href='Utilities/jQuery.map'>$.map()</a>.
Parameters
  • Function callback : The function to execute on each element in the set.
<pre>function callback(index, domElement) {
  var replacement;

  this; // also dom element

  // replacement == null : delete spot
  // replacement == array : insert the elements of the array
  // else replace the spot with replacement
  return replacement;
}
</pre>
Examples
Example:
Build a list of all the values within a form.
    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );

<p><b>Values: </b></p>
  <form>
    <input type="text" name="name" value="John"/>
    <input type="text" name="password" value="password"/>
    <input type="text" name="url" value="http://ejohn.org/"/>
  </form>

  p { color:red; }
Example:
A contrived example to show some functionality.
    var mappedItems = $("li").map(function (index) {
      var replacement = $("<li>").text($(this).text()).get(0);
      if (index == 0) {
        // make the first item all caps
        $(replacement).text($(replacement).text().toUpperCase());
      } else if (index == 1 || index == 3) {
        // delete the second and fourth items
        replacement = null;
      } else if (index == 2) {
        // make two of the third item and add some text
        replacement = [replacement,$("<li>").get(0)];
        $(replacement[0]).append("<b> - A</b>");
        $(replacement[1]).append("Extra <b> - B</b>");
      }

      // replacment will be an dom element, null,
      // or an array of dom elements
      return replacement;
    });
    $("#results").append(mappedItems);

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
  </ul>
  <ul id="results">
  </ul>

  body { font-size:16px; }
  ul { float:left; margin:0 30px; color:blue; }
  #results { color:red; }
Added
1.2
Timestamp: 2007-10-25T03:24:55Z, Build date: 06-09-2008 13:41


Function: not

Reference

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

Signature
not(expr) → jQuery
Parameters
  • String, DOMElement, Array expr : An expression with which to remove matching elements, an element to remove from the set or a set of elements to remove from the jQuery set of matched elements.
Examples
Example:
Adds a border to divs that are not green or blue.
    $("div").not(".green, #blueone")
            .css("border-color", "red");

<div></div>
  <div id="blueone"></div>
  <div></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="gray"></div>
  <div></div>

  div { width:60px; height:60px; margin:10px; float:left;
        background:yellow; border:2px solid white; }
  .green { background:#8f8; }
  .gray { background:#ccc; }
  #blueone { background:#99f; }
Example:
Removes the element with the ID "selected" from the set of all paragraphs.
$("p").not( $("#selected")[0] )
Example:
Removes the element with the ID "selected" from the set of all paragraphs.
$("p").not("#selected")
Example:
Removes all elements that match "div p.selected" from the total set of all paragraphs.
$("p").not($("div p.selected"))
Added
1.0
Timestamp: 2007-10-25T07:32:16Z, Build date: 06-09-2008 13:41


Function: slice

Reference

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

Signature
slice(start, end) → jQuery
Description
Behaves exactly like the built-in Array slice method.
Parameters
  • Integer start : Where to start the subset. The first element is at zero. Can be negative to start from the end of the selection.
  • Integer end : Where to end the subset (does not include the end element itself). If unspecified, ends at the end of the selection.
Examples
Example:
Turns divs yellow based on a random slice.
    function colorEm() {
      var $div = $("div");
      var start = Math.floor(Math.random() *
                             $div.length);
      var end = Math.floor(Math.random() *
                           ($div.length - start)) +
                           start + 1;
      if (end == $div.length) end = undefined;
      $div.css("background", "");
      if (end)
        $div.slice(start, end).css("background", "yellow");
       else
        $div.slice(start).css("background", "yellow");

      $("span").text('$("div").slice(' + start +
                     (end ? ', ' + end : '') +
                     ').css("background", "yellow");');
    }

    $("button").click(colorEm);

<button>Turn slice yellow</button>
  <span>Click the button!</span>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  div { width:40px; height:40px; margin:10px; float:left;
        border:2px solid blue; }
  span { color:red; font-weight:bold; }
  button { margin:5px; }
Example:
Selects all paragraphs, then slices the selection to include only the first element.
$("p").slice(0, 1).wrapInner("<b></b>");
Example:
Selects all paragraphs, then slices the selection to include only the first and second element.
$("p").slice(0, 2).wrapInner("<b></b>");
Example:
Selects all paragraphs, then slices the selection to include only the second element.
$("p").slice(1, 2).wrapInner("<b></b>");
Example:
Selects all paragraphs, then slices the selection to include only the second and third element.
$("p").slice(1).wrapInner("<b></b>");
Example:
Selects all paragraphs, then slices the selection to include only the third element.
$("p").slice(-1).wrapInner("<b></b>");
Added
1.1.4
Timestamp: 2008-08-22T16:15:36Z, Build date: 06-09-2008 13:41


Function: add

Reference

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

Signature
add(expr) → jQuery
Parameters
  • String, DOMElement, Array expr : An expression whose matched elements are added for String, a string of HTML to create on the fly for DOMElement or one or more Elements to add if an Array.
Examples
Example:
Finds all divs and makes a border. Then adds all paragraphs to the jQuery object to set their backgrounds yellow.
    $("div").css("border", "2px solid red")
            .add("p")
            .css("background", "yellow");

<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <p>Added this... (notice no border)</p>

  div { width:60px; height:60px; margin:10px; float:left; }
  p { clear:left; font-weight:bold; font-size:16px;
      color:blue; margin:0 10px; padding:2px; }
Example:
Adds more elements, matched by the given expression, to the set of matched elements.
$("p").add("span").css("background", "yellow");

<p>Hello</p><span>Hello Again</span>
Example:
Adds more elements, created on the fly, to the set of matched elements.
$("p").clone().add("<span>Again</span>").appendTo(document.body);

<p>Hello</p>
Example:
Adds one or more Elements to the set of matched elements.
$("p").add(document.getElementById("a")).css("background", "yellow");

<p>Hello</p><span id="a">Hello Again</span>
Added
1.0
Timestamp: 2007-10-25T23:23:42Z, Build date: 06-09-2008 13:41


Function: children

Reference

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

Signature
children(expr) → jQuery
Description
This set can be filtered with an optional expression that will cause only elements matching the selector to be collected. Also note: while parents() will look at all ancestors, children() will only consider immediate child elements.
Parameters
  • String expr : An expression to filter the child Elements with.
Examples
Example:
Find all children of the clicked element.
    $("#container").click(function (e) {
      $("*").removeClass("hilite");
      var $kids = $(e.target).children();
      var len = $kids.addClass("hilite").length;

      $("#results span:first").text(len);
      $("#results span:last").text(e.target.tagName);

      e.preventDefault();
      return false;
    });

<div id="container">
    <div>
      <p>This <span>is the <em>way</em> we</span>
      write <em>the</em> demo,</p>
    </div>
    <div>
      <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write
      the</button> demo,
    </div>
    <div>
      This <span>the way we <em>write</em> the <em>demo</em> so</span>
      <input type="text" value="early" /> in
    </div>
    <p>
      <span>t</span>he <span>m</span>orning.
      <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
    </p>
  </div>

  body { font-size:16px; font-weight:bolder; }
  div { width:130px; height:82px; margin:10px; float:left;
        border:1px solid blue; padding:4px; }
  #container { width:auto; height:105px; margin:0; float:none;
        border:none; }
  .hilite { border-color:red; }
  #results { display:block; color:red; }
  p { margin:10px; border:1px solid transparent; }
  span { color:blue; border:1px solid transparent; }
  input { width:100px; }
  em { border:1px solid transparent; }
  a { border:1px solid transparent; }
  b { border:1px solid transparent; }
  button { border:1px solid transparent; }
Example:
Find all children of each div.
$("div").children().css("border-bottom", "3px double red");

<p>Hello (this is a paragraph)</p>
  <div><span>Hello Again (this span is a child of the a div)</span></div>
  <p>And <span>Again</span> (in another paragraph)</p>
  <div>And One Last <span>Time</span> (most text directly in a div)</div>

  body { font-size:16px; font-weight:bolder; }
  span { color:blue; }
  p { margin:5px 0; }
Example:
Find all children with a class "selected" of each div.
$("div").children(".selected").css("color", "blue");

<div>
    <span>Hello</span>
    <p class="selected">Hello Again</p>
    <div class="selected">And Again</div>
    <p>And One Last Time</p>
  </div>

  body { font-size:16px; font-weight:bolder; }
  p { margin:5px 0; }
Added
1.0
Timestamp: 2007-11-28T02:34:16Z, Build date: 06-09-2008 13:41


Function: contents

Reference

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

Signature
contents() → jQuery
Examples
Example:
Find all the text nodes inside a paragraph and wrap them with a bold tag.
$("p").contents().not("[nodeType=1]").wrap("<b/>");

<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
Example:
Append some new content into an empty iframe.
$("iframe").contents().find("body").append("I'm in an iframe!");

<iframe src="/index-blank.html" width="300" height="100"></iframe>
Added
1.2
Timestamp: 2007-11-30T10:36:11Z, Build date: 06-09-2008 13:41


Function: find

Reference

[Function] find(expr)
Searches for all elements that match the specified <a href='Selectors'>expression</a>. This method is a good way to find additional descendant elements with which to process.

Signature
find(expr) → jQuery
Description
All searching is done using a <a href='Selectors'>jQuery expression</a>. The expression can be written using CSS 1-3 Selector syntax.
Parameters
  • String expr : An expression to search with.
Examples
Example:
Starts with all paragraphs and searches for descendant span elements, same as $("p span")
$("p").find("span").css('color','red');

<p><span>Hello</span>, how are you?</p>
  <p>Me? I'm <span>good</span>.</p>
Example:
Add spans around each word then add a hover and italicize words with the letter '''t'''.
    var newText = $("p").text().split(" ").join("</span> <span>");
    newText = "<span>" + newText + "</span>";

    $("p").html(newText)
          .find("span")
            .hover(function () { $(this).addClass("hilite"); },
                   function () { $(this).removeClass("hilite"); })
          .end()
          .find(":contains('t')")
            .css({"font-style":"italic", "font-weight":"bolder"});

<p>
    When the day is short
    find that which matters to you
    or stop believing
  </p>

  p { font-size:20px; width:200px; cursor:default;
      color:blue; font-weight:bold; margin:0 10px; }
  .hilite { background:yellow; }
Added
1.0
Timestamp: 2007-10-26T02:35:13Z, Build date: 06-09-2008 13:41


Function: next

Reference

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

Signature
next(expr) → jQuery
Description
next only returns the very next sibling for each element, not all next siblings (see nextAll). You may provide an optional expression to filter the returned set.
Parameters
  • String expr : An expression with which to filter the returned set.
Examples
Example:
Find the very next sibling of each disabled button and change its text "this button is disabled".
$("button[disabled]").next().text("this button is disabled");

<div><button disabled="disabled">First</button> - <span></span></div>
  <div><button>Second</button> - <span></span></div>
  <div><button disabled="disabled">Third</button> - <span></span></div>

  span { color:blue; font-weight:bold; }
  button { width:100px; }
Example:
Find the very next sibling of each paragraph that has a class "selected".
$("p").next(".selected").css("background", "yellow");

<p>Hello</p>
  <p class="selected">Hello Again</p>
  <div><span>And Again</span></div>
Added
1.0
Timestamp: 2007-11-30T05:32:39Z, Build date: 06-09-2008 13:41


Function: nextAll

Reference

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

Signature
nextAll(expr) → jQuery
Description
Use an optional expression to filter the matched set.
Parameters
  • String expr : An expression to filter the next Elements with.
Examples
Example:
Locate all the divs after the first and give them a class.
$("div:first").nextAll().addClass("after");

<div>first</div>
  <div>sibling<div>child</div></div>
  <div>sibling</div>
  <div>sibling</div>

  div { width: 80px; height: 80px; background: #abc;
        border: 2px solid black; margin: 10px; float: left; }
  div.after { border-color: red; }
Example:
Locate all the paragraphs after the second child in the body and give them a class.
    $(":nth-child(1)").nextAll("p").addClass("after");

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

  div, p { width: 60px; height: 60px; background: #abc;
           border: 2px solid black; margin: 10px; float: left; }
  .after { border-color: red; }
Added
1.2
Timestamp: 2008-07-30T22:30:21Z, Build date: 06-09-2008 13:41


Function: parent

Reference

[Function] parent(expr)
Get a set of elements containing the unique parents of the matched set of elements.

Signature
parent(expr) → jQuery
Description
You may use an optional expression to filter the set of parent elements that will match.
Parameters
  • String expr : An expression to filter the parents with.
Examples
Example:
Shows the parent of each element as (parent > child). Check the View Source to see the raw html.
    $("*", document.body).each(function () {
      var parentTag = $(this).parent().get(0).tagName;
      $(this).prepend(document.createTextNode(parentTag + " > "));
    });

<div>div,
    <span>span, </span>
    <b>b </b>
  </div>
  <p>p,
    <span>span,
      <em>em </em>
    </span>
  </p>
  <div>div,
    <strong>strong,
      <span>span, </span>
      <em>em,
        <b>b, </b>
      </em>
    </strong>
    <b>b </b>
  </div>

  div,p { margin:10px; }
Example:
Find the parent element of each paragraph with a class "selected".
$("p").parent(".selected").css("background", "yellow");

<div><p>Hello</p></div>
  <div class="selected"><p>Hello Again</p></div>
Added
1.0
Timestamp: 2007-10-26T06:13:44Z, Build date: 06-09-2008 13:41


Function: parents

Reference

[Function] parents(expr)
Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element). The matched elements can be filtered with an optional expression.

Signature
parents(expr) → jQuery
Parameters
  • String expr : An expression to filter the ancestors with
Examples
Example:
Find all parent elements of each b.
    var parentEls = $("b").parents()
                          .map(function () {
                                return this.tagName;
                              })
                          .get().join(", ");
    $("b").append("<strong>" + parentEls + "</strong>");

<div>
    <p>
      <span>
        <b>My parents are: </b>
      </span>
    </p>
  </div>

  b { color:blue; }
  strong { color:red; }
Example:
Click to find all unique div parent elements of each span.
    function showParents() {
      $("div").css("border-color", "white");
      var len = $("span.selected")
                       .parents("div")
                       .css("border", "2px red solid")
                       .length;
      $("b").text("Unique div parents: " + len);
    }
    $("span").click(function () {
      $(this).toggleClass("selected");
      showParents();
    });

<p>
    <div>
      <div><span>Hello</span></div>
      <span>Hello Again</span>
    </div>
    <div>
      <span>And Hello Again</span>
    </div>
  </p>
  <b>Click Hellos to toggle their parents.</b>

  p, div, span {margin:2px; padding:1px; }
  div { border:2px white solid; }
  span { cursor:pointer; font-size:12px; }
  .selected { color:blue; }
  b { color:red; display:block; font-size:14px; }
Added
1.0
Timestamp: 2008-08-07T19:39:16Z, Build date: 06-09-2008 13:41


Function: prev

Reference

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

Signature
prev(expr) → jQuery
Description
Use an optional expression to filter the matched set. Only the immediately previous sibling is returned, not all previous siblings.
Parameters
  • String expr : An expression to filter the previous Elements with.
Examples
Example:
Find the very previous sibling of each div.
    var $curr = $("#start");
    $curr.css("background", "#f99");
    $("button").click(function () {
      $curr = $curr.prev();
      $("div").css("background", "");
      $curr.css("background", "#f99");
    });

<div></div>
  <div></div>
  <div><span>has child</span></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="start"></div>
  <div></div>
  <p><button>Go to Prev</button></p>

  div { width:40px; height:40px; margin:10px;
        float:left; border:2px blue solid;
        padding:2px; }
  span { font-size:14px; }
  p { clear:left; margin:10px; }
Example:
Find the very previous sibling of each paragraph that has a class "selected".
$("p").prev(".selected").css("background", "yellow");

<div><span>Hello</span></div>
  <p class="selected">Hello Again</p>
  <p>And Again</p>
Added
1.0
Timestamp: 2007-10-26T08:24:19Z, Build date: 06-09-2008 13:41


Function: prevAll

Reference

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

Signature
prevAll(expr) → jQuery
Description
Use an optional expression to filter the matched set.
Parameters
  • String expr : An expression to filter the previous elements with.
Examples
Example:
Locate all the divs in front of the last div and give them a class.
$("div:last").prevAll().addClass("before");

<div></div>
  <div></div>
  <div></div>
  <div></div>

  div { width:70px; height:70px; background:#abc;
        border:2px solid black; margin:10px; float:left; }
  div.before { border-color: red; }
Added
1.2
Timestamp: 2008-07-09T18:52:38Z, Build date: 06-09-2008 13:41


Function: siblings

Reference

[Function] siblings(expr)
Get a set of elements containing all of the unique siblings of each of the matched set of elements. Can be filtered with an optional expressions.

Signature
siblings(expr) → jQuery
Parameters
  • String expr : An expression to filter the sibling Elements with
Examples
Example:
Find the unique siblings of all yellow li elements in the 3 lists (including other yellow li elements if appropriate).
    var len = $(".hilite").siblings()
                          .css("color", "red")
                          .length;
    $("b").text(len);

<ul>
    <li>One</li>
    <li>Two</li>
    <li class="hilite">Three</li>
    <li>Four</li>
  </ul>
  <ul>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
  </ul>
  <ul>
    <li>Eight</li>
    <li class="hilite">Nine</li>
    <li>Ten</li>
    <li class="hilite">Eleven</li>
  </ul>
  <p>Unique siblings: <b></b></p>

  ul { float:left; margin:5px; font-size:16px; font-weight:bold; }
  p { color:blue; margin:10px 20px; font-size:16px; padding:5px;
      font-weight:bolder; }
  .hilite { background:yellow; }
Example:
Find all siblings with a class "selected" of each div.
$("p").siblings(".selected").css("background", "yellow");

<div><span>Hello</span></div>
  <p class="selected">Hello Again</p>
  <p>And Again</p>
Added
1.0
Timestamp: 2007-10-26T09:21:57Z, Build date: 06-09-2008 13:41


Function: andSelf

Reference

[Function] andSelf()
Add the previous selection to the current selection.

Signature
andSelf() → jQuery
Description
Useful for traversing elements, and then adding something that was matched before the last traversal.
Examples
Example:
Find all divs, and all the paragraphs inside of them, and give them both classnames. Notice the div doesn't have the yellow background color since it didn't use andSelf().
    $("div").find("p").andSelf().addClass("border");
    $("div").find("p").addClass("background");

<div>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>

  p, div { margin:5px; padding:5px; }
  .border { border: 2px solid red; }
  .background { background:yellow; }
Added
1.2
Timestamp: 2008-08-28T21:37:29Z, Build date: 06-09-2008 13:41


Function: end

Reference

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

Signature
end() → jQuery
Description
If there was no destructive operation before, an empty set is returned. A 'destructive' operation is any operation that changes the set of matched jQuery elements, which means any Traversing function that returns a jQuery object - including <a href='Traversing/add'>add</a>, <a href='Traversing/andSelf'>andSelf</a>, <a href='Traversing/children'>children</a>, <a href='Traversing/filter'>filter</a>, <a href='Traversing/find'>find</a>, <a href='Traversing/map'>map</a>, <a href='Traversing/next'>next</a>, <a href='Traversing/nextAll'>nextAll</a>, <a href='Traversing/not'>not</a>, <a href='Traversing/parent'>parent</a>, <a href='Traversing/parents'>parents</a>, <a href='Traversing/prev'>prev</a>, <a href='Traversing/prevAll'>prevAll</a>, <a href='Traversing/siblings'>siblings</a> and <a href='Traversing/slice'>slice</a> - plus the <a href='Manipulation/clone'>clone</a> function (from Manipulation).
Examples
Example:
Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.
    jQuery.fn.showTags = function (n) {
      var tags = this.map(function () {
                              return this.tagName;
                            })
                        .get().join(", ");
      $("b:eq(" + n + ")").text(tags);
      return this;
    };

    $("p").showTags(0)
          .find("span")
          .showTags(1)
          .css("background", "yellow")
          .end()
          .showTags(2)
          .css("font-style", "italic");

<p>
    Hi there <span>how</span> are you <span>doing</span>?
  </p>
  <p>
    This <span>span</span> is one of
    several <span>spans</span> in this
    <span>sentence</span>.
  </p>
  <div>
    Tags in jQuery object initially: <b></b>
  </div>
  <div>
    Tags in jQuery object after find: <b></b>
  </div>
  <div>
    Tags in jQuery object after end: <b></b>
  </div>

  p, div { margin:1px; padding:1px; font-weight:bold;
           font-size:16px; }
  div { color:blue; }
  b { color:red; }
Example:
Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.
$("p").find("span").end().css("border", "2px red solid");

<p><span>Hello</span>, how are you?</p>

p { margin:10px; padding:10px; }
Added
1.0
Timestamp: 2007-10-26T10:50:16Z, Build date: 06-09-2008 13:41


Function: append

Reference

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

Signature
append(content) → jQuery
Description
This operation is similar to doing an appendChild to all the specified elements, adding them into the document.
Parameters
  • String, Element, jQuery content : Content to append to the target.
Examples
Example:
Appends some HTML to all paragraphs.
$("p").append("<b>Hello</b>");

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

p { background:yellow; }
Example:
Appends an Element to all paragraphs.
$("p").append(document.createTextNode("Hello"));

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

p { background:yellow; }
Example:
Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.
$("p").append( $("b") );

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

p { background:yellow; }
Added
1.0
Timestamp: 2007-10-26T11:35:40Z, Build date: 06-09-2008 13:41


Function: appendTo

Reference

[Function] appendTo(content)
Append all of the matched elements to another, specified, set of elements.

Signature
appendTo(content) → jQuery
Description
This operation is, essentially, the reverse of doing a regular $(A).append(B), in that instead of appending B to A, you're appending A to B.
Parameters
  • String content : target to which the content will be appended.
Examples
Example:
Appends all spans to the element with the ID "foo"
$("span").appendTo("#foo"); // check append() examples

<span>I have nothing more to say... </span>
  <div id="foo">FOO! </div>

#foo { background:yellow; }
Added
1.0
Timestamp: 2007-10-26T11:57:38Z, Build date: 06-09-2008 13:41


Function: prepend

Reference

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

Signature
prepend(content) → jQuery
Description
This operation is the best way to insert elements inside, at the beginning, of all matched elements.
Parameters
  • String, Element, jQuery content : Content to prepend to the target.
Examples
Example:
Prepends some HTML to all paragraphs.
$("p").prepend("<b>Hello </b>");

<p>there friend!</p>
  <p>amigo!</p>

p { background:yellow; }
Example:
Prepends a DOM Element to all paragraphs.
$("p").prepend(document.createTextNode("Hello "));

<p>is what I'd say</p>
  <p>is what I said</p>

p { background:yellow; }
Example:
Prepends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.
$("p").prepend( $("b") );

<p> is what was said.</p><b>Hello</b>

p { background:yellow; }
Added
1.0
Timestamp: 2007-10-26T12:07:02Z, Build date: 06-09-2008 13:41


Function: prependTo

Reference

[Function] prependTo(content)
Prepend all of the matched elements to another, specified, set of elements.

Signature
prependTo(content) → jQuery
Description
This operation is, essentially, the reverse of doing a regular $(A).prepend(B), in that instead of prepending B to A, you're prepending A to B.
Parameters
  • String content : target to which the content will be prepended.
Examples
Example:
Prepends all spans to the element with the ID "foo"
$("span").prependTo("#foo"); // check prepend() examples

<div id="foo">FOO!</div>
  <span>I have something to say... </span>

div { background:yellow; }
Added
1.0
Timestamp: 2007-10-26T12:00:39Z, Build date: 06-09-2008 13:41


Function: after

Reference

[Function] after(content)
Insert content after each of the matched elements.

Signature
after(content) → jQuery
Parameters
  • String, Element, jQuery content : Content to insert after each target.
Examples
Example:
Inserts some HTML after all paragraphs.
$("p").after("<b>Hello</b>");

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

p { background:yellow; }
Example:
Inserts a DOM element after all paragraphs.
$("p").after( document.createTextNode("Hello") );

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

p { background:yellow; }
Example:
Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.
$("p").after( $("b") );

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

p { background:yellow; }
Added
1.0
Timestamp: 2008-05-22T20:56:00Z, Build date: 06-09-2008 13:41


Function: before

Reference

[Function] before(content)
Insert content before each of the matched elements.

Signature
before(content) → jQuery
Parameters
  • String, Element, jQuery content : Content to insert before each target.
Examples
Example:
Inserts some HTML before all paragraphs.
$("p").before("<b>Hello</b>");

<p> is what I said...</p>

p { background:yellow; }
Example:
Inserts a DOM element before all paragraphs.
$("p").before( document.createTextNode("Hello") );

<p> is what I said...</p>

p { background:yellow; }
Example:
Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.
$("p").before( $("b") );

<p> is what I said...</p><b>Hello</b>

p { background:yellow; }
Added
1.0
Timestamp: 2007-10-27T02:02:04Z, Build date: 06-09-2008 13:41


Function: insertAfter

Reference

[Function] insertAfter(content)
Insert all of the matched elements after another, specified, set of elements.

Signature
insertAfter(content) → jQuery
Description
This operation is, essentially, the reverse of doing a regular $(A).after(B), in that instead of inserting B after A, you're inserting A after B.
Parameters
  • String content : Content after which the selected element(s) is inserted.
Examples
Example:
Inserts all paragraphs after an element with id of "foo". Same as $("#foo").after("p")
$("p").insertAfter("#foo"); // check after() examples

<p> is what I said... </p><div id="foo">FOO!</div>

#foo { background:yellow; }
Added
1.0
Timestamp: 2007-10-27T02:13:19Z, Build date: 06-09-2008 13:41


Function: insertBefore

Reference

[Function] insertBefore(content)
Insert all of the matched elements before another, specified, set of elements.

Signature
insertBefore(content) → jQuery
Description
This operation is, essentially, the reverse of doing a regular $(A).before(B), in that instead of inserting B before A, you're inserting A before B.
Parameters
  • String content : Content after which the selected element(s) is inserted.
Examples
Example:
Inserts all paragraphs before an element with id of "foo". Same as $("#foo").before("p")
$("p").insertBefore("#foo"); // check before() examples

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

#foo { background:yellow; }
Added
1.0
Timestamp: 2007-10-27T02:16:13Z, Build date: 06-09-2008 13:41


Function: wrap

Reference

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

Signature
wrap(html) → jQuery
Description
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document. This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest descendant element within its structure -- it is that element that will enwrap everything else.
Parameters
  • String html : A string of HTML that will be created on the fly and wrapped around each target.
Examples
Example:
Wrap a new div around all of the paragraphs.
$("p").wrap("<div></div>");

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>

  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
Example:
Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the <strong> (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.
$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");

<span>Span Text</span>
  <strong>What about me?</strong>
  <span>Another One</span>

  div { border:2px blue solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  strong { color:red; }
Timestamp: 2008-06-29T23:40:25Z, Build date: 06-09-2008 13:41


Function: wrap

Reference

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

Signature
wrap(elem) → jQuery
Parameters
  • Element elem : A DOM element that will be wrapped around each target.
Examples
Example:
Wrap a new div around all of the paragraphs.
$("p").wrap(document.createElement("div"));

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>

  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
Example:
Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn't move the object but just clones it to wrap around its target.
$("p").wrap($(".doublediv"));

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div class="doublediv"><div></div></div>

  div { border: 2px solid blue; margin:2px; padding:2px; }
  .doublediv { border-color:red; }
  p { background:yellow; margin:4px; font-size:14px; }
Added
1.0
Timestamp: 2008-06-29T23:40:25Z, Build date: 06-09-2008 13:41


Function: wrapAll

Reference

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

Signature
wrapAll(html) → jQuery
Description
This is different from <a href='Manipulation/wrap'>.wrap()</a> where each element in the matched set would get wrapped with an element. This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document. This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest descendant element within its structure -- it is that element that will enwrap everything else.
Parameters
  • String html : A string of HTML that will be created on the fly and wrapped around the target.
Examples
Example:
Wrap a new div around all of the paragraphs.
$("p").wrapAll("<div></div>");

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>

  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
Example:
Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the <strong> (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.
$("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");

<span>Span Text</span>
  <strong>What about me?</strong>
  <span>Another One</span>

  div { border:2px blue solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  strong { color:red; }
Added
1.2
Timestamp: 2008-06-29T23:36:34Z, Build date: 06-09-2008 13:41


Function: wrapAll

Reference

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

Signature
wrapAll(elem) → jQuery
Description
This is different from <a href='Manipulation/wrap'>.wrap()</a> where each element in the matched set would get wrapped with an element.
Parameters
  • Element elem : A DOM element that will be wrapped around the target.
Examples
Example:
Wrap a new div around all of the paragraphs.
$("p").wrapAll(document.createElement("div"));

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>

  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
Example:
Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn't move the object but just clones it to wrap around its target.
$("p").wrapAll($(".doublediv"));

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div class="doublediv"><div></div></div>

  div { border: 2px solid blue; margin:2px; padding:2px; }
  .doublediv { border-color:red; }
  p { background:yellow; margin:4px; font-size:14px; }
Added
1.2
Timestamp: 2008-06-29T23:36:34Z, Build date: 06-09-2008 13:41


Function: wrapInner

Reference

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

Signature
wrapInner(html) → jQuery
Description
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document. This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.
Parameters
  • String html : A string of HTML that will be created on the fly and wrapped around the target.
Examples
Example:
Selects all paragraphs and wraps a bold tag around each of its contents.
$("p").wrapInner("<b></b>");

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>

p { background:#bbf; }
Example:
Wraps a newly created tree of objects around the inside of the body.
$("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");

Plain old text, or is it?

  div { border:2px green solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
Added
1.2
Timestamp: 2007-10-27T04:43:16Z, Build date: 06-09-2008 13:41


Function: wrapInner

Reference

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

Signature
wrapInner(elem) → jQuery
Parameters
  • Element elem : A DOM element that will be wrapped around the target.
Examples
Example:
Selects all paragraphs and wraps a bold tag around each of its contents.
$("p").wrapInner(document.createElement("b"));

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>

p { background:#9f9; }
Example:
Selects all paragraphs and wraps a jQuery object around each of its contents.
$("p").wrapInner($("<span class='red'></span>"));

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>

  p { background:#9f9; }
  .red { color:red; }
Added
1.2
Timestamp: 2007-10-27T04:43:16Z, Build date: 06-09-2008 13:41


Function: replaceWith

Reference

[Function] 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.

Signature
replaceWith(content) → jQuery
Parameters
  • String, Element, jQuery content : Content to replace the matched elements with.
Examples
Example:
On click, replace the button with a div containing the same word.
    $("button").click(function () {
      $(this).replaceWith("<div>" + $(this).text() + "</div>");
    });

<button>First</button>
  <button>Second</button>
  <button>Third</button>

  button { display:block; margin:3px; color:red; width:200px; }
  div { color:red; border:2px solid blue; width:200px;
        margin:3px; text-align:center; }
Example:
Replace all the paragraphs with bold words.
$("p").replaceWith("<b>Paragraph. </b>");

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>
Example:
Replace all the paragraphs with empty div elements.
$("p").replaceWith(document.createElement("div"));

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>

  div { border:2px solid blue; margin:3px; }
Example:
On click, replace each paragraph with a jQuery div object that is already in the DOM. Notice it doesn't clone the object but rather moves it to replace the paragraph.
    $("p").click(function () {
      $(this).replaceWith($("div"));
    });

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div>Replaced!</div>

  div { border:2px solid blue; color:red; margin:3px; }
  p { border:2px solid red; color:blue; margin:3px; cursor:pointer; }
Added
1.2
Timestamp: 2008-06-04T02:04:51Z, Build date: 06-09-2008 13:41


Function: replaceAll

Reference

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

Signature
replaceAll(selector) → jQuery
Description
This function is the complement to replaceWith() which does the same task with the parameters reversed.
Parameters
  • Selector selector : The elements to find and replace the matched elements with.
Examples
Example:
Replace all the paragraphs with bold words.
$("<b>Paragraph. </b>").replaceAll("p"); // check replaceWith() examples

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>
Added
1.2
Timestamp: 2007-10-30T02:37:23Z, Build date: 06-09-2008 13:41


Function: empty

Reference

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

Signature
empty() → jQuery
Description
Note that this function starting with 1.2.2 will also remove all event handlers and internally cached data.
Examples
Example:
Removes all child nodes (including text nodes) from all paragraphs
    $("button").click(function () {
      $("p").empty();
    });

<p>
    Hello, <span>Person</span> <a href="javascript:;">and person</a>
  </p>
  <button>Call empty() on above paragraph</button>

  p { background:yellow; }
Added
1.0
Timestamp: 2007-10-30T02:46:40Z, Build date: 06-09-2008 13:41


Function: remove

Reference

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

Signature
remove(expr) → jQuery
Description
This does NOT remove them from the jQuery object, allowing you to use the matched elements further. Note that this function starting with 1.2.2 will also remove all event handlers and internally cached data. So: <code> $("#foo").remove().appendTo("#bar"); </code> should be written as <code> $("#foo").appendTo("#bar"); </code> to avoid losing the event handlers. Can be filtered with an optional expression.
Parameters
  • String expr : A jQuery expression to filter the set of elements to be removed.
Examples
Example:
Removes all paragraphs from the DOM
    $("button").click(function () {
      $("p").remove();
    });

<p>Hello</p>
  how are
  <p>you?</p>
  <button>Call remove() on paragraphs

p { background:yellow; margin:6px 0; }
Example:
Removes all paragraphs that contain "Hello" from the DOM
    $("button").click(function () {
      $("p").remove(":contains('Hello')");
    });

<p class="hello">Hello</p>
  how are
  <p>you?</p>
  <button>Call remove(":contains('Hello')") on paragraphs

p { background:yellow; margin:6px 0; }
Added
1.0
Timestamp: 2007-10-30T02:59:21Z, Build date: 06-09-2008 13:41


Function: clone

Reference

[Function] clone()
Clone matched DOM Elements and select the clones.

Signature
clone() → jQuery
Description
This is useful for moving copies of the elements to another location in the DOM.
Examples
Example:
Clones all b elements (and selects the clones) and prepends them to all paragraphs.
$("b").clone().prependTo("p");

<b>Hello</b><p>, how are you?</p>
Added
1.0
Timestamp: 2007-10-30T03:04:20Z, Build date: 06-09-2008 13:41


Function: clone

Reference

[Function] clone(true)
Clone matched DOM Elements, and all their event handlers, and select the clones.

Signature
clone(true) → jQuery
Description
This is useful for moving copies of the elements, and their events, to another location in the DOM.
Parameters
  • Boolean true : Set to true to enable cloning of event handlers.
Examples
Example:
Create a button that's able to clone itself - and have the clones themselves be clonable.
    $("button").click(function(){
      $(this).clone(true).insertAfter(this);
    });

<button>Clone Me!</button>
Added
1.0
Timestamp: 2007-10-30T03:04:20Z, Build date: 06-09-2008 13:41


Function: css

Reference

[Function] css(name)
Return a style property on the first matched element.

Signature
css(name) → String
Parameters
  • String name : The name of the property to access.
Examples
Example:
To access the background color of a clicked div.
    $("div").click(function () {
      var color = $(this).css("background-color");
      $("#result").html("That div is <span style='color:" +
                         color + ";'>" + color + "</span>.");
    });

<span id="result">&nbsp;</span>
  <div style="background-color:blue;"></div>
  <div style="background-color:rgb(15,99,30);"></div>
  <div style="background-color:#123456;"></div>
  <div style="background-color:#f11;"></div>

  div { width:60px; height:60px; margin:5px; float:left; }
Added
1.0
Timestamp: 2008-04-17T04:15:29Z, Build date: 06-09-2008 13:41


Function: css

Reference

[Function] css(properties)
Set a key/value object as style properties to all matched elements.

Signature
css(properties) → jQuery
Description
This is the best way to set several style properties on all matched elements.
Parameters
  • Map properties : Key/value pairs to set as style properties.
Examples
Example:
To set the color of all paragraphs to red and background to blue:
    $("p").hover(function () {
      $(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });
    }, function () {
      var cssObj = {
        backgroundColor: "#ddd",
        fontWeight: "",
        color: "rgb(0,40,244)"
      }
      $(this).css(cssObj);
    });

<p>
    Move the mouse over a paragraph.
  </p>
  <p>
    Like this one or the one above.
  </p>

  p { color:green; }
Example:
If the property name includes a "-", put it between quotation marks:
    $("p").hover(function () {
      $(this).css({ "background-color":"yellow", "font-weight":"bolder" });
    }, function () {
      var cssObj = {
        "background-color": "#ddd",
        "font-weight": "",
        color: "rgb(0,40,244)"
      }
      $(this).css(cssObj);
    });

<p>
    Move the mouse over a paragraph.
  </p>
  <p>
    Like this one or the one above.
  </p>

  p { color:green; }
Added
1.0
Timestamp: 2008-04-17T04:15:29Z, Build date: 06-09-2008 13:41


Function: css

Reference

[Function] css(name, value)
Set a single style property to a value on all matched elements.

Signature
css(name, value) → jQuery
Description
If a number is provided, it is automatically converted into a pixel value.
Parameters
  • String name : The name of the property to set.
  • String, Number value : The value to set the property to.
Examples
Example:
To change the color of any paragraph to red on mouseover event.
    $("p").mouseover(function () {
      $(this).css("color","red");
    });

<p>
    Just roll the mouse over me.
  </p>
  <p>
    Or me to see a color change.
  </p>

  p { color:blue; width:200px; font-size:14px; }
Example:
To highlight a clicked word in the paragraph.
    var words = $("p:first").text().split(" ");
    var text = words.join("</span> <span>");
    $("p:first").html("<span>" + text + "</span>");
    $("span").click(function () {
      $(this).css("background-color","yellow");
    });

<p>
    Once upon a time there was a man
    who lived in a pizza parlor. This
    man just loved pizza and ate it all
    the time.  He went on to be the
    happiest man in the world.  The end.
  </p>

  p { color:blue; font-weight:bold; cursor:pointer; }
Added
1.0
Timestamp: 2008-04-17T04:15:29Z, Build date: 06-09-2008 13:41


Function: offset

Reference

[Function] offset()
Get the current offset of the first matched element relative to the viewport.

Signature
offset() → Object{top,left}
Description
The returned object contains two <a href='Types#Integer'>Integer</a> properties, top and left. The method works only with visible elements.
Examples
Example:
Access the offset of the second paragraph:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

<p>Hello</p><p>2nd Paragraph</p>

  p { margin-left:10px; }
Example:
Click to see the offset.
    $("*", document.body).click(function (e) {
      var offset = $(this).offset();
      e.stopPropagation();
      $("#result").text(this.tagName + " coords ( " + offset.left + ", " +
                                      offset.top + " )");
    });

<div id="result">Click an element.</div>
  <p>
    This is the best way to <span>find</span> an offset.
  </p>
  <div class="abs">
  </dov>

  p { margin-left:10px; color:blue; width:200px;
      cursor:pointer; }
  span { color:red; cursor:pointer; }
  div.abs { width:50px; height:50px; position:absolute;
            left:220px; top:35px; background-color:green;
            cursor:pointer; }
Added
1.2
Timestamp: 2007-10-12T01:39:17Z, Build date: 06-09-2008 13:41


Function: height

Reference

[Function] height()
Get the current computed, pixel, height of the first matched element.

Signature
height() → Integer
Description
In jQuery 1.2, this method is able to find the height of the window and document.
Examples
Example:
Show various heights. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.
    function showHeight(ele, h) {
      $("div").text("The height for the " + ele +
                    " is " + h + "px.");
    }
    $("#getp").click(function () {
      showHeight("paragraph", $("p").height());
    });
    $("#getd").click(function () {
      showHeight("document", $(document).height());
    });
    $("#getw").click(function () {
      showHeight("window", $(window).height());
    });

<button id="getp">Get Paragraph Height</button>
  <button id="getd">Get Document Height</button>
  <button id="getw">Get Window Height</button>
  <div>&nbsp;</div>
  <p>
    Sample paragraph to test height
  </p>

  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold; }
Added
1.0
Timestamp: 2008-04-17T04:14:38Z, Build date: 06-09-2008 13:41


Function: height

Reference

[Function] height(val)
Set the CSS height of every matched element.

Signature
height(val) → jQuery
Description
If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.
Parameters
  • String, Number val : Set the CSS 'height' property to the specified value.
Examples
Example:
To set the height of each div on click to 30px plus a color change.
    $("div").one('click', function () {
      $(this).height(30)
             .css({cursor:"auto", backgroundColor:"green"});
    });

<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }
Added
1.0
Timestamp: 2008-04-17T04:14:38Z, Build date: 06-09-2008 13:41


Function: width

Reference

[Function] width()
Get the current computed, pixel, width of the first matched element.

Signature
width() → Integer
Description
In jQuery 1.2, this method is able to find the width of the window and document.
Examples
Example:
Show various widths. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.
    function showWidth(ele, w) {
      $("div").text("The width for the " + ele +
                    " is " + w + "px.");
    }
    $("#getp").click(function () {
      showWidth("paragraph", $("p").width());
    });
    $("#getd").click(function () {
      showWidth("document", $(document).width());
    });
    $("#getw").click(function () {
      showWidth("window", $(window).width());
    });

<button id="getp">Get Paragraph Width</button>
  <button id="getd">Get Document Width</button>
  <button id="getw">Get Window Width</button>
  <div>&nbsp;</div>
  <p>
    Sample paragraph to test width
  </p>

  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold;  }
Added
1.0
Timestamp: 2008-04-08T22:22:30Z, Build date: 06-09-2008 13:41


Function: width

Reference

[Function] width(val)
Set the CSS width of every matched element.

Signature
width(val) → jQuery
Description
If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.
Parameters
  • String, Number val : Set the CSS 'width' property to the specified value.
Examples
Example:
To set the width of each div on click to 30px plus a color change.
    $("div").one('click', function () {
      $(this).width(30)
             .css({cursor:"auto", "background-color":"blue"});
    });

<div></div>
  <div>d</div>
  <div>d</div>
  <div>d</div>
  <div>d</div>

  div { width:70px; height:50px; float:left; margin:5px;
        background:red; cursor:pointer; }
Added
1.0
Timestamp: 2008-04-08T22:22:30Z, Build date: 06-09-2008 13:41


Function: outerHeight

Reference

[Function] outerHeight(options)
Get the outer height (includes the border and padding by default) for the first matched element.

Signature
outerHeight(options) → Integer
Description
This method works for both visible and hidden elements. The margin can be included by passing an options map with margin set to true.
Parameters
  • Options options : A set of key/value pairs that configure the outerHeight method. All options are optional.
Timestamp: 2008-08-16T11:11:47Z, Build date: 06-09-2008 13:41


Function: outerWidth

Reference

[Function] outerWidth(options)
Get the outer width (includes the border and padding by default) for the first matched element.

Signature
outerWidth(options) → Integer
Description
This method works for both visible and hidden elements. The margin can be included by passing an options map with margin set to true.
Parameters
  • Options options : A set of key/value pairs that configure the outerWidth method. All options are optional.
Timestamp: 2008-08-16T09:56:04Z, Build date: 06-09-2008 13:41


Function: ready

Reference

[Function] ready(fn)
Binds a function to be executed whenever the DOM is ready to be traversed and manipulated.

Signature
ready(fn) → jQuery
Description
<p>This is probably the most important function included in the event module, as it can greatly improve the response times of your web applications.</p><p>In a nutshell, this is a solid replacement for using window.onload, and attaching a function to that. By using this method, your bound function will be called the instant the DOM is ready to be read and manipulated, which is when what 99.99% of all JavaScript code needs to run.</p><p>There is one argument passed to the ready event handler: A reference to the jQuery function. You can name that argument whatever you like, and can therefore stick with the $ alias without risk of naming collisions.</p><p>Please ensure you have no code in your <body> onload event handler, otherwise $(document).ready() may not fire.</p><p>You can have as many $(document).ready events on your page as you like. The functions are then executed in the order they were added.</p>
Parameters
  • Function fn : The function to be executed when the DOM is ready. <pre>function callback(jQueryReference) { this; // document } </pre>
Examples
Example:
Display a message when the DOM is loaded.
$(document).ready(function () {
    $("p").text("The DOM is now loaded and can be manipulated.");
});

<p>
  </p>

p { color:red; }
Example:
To run code when the DOM loads, write:
$(document).ready(function(){
  // Your code here...
});
Example:
To use both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias, write:
jQuery(function($) {
  // Your code using failsafe $ alias here...
});
Example:
Commonly written as:
$(function() {
  // Your code here...
});
Timestamp: 2008-08-18T21:57:58Z, Build date: 06-09-2008 13:41


Function: bind

Reference

[Function] bind(type, data, fn)
Binds a handler to one or more events (like click) for each matched element. Can also bind custom events.

Signature
bind(type, data, fn) → jQuery
Description
'''Possible event values:''' <code>blur</code>, <code>focus</code>, <code>load</code>, <code>resize</code>, <code>scroll</code>, <code>unload</code>, <code>click</code>, <code>dblclick</code>, <code> mousedown</code>, <code>mouseup</code>, <code>mousemove</code>, <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code>, <code>mouseleave</code>, <code>change</code>, <code>select</code>, <code> submit</code>, <code>keydown</code>, <code>keypress</code>, <code>keyup</code>, <code>error</code> The event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler has to return false. Note that this will prevent handlers on parent elements from running but not other jQuery handlers on the same element. In most cases, you can define your event handlers as anonymous functions (see first example). In cases where that is not possible, you can pass additional data as the second parameter (and the handler function as the third), see second example.
Parameters
  • String type : One or more event types separated by a space
  • Object data : Additional data passed to the event handler as event.data
  • Function fn : A function to bind to the event on each of the set of matched elements <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
Handle click and double-click for the paragraph. Note: the coordinates are window relative so in this case relative to the demo iframe.
    $("p").bind("click", function(e){
      var str = "( " + e.pageX + ", " + e.pageY + " )";
      $("span").text("Click happened! " + str);
    });
    $("p").bind("dblclick", function(){
      $("span").text("Double-click happened in " + this.tagName);
    });
    $("p").bind("mouseenter mouseleave", function(e){
        $(this).toggleClass("over");
    });

<p>Click or double click here.</p>
  <span></span>

  p { background:yellow; font-weight:bold; cursor:pointer;
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
Example:
To display each paragraph's text in an alert box whenever it is clicked:
$("p").bind("click", function(){
  alert( $(this).text() );
});
Example:
You can pass some extra data before the event handler:
function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
Example:
To cancel a default action and prevent it from bubbling up, return false:
$("form").bind("submit", function() { return false; })
Example:
To cancel only the default action by using the preventDefault method.
$("form").bind("submit", function(event){
  event.preventDefault();
});
Example:
Stop only an event from bubbling by using the stopPropagation method.
$("form").bind("submit", function(event){
  event.stopPropagation();
});
Example:
Can bind custom events too.
    $("p").bind("myCustomEvent", function(e, myName, myValue){
      $(this).text(myName + ", hi there!");
      $("span").stop().css("opacity", 1)
               .text("myName = " + myName)
               .fadeIn(30).fadeOut(1000);
    });
    $("button").click(function () {
      $("p").trigger("myCustomEvent", [ "John" ]);
    });

<p>Has an attached custom event.</p>
  <button>Trigger custom event</button>
  <span style="display:none;"></span>

  p { color:red; }
  span { color:blue; }
Added
1.0
Timestamp: 2008-04-03T00:18:29Z, Build date: 06-09-2008 13:41


Function: one

Reference

[Function] one(type, data, fn)
Binds a handler to one or more events to be executed <i>once</i> for each matched element.

Signature
one(type, data, fn) → jQuery
Description
<p>The handler is executed only once for each element. Otherwise, the same rules as described in <a href='Events/bind'>bind</a>() apply. The event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler should return false.</p><p>In most cases, you can define your event handlers as anonymous functions (see first example). In cases where that is not possible, you can pass additional data as the second paramter (and the handler function as the third), see second example.</p>
Parameters
  • String type : An event type
  • Object data : Additional data passed to the event handler as event.data
  • Function fn : A function to bind to the specified event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
Tie a one-time click to each div.
    var n = 0;
    $("div").one("click", function(){
      var index = $("div").index(this);
      $(this).css({ borderStyle:"inset",
                    cursor:"auto" });
      $("p").text("Div at index #" + index + " clicked." +
                  "  That's " + ++n + " total clicks.");
    });

<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <p>Click a green square...</p>

  div { width:60px; height:60px; margin:5px; float:left;
        background:green; border:10px outset;
        cursor:pointer; }
  p { color:red; margin:0; clear:left; }
Example:
To display the text of all paragraphs in an alert box the first time each of them is clicked:
$("p").one("click", function(){
  alert( $(this).text() );
});
Timestamp: 2008-03-02T01:08:57Z, Build date: 06-09-2008 13:41


Function: trigger

Reference

[Function] trigger(type , data )
Trigger a type of event on every matched element.

Signature
trigger(type , data ) → jQuery
Description
<p>This will also cause the default action of the browser with the same name (if one exists) to be executed. For example, passing 'submit' to the trigger() function will also cause the browser to submit the form. This default action can be prevented by returning false from one of the functions bound to the event.</p><p>If a native event is triggered and a suitable event object is not passed as the first element of 'data', then a fake event object is added before all supplied 'data' arguments. This element contains appropriate 'type' and 'target' fields and null-op 'preventDefault' and 'stopPropagation' methods, but none of the clientXY/pageXY/keyCode fields specific to mouse and keyboard events. A "suitable" event object is judged by the presence of the 'preventDefault' field.</p><p>You can also trigger custom events registered with bind.</p><p>You can add a '''!''' in event type to trigger events without namespace.</p>
Parameters
  • String type : An event type to trigger.
  • Array data : Additional data to pass as arguments (after the event object) to the event handler.
Examples
Example:
Clicks to button #2 also trigger a click for button #1.
    $("button:first").click(function () {
      update($("span:first"));
    });
    $("button:last").click(function () {
      $("button:first").trigger('click');

      update($("span:last"));
    });

    function update(j) {
      var n = parseInt(j.text(), 0);
      j.text(n + 1);
    }

<button>Button #1</button>
  <button>Button #2</button>
  <div><span>0</span> button #1 clicks.</div>
  <div><span>0</span> button #2 clicks.</div>

  button { margin:10px; }
  div { color:blue; font-weight:bold; }
  span { color:red; }
Example:
To submit the first form without using the submit() function, try:
$("form:first").trigger("submit")
Example:
To pass arbitrary data to an event:
$("p").click( function (event, a, b) {
  // when a normal click fires, a and b are undefined
  // for a trigger like below a refers too "foo" and b refers to "bar"
} ).trigger("click", ["foo", "bar"]);
Example:
This would display a "Hello World!" alert box.
$("p").bind("myEvent", function (event, message1, message2) {
  alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
Timestamp: 2008-08-18T17:18:56Z, Build date: 06-09-2008 13:41


Function: triggerHandler

Reference

[Function] triggerHandler(type , data )
This particular method triggers all bound event handlers on an element (for a specific event type) WITHOUT executing the browsers default actions.

Signature
triggerHandler(type , data ) → jQuery
Description
The event is only triggered on the first element within the JQuery collection. This method returns the return value of the triggered handler instead of a chainable JQuery object. Also, if the JQuery collection is empty, this method returns 'undefined' instead of an empty JQuery collection.
Parameters
  • String type : An event type to trigger.
  • Array data : Additional data to pass as arguments (after the event object) to the event handler.
Examples
Example:
If you called .triggerHandler() on a focus event - the browsers default focus action would not be triggered, only the event handlers bound to the focus event.
    $("#old").click(function(){
      $("input").trigger("focus");
    });
    $("#new").click(function(){
      $("input").triggerHandler("focus");
    });
    $("input").focus(function(){
      $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
    });

<button id="old">.trigger("focus")</button>
  <button id="new">.triggerHandler("focus")</button><br/><br/>
  <input type="text" value="To Be Focused"/>
Timestamp: 2008-06-08T05:54:23Z, Build date: 06-09-2008 13:41


Function: unbind

Reference

[Function] unbind(type , data )
This does the opposite of bind, it removes bound events from each of the matched elements.

Signature
unbind(type , data ) → jQuery
Description
<p>Without any arguments, all bound events are removed.</p><p>You can also unbind custom events registered with bind.</p><p>If the type is provided, all bound events of that type are removed.</p><p>If the function that was passed to bind is provided as the second argument, only that specific event handler is removed.</p>
Parameters
  • String type : An event type to unbind.
  • Function data : A function to unbind from the event on each of the set of matched elements.
Examples
Example:
Can bind and unbind events to the colored button.
    function aClick() {
      $("div").show().fadeOut("slow");
    }
    $("#bind").click(function () {
      // could use .bind('click', aClick) instead but for variety...
      $("#theone").click(aClick)
                  .text("Can Click!");
    });
    $("#unbind").click(function () {
      $("#theone").unbind('click', aClick)
                  .text("Does nothing...");
    });

<button id="theone">Does nothing...</button>
  <button id="bind">Bind Click</button>
  <button id="unbind">Unbind Click</button>
  <div style="display:none;">Click!</div>

  button { margin:5px; }
  button#theone { color:red; background:yellow; }
Example:
To unbind all events from all paragraphs, write:
$("p").unbind()
Example:
To unbind all click events from all paragraphs, write:
$("p").unbind( "click" )
Example:
To unbind just one previously bound handler, pass the function in as the second argument:
var foo = function () {
  // code to handle some kind of event
};

$("p").bind("click", foo); // ... now foo will be called when paragraphs are clicked ...

$("p").unbind("click", foo); // ... foo will no longer be called.
Timestamp: 2007-10-12T00:56:59Z, Build date: 06-09-2008 13:41


Function: hover

Reference

[Function] hover(over, out)
Simulates hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.

Signature
hover(over, out) → jQuery
Description
Whenever the mouse cursor is moved over a matched element, the first specified function is fired. Whenever the mouse moves off of the element, the second specified function fires. Additionally, checks are in place to see if the mouse is still within the specified element itself (for example, an image inside of a div), and if it is, it will continue to 'hover', and not move out (a common error in using a mouseout event handler).
Parameters
  • Function over : The function to fire when the mouse is moved over a matched element. <pre>function callback(eventObject) { this; // dom element } </pre>
  • Function out : The function to fire when the mouse is moved off of a matched element. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
To add a special style to table cells that are being hovered over, try:
    $("li").hover(
      function () {
        $(this).append($("<span> ***</span>"));
      },
      function () {
        $(this).find("span:last").remove();
      }
    );

  //Another example for mouse over effect on hyperlinks on page
   $("a").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li><a href='#'>Chips</a></li>
    <li><a href='#'>Socks</a></li>
  </ul>

  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
Example:
To add a special style to table cells that are being hovered over, try:
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
Example:
To unbind the above example use:
$("td").unbind('mouseenter mouseleave');
Timestamp: 2008-08-14T17:43:54Z, Build date: 06-09-2008 13:41


Function: toggle

Reference

[Function] toggle(fn, fn2, fn3,fn4,...)
Toggle among two or more function calls every other click.

Signature
toggle(fn, fn2, fn3,fn4,...) → jQuery
Description
<p>Whenever a matched element is clicked, the first specified function is fired, when clicked again, the second is fired, and so on. All subsequent clicks continue to rotate through the functions.</p><p>Use unbind("click") to remove the toggle event.</p>
Parameters
  • Function fn : The function to execute. <pre>function callback(eventObject) { this; // dom element } </pre>
  • Function fn2 : The function to execute. <pre>function callback(eventObject) { this; // dom element } </pre>
  • Function fn3,fn4,... : The function to execute. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
Click to toggle highlight on the list item.
    $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

<ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>
    <li>Take a jog</li>
  </ul>

  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }
Example:
To toggle a style on table cells:
$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);
Timestamp: 2008-06-10T17:44:13Z, Build date: 06-09-2008 13:41


Function: blur

Reference

[Function] blur()
Triggers the blur event of each matched element.

Signature
blur() → jQuery
Description
This causes all of the functions that have been bound to that blur event to be executed, and calls the browser's default blur action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the blur event. The blur event usually fires when an element loses focus either via the pointing device or by tabbing navigation
Examples
Example:
To triggers the blur event on all paragraphs:
$("p").blur();
Added
1.0
Timestamp: 2008-08-22T16:37:39Z, Build date: 06-09-2008 13:41


Function: blur

Reference

[Function] blur(fn)
Bind a function to the blur event of each matched element.

Signature
blur(fn) → jQuery
Description
The blur event fires when an element loses focus either via the pointing device or by tabbing navigation.
Parameters
  • Function fn : A function to bind to the blur event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
To pop up an alert saying "Hello World!" every time any paragraph's blur event triggers:
$("p").blur( function () { alert("Hello World!"); } );
Added
1.0
Timestamp: 2008-08-22T16:37:39Z, Build date: 06-09-2008 13:41


Function: change

Reference

[Function] change()
Triggers the change event of each matched element.

Signature
change() → jQuery
Description
This causes all of the functions that have been bound to that change event to be executed, and calls the browser's default change action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the change event. The change event usually fires when a control loses the input focus and its value has been modified since gaining focus.
Added
1.0
Timestamp: 2008-07-21T10:30:22Z, Build date: 06-09-2008 13:41


Function: change

Reference

[Function] change(fn)
Binds a function to the change event of each matched element.

Signature
change(fn) → jQuery
Description
The change event fires when a control loses the input focus and its value has been modified since gaining focus.
Parameters
  • Function fn : A function to bind to the change event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.
    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();

<select name="sweets" multiple="multiple">
    <option>Chocolate</option>
    <option selected="selected">Candy</option>
    <option>Taffy</option>
    <option selected="selected">Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>
  </select>
  <div></div>

  div { color:red; }
Example:
To add a validity test to all text input elements:
$("input[@type='text']").change( function() {
  // check input ($(this).val()) for validity here
});
Added
1.0
Timestamp: 2008-07-21T10:30:22Z, Build date: 06-09-2008 13:41


Function: click

Reference

[Function] click()
Triggers the click event of each matched element.

Signature
click() → jQuery
Description
Causes all of the functions that have been bound to that click event to be executed.
Examples
Example:
To trigger the click event on all of the paragraphs on the page:
$("p").click();
Added
1.0
Timestamp: 2007-10-12T00:39:05Z, Build date: 06-09-2008 13:41


Function: click

Reference

[Function] click(fn)
Binds a function to the click event of each matched element.

Signature
click(fn) → jQuery
Description
The click event fires when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is:<ul><li>mousedown</li><li>mouseup</li><li>click</li></ul>
Parameters
  • Function fn : A function to bind to the click event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
To hide paragraphs on a page when they are clicked:
    $("p").click(function () {
      $(this).slideUp();
    });
    $("p").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });

<p>First Paragraph</p>
  <p>Second Paragraph</p>
  <p>Yet one more Paragraph</p>

  p { color:red; margin:5px; cursor:pointer; }
  p.hilite { background:yellow; }
Added
1.0
Timestamp: 2007-10-12T00:39:05Z, Build date: 06-09-2008 13:41


Function: dblclick

Reference

[Function] dblclick()
Triggers the dblclick event of each matched element.

Signature
dblclick() → jQuery
Description
This causes all of the functions that have been bound to that dblclick event to be executed, and calls the browser's default dblclick action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the dblclick event. The dblclick event usually fires when the pointing device button is double clicked over an element.
Added
1.0
Timestamp: 2008-01-24T17:10:37Z, Build date: 06-09-2008 13:41


Function: dblclick

Reference

[Function] dblclick(fn)
Binds a function to the dblclick event of each matched element.

Signature
dblclick(fn) → jQuery
Description
The dblclick event fires when the pointing device button is double clicked over an element
Parameters
  • Function fn : The function to bind to the dblclick event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
To bind a "Hello World!" alert box the dblclick event on every paragraph on the page:
$("p").dblclick( function () { alert("Hello World!"); });
Example:
Double click to toggle background color.
    var divdbl = $("div:first");
    divdbl.dblclick(function () {
      divdbl.toggleClass('dbl');
    });

<div></div><span>Double click the block</span>

  div { background:blue;
        color:white;
        height:100px;
        width:150px;
 }
  div.dbl { background:yellow;color:black; }
Added
1.0
Timestamp: 2008-01-24T17:10:37Z, Build date: 06-09-2008 13:41


Function: error

Reference

[Function] error()
Triggers the error event of each matched element.

Signature
error() → jQuery
Description
This causes all of the functions that have been bound to that error event to be executed, and calls the browser's default error action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the error event. The error event usually fires when an element loses focus either via the pointing device or by tabbing navigation.
Timestamp: 2007-10-12T00:36:14Z, Build date: 06-09-2008 13:41


Function: error

Reference

[Function] error(fn)
Binds a function to the error event of each matched element.

Signature
error(fn) → jQuery
Description
<p>There is no public standard for the error event. In most browsers, the window object's error event is triggered when a JavaScript error occurs on the page. An image object's error event is triggered when it is set an invalid src attribute - either a non-existent file, or one with corrupt image data.</p><p>If the event is thrown by the window object, the event handler will be passed three parameters: <ol><li>A message describing the event ("varName is not defined", "missing operator in expression", etc.),</li><li>the full URL of the document containing the error, and</li><li>the line number on which the error occured.</li></ol></p> <p>If the event handler returns true, it signifies that the event was handled, and the browser raises no errors.</p><p>For more information, see: <ul><li>[http://msdn2.microsoft.com/en-us/library/ms536930.aspx msdn - onerror Event]</li><li>[http://developer.mozilla.org/en/docs/DOM:window.onerror Gecko DOM Reference - onerror Event]</li><li>[http://developer.mozilla.org/en/docs/DOM:event Gecko DOM Reference - Event object]</li><li>[http://en.wikipedia.org/wiki/DOM_Events Wikipedia: DOM Events]</ul></p>
Parameters
  • Function fn : An event handler function to bind to the error event. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
To keep a server-side log of JavaScript errors, you might want to:
$(window).error(function(msg, url, line){
  jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
});
Example:
To hide JavaScript errors from the user, you can try:
$(window).error(function(){
  return true;
});
Example:
To hide the "broken image" icons for your IE users, you can try:
$("img").error(function(){
  $(this).hide();
});
Timestamp: 2007-10-12T00:36:14Z, Build date: 06-09-2008 13:41


Function: focus

Reference

[Function] focus()
Triggers the focus event of each matched element.

Signature
focus() → jQuery
Description
This causes all of the functions that have been bound to the focus event to be executed. Note that this does not execute the focus method of the underlying elements.
Examples
Example:
To focus on a login input box with id 'login' on page startup, try:
$(document).ready(function(){
  $("#login").focus();
});
Timestamp: 2008-07-16T20:48:32Z, Build date: 06-09-2008 13:41


Function: focus

Reference

[Function] focus(fn)
Binds a function to the focus event of each matched element.

Signature
focus(fn) → jQuery
Description
The focus event fires when an element receives focus either via the pointing device or by tab navigation.
Parameters
  • Function fn : A function to bind to the focus event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
Fire focus.
    $("input").focus(function () {
         $(this).next("span").css('display','inline').fadeOut(1000);
    });

<p><input type="text" /> <span>focus fire</span></p>
<p><input type="password" /> <span>focus fire</span></p>

span {display:none;}
Example:
To stop people from writing in text input boxes, try:
$("input[@type=text]").focus(function(){
  $(this).blur();
});
Timestamp: 2008-07-16T20:48:32Z, Build date: 06-09-2008 13:41


Function: keydown

Reference

[Function] keydown()
Triggers the keydown event of each matched element.

Signature
keydown() → jQuery
Description
This causes all of the functions that have been bound to the keydown event to be executed, and calls the browser's default keydown action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the keydown event. The keydown event usually fires when a key on the keyboard is pressed.
Timestamp: 2007-10-12T00:29:39Z, Build date: 06-09-2008 13:41


Function: keydown

Reference

[Function] keydown(fn)
Bind a function to the keydown event of each matched element.

Signature
keydown(fn) → jQuery
Description
The keydown event fires when a key on the keyboard is pressed.
Parameters
  • Function fn : A function to bind to the keydown event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
To perform actions in response to keyboard presses on a page, try:
$(window).keydown(function(event){
  switch (event.keyCode) {
    // ...
    // different keys do different things
    // Different browsers provide different codes
    // see here for details: http://unixpapa.com/js/key.html
    // ...
  }
});
Timestamp: 2007-10-12T00:29:39Z, Build date: 06-09-2008 13:41


Function: keypress

Reference

[Function] keypress()
Triggers the keypress event of each matched element.

Signature
keypress() → jQuery
Description
This causes all of the functions that have been bound to the keypress event to be executed, and calls the browser's default keypress action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the keypress event. The keypress event usually fires when a key on the keyboard is pressed.
Timestamp: 2007-10-12T00:23:40Z, Build date: 06-09-2008 13:41


Function: keypress

Reference

[Function] keypress(fn)
Binds a function to the keypress event of each matched element.

Signature
keypress(fn) → jQuery
Description
The keypress event fires when a key on the keyboard is "clicked". A keypress is defined as a keydown and keyup on the same key. The sequence of these events is: <ul><li>keydown</li><li>keyup</li><li>keypress</li></ul>
Parameters
  • Function fn : A function to bind to the keypress event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
Show spaces and letters when typed.
    $("input").keypress(function (e) {
      if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                        || (97 <= e.which && e.which <= 97 + 25)) {
        var c = String.fromCharCode(e.which);
        $("p").append($("<span/>"))
              .children(":last")
              .append(document.createTextNode(c));
      } else if (e.which == 8) {
        // backspace in IE only be on keydown
        $("p").children(":last").remove();
      }
      $("div").text(e.which);
    });

<input type="text" />
  <p>Add text - </p>
  <div></div>

  input { margin:10px; }
  p { color:blue; margin:10px; font-size:18px; }
  p.hilite { background:yellow; }
  div { color:red; }
Timestamp: 2007-10-12T00:23:40Z, Build date: 06-09-2008 13:41


Function: keyup

Reference

[Function] keyup()
Triggers the keyup event of each matched element.

Signature
keyup() → jQuery
Description
This causes all of the functions that have been bound to the keyup event to be executed, and calls the browser's default keyup action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the keyup event. The keyup event usually fires when a key on the keyboard is released.
Timestamp: 2007-11-19T18:18:30Z, Build date: 06-09-2008 13:41


Function: keyup

Reference

[Function] keyup(fn)
Bind a function to the keyup event of each matched element.

Signature
keyup(fn) → jQuery
Description
The keyup event fires when a key on the keyboard is released.
Parameters
  • Function fn : A function to bind to the keyup event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
To perform an action when the escape key has been released:
$(document).keyup(function(event){
    if (event.keyCode == 27) {
        alert('escaped!');
    }
});
Timestamp: 2007-11-19T18:18:30Z, Build date: 06-09-2008 13:41


Function: load

Reference

[Function] load (fn)
Binds a function to the load event of each matched element.

Signature
load (fn) → jQuery
Description
When bound to the window element, the event fires when the user agent finishes loading all content within a document, including window, frames, objects and images. For elements, it fires when the target element and all of its content has finished loading. Note: load will work only if you set it before the element has completely loaded, if you set it after that nothing will happen. This doesn't happen in $(document).ready(), which jQuery handles it to work as expected, also when setting it after the DOM has loaded.
Parameters
  • Function fn : A function to bind to the load event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
Run a function when the page is fully loaded including graphics.
    $(window).load(function () {
      // run code
    });
Timestamp: 2008-03-07T21:30:45Z, Build date: 06-09-2008 13:41


Function: mousedown

Reference

[Function] mousedown (fn)
Binds a function to the mousedown event of each matched element.

Signature
mousedown (fn) → jQuery
Description
The mousedown event fires when the pointing device button is pressed over an element.
Parameters
  • Function fn : A function to bind to the mousedown event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
Show texts when mouseup and mousedown event triggering.
    $("p").mouseup(function(){
      $(this).append('<span style="color:#F00;">Mouse up.</span>');
    }).mousedown(function(){
      $(this).append('<span style="color:#00F;">Mouse down.</span>');
    });

<p>Press mouse and release here.</p>
Timestamp: 2008-01-23T02:27:21Z, Build date: 06-09-2008 13:41


Function: mousemove

Reference

[Function] mousemove(fn)
Bind a function to the mousemove event of each matched element.

Signature
mousemove(fn) → jQuery
Description
The mousemove event fires when the pointing device is moved while it is over an element. The event handler is passed one variable - the event object. Its .clientX and .clientY properties represent the coordinates of the mouse.
Parameters
  • Function fn : A function to bind to the mousmove event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window which in this case is the iframe.
    $("div").mousemove(function(e){
      var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
      var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
      $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
      $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
    });

<p>
    Try scrolling too.
    <span>Move the mouse over the div.</span>
    <span>&nbsp;</span>
  </p>
  <div></div>

  div { width:250px; height:170px; margin;10px; margin-right:50px;
        background:yellow; border:2px groove; float:right; }
  p { margin:0; margin-left:10px; color:red; width:250px;
      height:120px; padding-top:70px;
      float:left; font-size:14px; }
  span { display:block; }
Timestamp: 2007-10-11T23:54:48Z, Build date: 06-09-2008 13:41


Function: mouseout

Reference

[Function] mouseout(fn)
Bind a function to the mouseout event of each matched element.

Signature
mouseout(fn) → jQuery
Description
The mouseout event fires when the pointing device is moved away from an element.
Parameters
  • Function fn : A function to bind to the mouseout event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
Show texts when mouseover and mouseout event triggering. '''Mouseout''' fires when the pointer moves into or out from child element, while '''mouseleave''' doesn't.
    var i = 0;
    $("div.overout").mouseout(function(){
      $("p:first",this).text("mouse out");
      $("p:last",this).text(++i);
    }).mouseover(function(){
      $("p:first",this).text("mouse over");
    });

    var n = 0;
    $("div.enterleave").bind("mouseenter",function(){
      $("p:first",this).text("mouse enter");
    }).bind("mouseleave",function(){
      $("p:first",this).text("mouse leave");
      $("p:last",this).text(++n);
    });

<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>
<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>

div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
Timestamp: 2008-06-08T19:57:49Z, Build date: 06-09-2008 13:41


Function: mouseover

Reference

[Function] mouseover(fn)
Bind a function to the mouseover event of each matched element.

Signature
mouseover(fn) → jQuery
Description
The mouseover event fires when the pointing device is moved onto an element.
Parameters
  • Function fn : A function to bind to the mouseover event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
Show texts when mouseover and mouseout event triggering. '''Mouseover''' fires when the pointer moves into or out from child element, while '''mouseenter''' does't.
    var i = 0;
    $("div.overout").mouseover(function(){
      $("p:first",this).text("mouse over");
      $("p:last",this).text(++i);
    }).mouseout(function(){
      $("p:first",this).text("mouse out");
    });

    var n = 0;
    $("div.enterleave").bind("mouseenter",function(){
      $("p:first",this).text("mouse enter");
      $("p:last",this).text(++n);
    }).bind("mouseleave",function(){
      $("p:first",this).text("mouse leave");
    });

<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>
<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>

div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
Timestamp: 2008-04-25T03:33:17Z, Build date: 06-09-2008 13:41


Function: mouseup

Reference

[Function] mouseup(fn)
Bind a function to the mouseup event of each matched element.

Signature
mouseup(fn) → jQuery
Description
The mouseup event fires when the pointing device button is released over an element.
Parameters
  • Function fn : A function to bind to the mouseup event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
Show texts when mouseup and mousedown event triggering.
    $("p").mouseup(function(){
      $(this).append('<span style="color:#F00;">Mouse up.</span>');
    }).mousedown(function(){
      $(this).append('<span style="color:#00F;">Mouse down.</span>');
    });

<p>Press mouse and release here.</p>
Timestamp: 2008-01-23T02:28:30Z, Build date: 06-09-2008 13:41


Function: resize

Reference

[Function] resize(fn)
Bind a function to the resize event of each matched element.

Signature
resize(fn) → jQuery
Description
The resize event fires when a document view is resized
Parameters
  • Function fn : A function to bind to the resize event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
To make resizing the web page window a pain in the neck, try:
$(window).resize(function(){
  alert("Stop it!");
});
Timestamp: 2007-10-11T23:50:57Z, Build date: 06-09-2008 13:41


Function: scroll

Reference

[Function] scroll(fn)
Bind a function to the scroll event of each matched element.

Signature
scroll(fn) → jQuery
Description
The scroll event fires when a document view is scrolled.
Parameters
  • Function fn : A function to bind to the scroll event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
To do something when your page is scrolled:
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $(window).scroll(function () {
      $("span").css("display", "inline").fadeOut("slow");
    });

<div>Try scrolling the iframe.</div>
  <p>Paragraph - <span>Scroll happened!</span></p>

  div { color:blue; }
  p { color:green; }
  span { color:red; display:none; }
Timestamp: 2007-10-11T23:48:18Z, Build date: 06-09-2008 13:41


Function: select

Reference

[Function] select()
Trigger the select event of each matched element.

Signature
select() → jQuery
Description
This causes all of the functions that have been bound to that select event to be executed, and calls the browser's default select action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the select event. Note: Do not confuse the "select" event with the "<a href='Events/change'>change</a>" event, which is the one triggered when an html "select" element is having its selected option modified by the user.
Examples
Example:
To trigger the select event on all input elements, try:
$("input").select();
Timestamp: 2008-07-31T23:07:09Z, Build date: 06-09-2008 13:41


Function: select

Reference

[Function] select(fn)
Bind a function to the select event of each matched element.

Signature
select(fn) → jQuery
Description
The select event fires when a user selects some text in a text field, including input and textarea.
Parameters
  • Function fn : A function to bind to the select event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
To do something when text in input boxes is selected:
    $(document).select( function () {
      $("div").text("Something was selected").show().fadeOut(1000);
    });

<p>
    Click and drag the mouse to select text in the inputs.
  </p>
  <input type="text" value="Some text" />
  <input type="text" value="to test on" />
  <div></div>

  p { color:blue; }
  div { color:red; }
Timestamp: 2008-07-31T23:07:09Z, Build date: 06-09-2008 13:41


Function: submit

Reference

[Function] submit()
Trigger the submit event of each matched element.

Signature
submit() → jQuery
Description
This causes all of the functions that have been bound to that submit event to be executed, and calls the browser's default submit action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the submit event.
Examples
Example:
To trigger the submit event on the first form on the page, try:
$("form:first").submit();
Timestamp: 2007-10-11T23:26:31Z, Build date: 06-09-2008 13:41


Function: submit

Reference

[Function] submit(fn)
Bind a function to the submit event of each matched element.

Signature
submit(fn) → jQuery
Description
The select event fires when a form is submitted
Parameters
  • Function fn : A function to bind to the submit event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
If you'd like to prevent forms from being submitted unless a flag variable is set, try:
    $("form").submit(function() {
      if ($("input:first").val() == "correct") {
        $("span").text("Validated...").show();
        return true;
      }
      $("span").text("Not valid!").show().fadeOut(1000);
      return false;
    });

<p>Type 'correct' to validate.</p>
  <form action="javascript:alert('success!');">
    <div>
      <input type="text" />
      <input type="submit" />
    </div>
  </form>
  <span></span>

  p { margin:0; color:blue; }
  div,p { margin-left:10px; }
  span { color:red; }
Example:
If you'd like to prevent forms from being submitted unless a flag variable is set, try:
$("form").submit( function () {
  return this.some_flag_variable;
} );
Timestamp: 2007-10-11T23:26:31Z, Build date: 06-09-2008 13:41


Function: unload

Reference

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

Signature
unload(fn) → jQuery
Parameters
  • Function fn : function to bind to the unload event on each of the matched elements. <pre>function callback(eventObject) { this; // dom element } </pre>
Examples
Example:
To display an alert when a page is unloaded:
$(window).unload( function () { alert("Bye now!"); } );
Timestamp: 2007-11-03T04:26:04Z, Build date: 06-09-2008 13:41


Function: show

Reference

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

Signature
show() → jQuery
Description
Same as <a href='Effects/show#speedcallback'>show( speed, [callback] )</a> without animations. Doesn't change anything if the selected elements are all visible. It doesn't matter if the element is hidden via a hide() call, or via a display:none in a stylesheet.
Examples
Example:
Shows all paragraphs.
$("p").show()

<p style="display:none">Hello</p>
Added
1.0
Timestamp: 2008-07-16T04:18:55Z, Build date: 06-09-2008 13:41


Function: show

Reference

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

Signature
show(speed, callback) → jQuery
Description
The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.
Parameters
  • String, Number speed : A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • Function callback : A function to be executed whenever the animation completes, executes once for each element animated against. <pre>function callback() { this; // dom element } </pre>
Examples
Example:
Animates all hidden paragraphs to show slowly, completing the animation within 600 milliseconds.
    $("button").click(function () {
      $("p").show("slow");
    });

<button>Show it</button>
  <p style="display: none">Hello</p>

  p { background:yellow; }
Example:
Animates all hidden divs to show fastly in order, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.
    $("#showr").click(function () {
      $("div:eq(0)").show("fast", function () {
        // use callee so don't have to name the function
        $(this).next().show("fast", arguments.callee);
      });
    });
    $("#hidr").click(function () {
      $("div").hide(2000);
    });

<button id="showr">Show</button>
  <button id="hidr">Hide</button>
  <div>Hello,</div>
  <div>how</div>
  <div>are</div>
  <div>you?</div>

  div { background:#def3ca; margin:3px; width:80px;
        display:none; float:left; text-align:center; }
Example:
Animates all span and input elements to show normally. Once the animation is done, it changes the text.
    function doIt() {
      $("span,div").show("normal");
    }
    $("button").click(doIt); // can pass in function name
    $("form").submit(function () {
      if ($("input").val() == "yes") {
        $("p").show(4000, function () {
          $(this).text("Ok, DONE! (now showing)");
        });
      }
      $("span,div").hide("normal");
      return false; // to stop the submit
    });

<button>Do it!</button>
  <span>Are you sure? (type 'yes' if you are) </span>
  <div>
    <form>
      <input type="text" />
    </form>
  </div>
  <p style="display:none;">I'm hidden...</p>

  span { display:none; }
  div { display:none; }
  p { font-weight:bold; background-color:#fcd; }
Added
1.0
Timestamp: 2008-07-16T04:18:55Z, Build date: 06-09-2008 13:41


Function: hide

Reference

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

Signature
hide() → jQuery
Description
Same as <a href='Effects/hide#speedcallback'>hide( speed, [callback] )</a> without animations. Doesn't change anything if the selected elements are all hidden.
Examples
Example:
Hides all paragraphs then the link on click.
    $("p").hide();
    $("a").click(function () {
      $(this).hide();
      return false;
    });

<p>Hello</p>
  <a href="#">Click to hide me too</a>
  <p>Here is another paragraph</p>
Added
1.0
Timestamp: 2007-10-11T22:59:22Z, Build date: 06-09-2008 13:41


Function: hide

Reference

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

Signature
hide(speed, callback) → jQuery
Description
The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.
Parameters
  • String, Number speed : A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • Function callback : A function to be executed whenever the animation completes, executes once for each element animated against. <pre>function callback() { this; // dom element } </pre>
Examples
Example:
Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.
    $("button").click(function () {
      $("p").hide("slow");
    });

<button>Hide 'em</button>
  <p>Hiya</p>
  <p>Such interesting text, eh?</p>

  p { background:#dad; font-weight:bold; }
Example:
Animates all spans (words in this case) to hide fastly, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.
    $("#hidr").click(function () {
      $("span:last-child").hide("fast", function () {
        // use callee so don't have to name the function
        $(this).prev().hide("fast", arguments.callee);
      });
    });
    $("#showr").click(function () {
      $("span").show(2000);
    });

<button id="hidr">Hide</button>
  <button id="showr">Show</button>
  <div>
    <span>Once</span> <span>upon</span> <span>a</span>
    <span>time</span> <span>there</span> <span>were</span>
    <span>three</span> <span>programmers...</span>
  </div>

  span { background:#def3ca; padding:3px; float:left; }
Example:
Hides the divs when clicked over 2 seconds, then removes the div element when its hidden. Try clicking on more than one box at a time.
    for (var i = 0; i < 5; i++) {
      $("<div>").appendTo(document.body);
    }
    $("div").click(function () {
      $(this).hide(2000, function () {
        $(this).remove();
      });
    });

<div></div>

  div { background:#ece0fb; width:30px;
        height:40px; margin:2px; float:left; }
Added
1.0
Timestamp: 2007-10-11T22:59:22Z, Build date: 06-09-2008 13:41


Function: toggle

Reference

[Function] toggle()
Toggles displaying each of the set of matched elements.

Signature
toggle() → jQuery
Description
If they are shown, toggle makes them hidden. If they are hidden, toggle makes them shown.
Examples
Example:
Toggles all paragraphs.
    $("button").click(function () {
      $("p").toggle();
    });

<button>Toggle</button>
  <p>Hello</p>
  <p style="display: none">Good Bye</p>
Added
1.0
Timestamp: 2008-05-13T11:29:29Z, Build date: 06-09-2008 13:41


Function: slideDown

Reference

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

Signature
slideDown(speed, callback) → jQuery
Description
Only the height is adjusted for this animation, causing all matched elements to be revealed in a "sliding" manner.
Parameters
  • String, Number speed : A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • Function callback : A function to be executed whenever the animation completes, executes once for each element animated against. <pre>function callback() { this; // dom element } </pre>
Examples
Example:
Animates all divs to slide down and show themselves over 600 milliseconds.
    $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").slideDown("slow");
      } else {
        $("div").hide();
      }
    });

Click me!
  <div></div>
  <div></div>
  <div></div>

  div { background:#de9a44; margin:3px; width:80px;
        height:40px; display:none; float:left; }
Example:
Animates all inputs to slide down, completing the animation within 1000 milliseconds. Once the animation is done, the input look is changed especially if it is the middle input which gets the focus.
    $("div").click(function () {
      $(this).css({ borderStyle:"inset", cursor:"wait" });
      $("input").slideDown(1000,function(){
        $(this).css("border", "2px red inset")
               .filter(".middle")
                 .css("background", "yellow")
                 .focus();
        $("div").css("visibility", "hidden");
      });
    });

<div>Push!</div>
  <input type="text" />
  <input type="text" class="middle" />
  <input type="text" />

  div { background:#cfd; margin:3px; width:50px;
        text-align:center; float:left; cursor:pointer;
        border:2px outset black; font-weight:bolder; }
  input { display:none; width:120px; float:left;
          margin:10px; }
Added
1.0
Timestamp: 2007-10-11T22:53:58Z, Build date: 06-09-2008 13:41


Function: slideUp

Reference

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

Signature
slideUp(speed, callback) → jQuery
Description
Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner.
Parameters
  • String, Number speed : A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • Function callback : A function to be executed whenever the animation completes, executes once for each element animated against. <pre>function callback() { this; // dom element } </pre>
Examples
Example:
Animates all divs to slide up, completing the animation within 400 milliseconds.
    $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").show("slow");
      } else {
        $("div").slideUp();
      }
    });

Click me!
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  div { background:#3d9a44; margin:3px; width:80px;
        height:40px; float:left; }
Example:
Animates all paragraph to slide up, completing the animation within 200 milliseconds. Once the animation is done, it displays an alert.
    $("button").click(function () {
      $(this).parent().slideUp("slow", function () {
        $("#msg").text($("button", this).text() + " has completed.");
      });
    });

<div>
    <button>Hide One</button>
    <input type="text" value="One" />
  </div>
  <div>
    <button>Hide Two</button>
    <input type="text" value="Two" />
  </div>
  <div>
    <button>Hide Three</button>
    <input type="text" value="Three" />
  </div>
  <div id="msg"></div>

  div { margin:2px; }
Added
1.0
Timestamp: 2008-01-31T12:19:57Z, Build date: 06-09-2008 13:41


Function: slideToggle

Reference

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

Signature
slideToggle(speed, callback) → jQuery
Description
Only the height is adjusted for this animation, causing all matched elements to be hidden or shown in a "sliding" manner.
Parameters
  • String, Number speed : A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • Function callback : A function to be executed whenever the animation completes, executes once for each element animated against. <pre>function callback() { this; // dom element } </pre>
Examples
Example:
Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.
    $("button").click(function () {
      $("p").slideToggle("slow");
    });

<button>Toggle</button>
  <p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>

  p { width:400px; }
Example:
Animates divs between dividers with a toggle that makes some appear and some disappear.
    $("button").click(function () {
      $("div:not(.still)").slideToggle("slow", function () {
        var n = parseInt($("span").text(), 10);
        $("span").text(n + 1);
      });
    });

<button>Toggle</button> There have been <span>0</span> toggled divs.
  <div></div><div class="still"></div>
  <div style="display:none;"></div><div class="still"></div>
  <div></div><div class="still"></div>
  <div class="hider"></div><div class="still"></div>
  <div class="hider"></div><div class="still"></div>
  <div></div>

  div { background:#b977d1; margin:3px; width:60px;
        height:60px; float:left; }
  div.still { background:#345; width:5px; }
  div.hider { display:none; }
  span { color:red; }
Added
1.0
Timestamp: 2007-10-11T22:48:47Z, Build date: 06-09-2008 13:41


Function: fadeIn

Reference

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

Signature
fadeIn(speed, callback) → jQuery
Description
Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.
Parameters
  • String, Number speed : A string representing one of the three predefined speeds ("slow", "def", or "fast") or the number of milliseconds to run the animation (e.g. 1000). As of jQuery 1.2.6, "normal" or any other string works the same as "def" (400ms).
  • Function callback : A function to be executed whenever the animation completes, executes once for each element animated against. <pre>function callback() { this; // dom element } </pre>
Examples
Example:
Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.
    $(document.body).click(function () {
      $("div:hidden:first").fadeIn("slow");
    });

<span>Click here...</span>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>

  span { color:red; cursor:pointer; }
  div { margin:3px; width:80px; display:none;
        height:80px; float:left; }
  div#one { background:#f00; }
  div#two { background:#0f0; }
  div#three { background:#00f; }
Example:
Fades a red block in over the text. Once the animation is done, it quickly fades in more text on top.
    $("a").click(function () {
      $("div").fadeIn(3000, function () {
        $("span").fadeIn(100);
      });
      return false;
    });

<p>
    Let it be known that the party of the first part
    and the party of the second part are henceforth
    and hereto directed to assess the allegations
    for factual correctness... (<a href="#">click!</a>)
    <div><span>CENSORED!</span></div>
  </p>

  p { position:relative; width:400px; height:90px; }
  div { position:absolute; width:400px; height:65px;
        font-size:36px; text-align:center;
        color:yellow; background:red;
        padding-top:25px;
        top:0; left:0; display:none; }
  span { display:none; }
Added
1.0
Timestamp: 2008-06-08T01:50:27Z, Build date: 06-09-2008 13:41


Function: fadeOut

Reference

[Function] fadeOut(speed, callback)
Fade out all matched elements by adjusting their opacity and firing an optional callback after completion.

Signature
fadeOut(speed, callback) → jQuery
Description
Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.
Parameters
  • String, Number speed : A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • Function callback : A function to be executed whenever the animation completes, executes once for each element animated against. <pre>function callback() { this; // dom element } </pre>
Examples
Example:
Animates all paragraphs to fade out, completing the animation within 600 milliseconds.
    $("p").click(function () {
      $("p").fadeOut("slow");
    });

<p>
    If you click on this paragraph
    you'll see it just fade away.
  </p>

  p { font-size:150%; cursor:pointer; }
Example:
Fades out spans in one section that you click on.
    $("span").click(function () {
      $(this).fadeOut(1000, function () {
        $("div").text("'" + $(this).text() + "' has faded!");
        $(this).remove();
      });
    });
    $("span").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });

<h3>Find the modifiers - <div></div></h3>
  <p>
    If you <span>really</span> want to go outside
    <span>in the cold</span> then make sure to wear
    your <span>warm</span> jacket given to you by
    your <span>favorite</span> teacher.
  </p>

  span { cursor:pointer; }
  span.hilite { background:yellow; }
  div { display:inline; color:red; }
Added
1.0
Timestamp: 2007-10-11T22:37:54Z, Build date: 06-09-2008 13:41


Function: fadeTo

Reference

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

Signature
fadeTo(speed, opacity, callback) → jQuery
Description
Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.
Parameters
  • String, Number speed : A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • Number opacity : The opacity to fade to (a number from 0 to 1).
  • Function callback : A function to be executed whenever the animation completes, executed once for each element animated against. <pre>function callback() { this; // dom element } </pre>
Examples
Example:
Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.
    $("p:first").click(function () {
      $(this).fadeTo("slow", 0.33);
    });

<p>
    Click this paragraph to see it fade.
  </p>
  <p>
    Compare to this one that won't fade.
  </p>
Example:
Fade div to a random opacity on each click, completing the animation within 200 milliseconds.
    $("div").click(function () {
      $(this).fadeTo("fast", Math.random());
    });

<p>And this is the library that John built...</p>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>

  p { width:80px; margin:0; padding:5px; }
  div { width:40px; height:40px; position:absolute; }
  div#one { top:0; left:0; background:#f00; }
  div#two { top:20px; left:20px; background:#0f0; }
  div#three { top:40px; left:40px; background:#00f; }
Example:
Find the right answer! The fade will take 250 milliseconds and change various styles when it completes.
    var getPos = function (n) {
      return (Math.floor(n) * 90) + "px";
    };
    $("p").each(function (n) {
      var r = Math.floor(Math.random() * 3);
      var tmp = $(this).text();
      $(this).text($("p:eq(" + r + ")").text());
      $("p:eq(" + r + ")").text(tmp);
      $(this).css("left", getPos(n));
    });
    $("div").each(function (n) {
                  $(this).css("left", getPos(n));
                })
            .css("cursor", "pointer")
            .click(function () {
                  $(this).fadeTo(250, 0.25, function () {
                        $(this).css("cursor", "")
                               .prev().css({"font-weight": "bolder",
                                            "font-style": "italic"});
                      });
                });

<p>Wrong</p>
  <div></div>
  <p>Wrong</p>
  <div></div>
  <p>Right!</p>
  <div></div>

  div, p { width:80px; height:40px; top:0; margin:0;
           position:absolute; padding-top:8px; }
  p { background:#fcc; text-align:center; }
  div { background:blue; }
Added
1.0
Timestamp: 2007-10-11T22:33:17Z, Build date: 06-09-2008 13:41


Function: animate

Reference

[Function] animate(params, duration, easing, callback)
A function for making custom animations.

Signature
animate(params, duration, easing, callback) → jQuery
Description
The key aspect of this function is the object of style properties that will be animated, and to what end. Each key within the object represents a style property that will also be animated (for example: "height", "top", or "opacity"). Note that properties should be specified using camel case, e.g. "marginLeft" instead of "margin-left." The value associated with the key represents to what end the property will be animated. If a number is provided as 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, a default animation will be constructed for that property. Only properties that take numeric values are supported (e.g. backgroundColor is not supported). As of jQuery 1.2 you can now animate properties by em and % (where applicable). Additionally, in jQuery 1.2, you can now do relative animations - specifying a "''+=''" or "''-=''" in front of the property value moves the element positively or negatively, relative to its current position.
Parameters
  • Options params : A set of style attributes that you wish to animate, and to what end.
  • String, Number duration : A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • String easing : The name of the easing effect that you want to use (plugin required). There are two built-in values, "linear" and "swing".
  • Function callback : A function to be executed whenever the animation completes, executes once for each element animated against.
Examples
Example:
Click the button to animate the div with a number of different properties.
    // Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
      }, 1500 );
    });

<button id="go">&raquo; Run</button>
  <div id="block">Hello!</div>

  div {
    background-color:#bca;
    width:100px;
    border:1px solid green;
  }
Example:
Shows a div animate with a relative move. Click several times on the buttons to see the relative animations queued up.
    $("#right").click(function(){
      $(".block").animate({"left": "+=50px"}, "slow");
    });

    $("#left").click(function(){
      $(".block").animate({"left": "-=50px"}, "slow");
    });

<button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>

  div {
    position:absolute;
    background-color:#abc;
    left:50px;
    width:90px;
    height:90px;
    margin:5px;
  }
Example:
Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.
$("p").animate({
      "height": "toggle", "opacity": "toggle"
    }, "slow");
Example:
Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.
$("p").animate({
      "left": "50", "opacity": 1
    }, 500);
Example:
An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function. Note, this code will do nothing unless the paragraph element is hidden.
$("p").animate({
      "opacity": "show"
    }, "slow", "easein");
Added
1.0
Timestamp: 2008-08-01T03:52:24Z, Build date: 06-09-2008 13:41


Function: animate

Reference

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

Signature
animate(params, options) → jQuery
Description
The key aspect of this function is the object of style properties that will be animated, and to what end. Each key within the object represents a style property that will also be animated (e.g. "height", "top", or "opacity"). Note that properties should be specified using camel case, e.g. "marginLeft" instead of "margin-left." The value associated with the key represents to what end the property will be animated. If a number is provided as 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, a default animation will be constructed for that property.
Parameters
  • Options params : A set of style attributes that you wish to animate, and to what end.
  • Options options : A set of options with which to configure the animation.
Examples
Example:
The first button shows how an unqueued animation works. It expands the div out to 90% width '''while''' the font-size is increasing. Once the font-size change is complete, the border animation will begin. The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.
    $("#go1").click(function(){
      $("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
         .animate( { fontSize:"24px" }, 1500 )
         .animate( { borderRightWidth:"15px" }, 1500);
    });

    $("#go2").click(function(){
      $("#block2").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
         .animate( { borderLeftWidth:"15px" }, 1000);
    });

    $("#go3").click(function(){
      $("#go1").add("#go2").click();
    });

    $("#go4").click(function(){
      $("div").css({width:"", fontSize:"", borderWidth:""});
    });

<button id="go1">&raquo; Animate Block1</button>
  <button id="go2">&raquo; Animate Block2</button>
  <button id="go3">&raquo; Animate Both</button>
  <button id="go4">&raquo; Reset</button>
  <div id="block1">Block1</div>
  <div id="block2">Block2</div>

div {
    background-color:#bca;
    width:200px;
    height:1.1em;
    text-align:center;
    border:2px solid green;
    margin:3px;
    font-size:14px;
  }
  button {
    font-size:14px;
  }
Example:
Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.
$("p").animate({
      "height": "toggle", "opacity": "toggle"
    }, { duration: "slow" });
Example:
Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds. It also will do it ''outside'' the queue, meaning it will automatically start without waiting for its turn.
$("p").animate({
      left: "50px", opacity: 1
    }, { duration: 500, queue: false });
Example:
An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.
$("p").animate({
      "opacity": "show"
    }, { "duration": "slow", "easing": "easein" });
Example:
An example of using a callback function. The first argument is an array of CSS properties, the second specifies that the animation should take 1000 milliseconds to complete, the third states the easing type, and the fourth argument is an anonymous callback function.
$("p").animate({
       height:200, width:400, opacity: .5
    }, 1000, "linear", function(){alert("all done");} );
Added
1.0
Timestamp: 2008-08-01T03:52:24Z, Build date: 06-09-2008 13:41


Function: stop

Reference

[Function] stop()
Stops all the currently running animations on all the specified elements.

Signature
stop() → jQuery
Description
If any animations are queued to run, then they will begin immediately.
Examples
Example:
Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.
    // Start animation
    $("#go").click(function(){
      $(".block").animate({left: '+=100px'}, 2000);
    });

    // Stop animation when button is clicked
    $("#stop").click(function(){
      $(".block").stop();
    });

    // Start animation in the opposite direction
    $("#back").click(function(){
      $(".block").animate({left: '-=100px'}, 2000);
    });

<button id="go">Go</button>
  <button id="stop">STOP!</button>
  <button id="back">Back</button>
  <div class="block"></div>

div {
    position: absolute;
    background-color: #abc;
    left: 0px;
    top:30px;
    width: 60px;
    height: 60px;
    margin: 5px;
  }
Added
1.2
Timestamp: 2007-10-11T22:20:50Z, Build date: 06-09-2008 13:41


Function: queue

Reference

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

Signature
queue() → Array
Examples
Example:
Show the length of the queue.
    $("#show").click(function () {
      var n = $("div").queue("fx");
      $("span").text("Queue length is: " + n.length);
    });
    function runIt() {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").slideToggle(1000);
      $("div").slideToggle("fast");
      $("div").animate({left:'-=200'},1500);
      $("div").hide("slow");
      $("div").show(1200);
      $("div").slideUp("normal", runIt);
    }
    runIt();

<button id="show">Show Length of Queue</button>
  <span></span>
  <div></div>

  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  span { color:red; }
Added
1.2
Timestamp: 2007-11-29T03:14:52Z, Build date: 06-09-2008 13:41


Function: queue

Reference

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

Signature
queue(callback) → jQuery
Parameters
  • Function callback : The function to add to the queue. <pre>function callback() { this; // dom element // to continue the queue you must call jQuery(this).dequeue(); } </pre>
Examples
Example:
Queue a custom function.
    $(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });

Click here...
  <div></div>

  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
Added
1.2
Timestamp: 2007-11-29T03:14:52Z, Build date: 06-09-2008 13:41


Function: queue

Reference

[Function] queue(queue)
Replaces the queue of all matched element with this new queue (the array of functions).

Signature
queue(queue) → jQuery
Parameters
  • Array queue : The queue to replace all the queues with. The functions have the same parameters and this value as queue(callback).
Examples
Example:
Set a queue array to delete the queue.
    $("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},1500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      $("div").queue("fx", []);
      $("div").stop();
    });

<button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>

  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
Added
1.2
Timestamp: 2007-11-29T03:14:52Z, Build date: 06-09-2008 13:41


Function: dequeue

Reference

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

Signature
dequeue() → jQuery
Examples
Example:
Use dequeue to end a custom queue function which allows the queue to keep going.
    $("button").click(function () {
      $("div").animate({left:'+=200px'}, 2000);
      $("div").animate({top:'0px'}, 600);
      $("div").queue(function () {
        $(this).toggleClass("red");
        $(this).dequeue();
      });
      $("div").animate({left:'10px', top:'30px'}, 700);
    });

<button>Start</button>
  <div></div>

  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px;
        background-color:yellow; }
  div.red { background-color:red; }
Added
1.2
Timestamp: 2007-10-11T22:13:19Z, Build date: 06-09-2008 13:41


Function: jQuery.ajax

Reference

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

Signature
jQuery.ajax(options) → XMLHttpRequest
Description
This is jQuery's low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions that are often easier to understand and use, but don't offer as much functionality (such as error callbacks). $.ajax() returns the XMLHttpRequest that it creates. In most cases you won't need that object to manipulate directly, but it is available if you need to abort the request manually. $.ajax() takes one argument, an object of key/value pairs, that are used to initialize and handle the request. See below for a full list of the key/values that can be used. '''Note:''' If you specify the dataType option described below, make sure the server sends the correct MIME type in the response (eg. xml as "text/xml"). Sending the wrong MIME type can lead to unexpected problems in your script. See <a href='Specifying_the_Data_Type_for_AJAX_Requests'>Specifying the Data Type for AJAX Requests</a> for more information. '''Note:''' All remote (not on the same domain) POST requests are converted to GET when 'script' is the dataType (because it loads script using a DOM script tag). As of jQuery 1.2, you can load JSON data located on another domain if you specify a [http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/ JSONP] callback, which can be done like so: "myurl?callback=?". jQuery automatically replaces the ? with the correct method name to call, calling your specified callback. Or, if you set the dataType to "jsonp" a callback will be automatically added to your Ajax request.
Parameters
  • Options options : A set of key/value pairs that configure the Ajax request. All options are optional. A default can be set for any option with <a href='Ajax/jQuery.ajaxSetup'>$.ajaxSetup</a>().
Examples
Example:
Load and execute a JavaScript file.
 $.ajax({
   type: "GET",
   url: "test.js",
   dataType: "script"
 });
Example:
Save some data to the server and notify the user once its complete.
 $.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });
Example:
Retrieve the latest version of an HTML page.
$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});
Example:
Loads data synchronously. Blocks the browser while the requests is active. It is better to block user interaction by other means when synchronization is necessary.
 var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;
Example:
Sends an xml document as data to the server. By setting the processData option to false, the automatic conversion of data to strings is prevented.
 var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 });
Added
1.0
Timestamp: 2008-08-27T00:19:51Z, Build date: 06-09-2008 13:41


Function: load

Reference

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

Signature
load(url, data, callback) → jQuery
Description
A GET request will be performed by default - but if you pass in any extra parameters then a POST will occur. In jQuery 1.2 you can now specify a jQuery selector in the URL. Doing so will filter the incoming HTML document, only injecting the elements that match the selector. The syntax looks something like "url #some > selector". See the examples for more information.
Parameters
  • String url : The URL of the HTML page to load.
  • Map data : Key/value pairs that will be sent to the server.
  • Callback callback : The function called when the ajax request is complete (not necessarily success). <pre>function (responseText, textStatus, XMLHttpRequest) { this; // dom element } </pre>
Examples
Example:
Load a piece of the documentation sidebar navigation into a custom unordered list.
$("#links").load("/Main_Page #p-Getting-Started li");

<b>jQuery Links:</b>
<ul id="links"></ul>

body{ font-size: 11px; font-family: Arial; }
Example:
Load the feeds.html file into the div with the ID of feeds.
$("#feeds").load("feeds.html");
Example:
pass arrays of data to the server.
 $("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );
Example:
Same as above, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.
 $("#feeds").load("feeds.php", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });
Added
1.0
Timestamp: 2008-07-16T12:49:43Z, Build date: 06-09-2008 13:41


Function: jQuery.get

Reference

[Function] jQuery.get(url, data, callback, type)
Load a remote page using an HTTP GET request.

Signature
jQuery.get(url, data, callback, type) → XMLHttpRequest
Description
This is an easy way to send a simple GET request to a server without having to use the more complex $.ajax function. It allows a single callback function to be specified that will be executed when the request is complete (and only if the response has a successful response code). If you need to have both error and success callbacks, you may want to use $.ajax.
Parameters
  • String url : The URL of the page to load.
  • Map data : Key/value pairs that will be sent to the server.
  • Function callback : A function to be executed whenever the data is loaded successfully. <pre>function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } </pre>
  • String type : Type of data to be returned to callback function (options:xml, html, script, json, text, _default)
Examples
Example:
Request the test.php page, but ignore the return results.
 $.get("test.php");
Example:
Request the test.php page and send some additional data along (while still ignoring the return results).
 $.get("test.php", { name: "John", time: "2pm" } );
Example:
pass arrays of data to the server (while still ignoring the return results).
 $.get("test.php", { 'choices[]': ["Jon", "Susan"]} );
Example:
Alert out the results from requesting test.php (HTML or XML, depending on what was returned).
 $.get("test.php", function(data){
   alert("Data Loaded: " + data);
 });
Example:
Alert out the results from requesting test.cgi with an additional payload of data (HTML or XML, depending on what was returned).
 $.get("test.cgi", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });
Added
1.0
Timestamp: 2008-07-22T23:43:29Z, Build date: 06-09-2008 13:41


Function: jQuery.getJSON

Reference

[Function] jQuery.getJSON(url, data, callback)
Load JSON data using an HTTP GET request.

Signature
jQuery.getJSON(url, data, callback) → XMLHttpRequest
Description
As of jQuery 1.2, you can load JSON data located on another domain if you specify a [http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/ JSONP] callback, which can be done like so: "myurl?callback=?". jQuery automatically replaces the ? with the correct method name to call, calling your specified callback. Note: Keep in mind, that lines after this function will be executed before callback.
Parameters
  • String url : The URL of the page to load.
  • Map data : Key/value pairs that will be sent to the server.
  • Function callback : A function to be executed whenever the data is loaded successfully. <pre>function (data, textStatus) { // data will be a jsonObj this; // the options for this ajax request } </pre>
Examples
Example:
Loads the four most recent cat pictures from the Flickr JSONP API.
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
          });
        });

<div id="images"></div>

img{ height: 100px; float: left; }
Example:
Load the JSON data from test.js and access a name from the returned JSON data.
 $.getJSON("test.js", function(json){
   alert("JSON Data: " + json.users[3].name);
 });
Example:
Load the JSON data from test.js, passing along additional data, and access a name from the returned JSON data.
 $.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
   alert("JSON Data: " + json.users[3].name);
 });
Example:
List the result of a consultation of pages.php in HTML as an array. By Manuel Gonzalez.
var id=$("#id").attr("value");
  $.getJSON("pages.php",{id:id},dates);
function dates(datos)
{

 $("#list").html("Name:"+datos[1].name+"<br>"+"Last Name:"+datos[1].lastname+"<br>"+"Address:"+datos[1].address);
}
Added
1.0
Timestamp: 2008-05-14T09:35:15Z, Build date: 06-09-2008 13:41


Function: jQuery.getScript

Reference

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

Signature
jQuery.getScript(url, callback) → XMLHttpRequest
Description
Before jQuery 1.2, getScript was only able to load scripts from the same domain as the original page. As of 1.2, you can now load JavaScript files from any domain. Warning: Safari 2 and older is unable to evaluate scripts in a global context synchronously. If you load functions via getScript, make sure to call them after a delay.
Parameters
  • String url : The URL of the page to load.
  • Function callback : A function to be executed whenever the data is loaded successfully. <pre>function (data, textStatus) { // data should be javascript this; // the options for this ajax request } </pre>
Examples
Example:
We load the new [http://jquery.com/plugins/project/color official jQuery Color Animation plugin] dynamically and bind some color animations to occur once the new functionality is loaded.
$.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
  $("#go").click(function(){
    $(".block").animate( { backgroundColor: 'pink' }, 1000)
      .animate( { backgroundColor: 'blue' }, 1000);
  });
});

<button id="go">&raquo; Run</button>
<div class="block"></div>

.block {
   background-color: blue;
   width: 150px;
   height: 70px;
   margin: 10px;
}
Example:
Load the test.js JavaScript file and execute it.
 $.getScript("test.js");
Example:
Load the test.js JavaScript file and execute it, displaying an alert message when the execution is complete.
 $.getScript("test.js", function(){
   alert("Script loaded and executed.");
 });
Added
1.0
Timestamp: 2007-10-31T03:52:12Z, Build date: 06-09-2008 13:41


Function: jQuery.post

Reference

[Function] jQuery.post(url, data, callback, type)
Load a remote page using an HTTP POST request.

Signature
jQuery.post(url, data, callback, type) → XMLHttpRequest
Description
This is an easy way to send a simple POST request to a server without having to use the more complex $.ajax function. It allows a single callback function to be specified that will be executed when the request is complete (and only if the response has a successful response code). The returned data format can be specified by the fourth parameter. If you need to have both error and success callbacks, you may want to use $.ajax. $.post is a (simplified) wrapper function for $.ajax.
Parameters
  • String url : The URL of the page to load.
  • Map data : Key/value pairs that will be sent to the server.
  • Function callback : A function to be executed whenever the data is loaded successfully.
<pre>function (data, textStatus) {
  // data could be xmlDoc, jsonObj, html, text, etc...
  this; // the options for this ajax request
  // textStatus can be one of:
  //   "timeout"
  //   "error"
  //   "notmodified"
  //   "success"
  //   "parsererror"
}
</pre>
  • String type : Type of data to be returned to callback function (JSON, XML, etc.)
<pre>$.postJSON = function(url, data, callback) {
    $.post(url, data, callback, "json");
};
</pre>
Examples
Example:
Request the test.php page, but ignore the return results.
 $.post("test.php");
Example:
Request the test.php page and send some additional data along (while still ignoring the return results).
 $.post("test.php", { name: "John", time: "2pm" } );
Example:
pass arrays of data to the server (while still ignoring the return results).
 $.post("test.php", { 'choices[]': ["Jon", "Susan"] });
Example:
Alert out the results from requesting test.php (HTML or XML, depending on what was returned).
 $.post("test.php", function(data){
   alert("Data Loaded: " + data);
 });
Example:
Alert out the results from requesting test.php with an additional payload of data (HTML or XML, depending on what was returned).
 $.post("test.php", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });
Example:
Gets the test.php page content, store it in a XMLHttpResponse object and applies the process() JavaScript function.
 $.post("test.php", { name: "John", time: "2pm" },
   function(data){
     process(data);
   }, "xml");
Example:
Gets the test.php page contents which has been returned in json format (<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>)
 $.post("test.php", { func: "getNameAndTime" },
   function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
   }, "json");
Added
1.0
Timestamp: 2008-08-06T06:53:07Z, Build date: 06-09-2008 13:41


Function: ajaxComplete

Reference

[Function] ajaxComplete(callback)
Attach a function to be executed whenever an AJAX request completes. This is an <a href='Ajax_Events'>Ajax Event</a>.

Signature
ajaxComplete(callback) → jQuery
Description
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
Parameters
  • Function callback : The function to execute. <pre>function (event, XMLHttpRequest, ajaxOptions) { this; // dom element listening } </pre>
Examples
Example:
Show a message when an AJAX request completes.
 $("#msg").ajaxComplete(function(request, settings){
   $(this).append("<li>Request Complete.</li>");
 });
Added
1.0
Timestamp: 2007-12-15T18:06:16Z, Build date: 06-09-2008 13:41


Function: ajaxError

Reference

[Function] ajaxError(callback)
Attach a function to be executed whenever an AJAX request fails. This is an <a href='Ajax_Events'>Ajax Event</a>.

Signature
ajaxError(callback) → jQuery
Description
The XMLHttpRequest and settings used for that request are passed as arguments to the callback. A third argument, an exception object, is passed if an exception occured while processing the request.
Parameters
  • Function callback : The function to execute. <pre>function (event, XMLHttpRequest, ajaxOptions, thrownError) { // thrownError only passed if an error was caught this; // dom element listening } </pre>
Examples
Example:
Show a message when an AJAX request fails.
 $("#msg").ajaxError(function(event, request, settings){
   $(this).append("<li>Error requesting page " + settings.url + "</li>");
 });
Added
1.0
Timestamp: 2008-01-18T13:36:21Z, Build date: 06-09-2008 13:41


Function: ajaxSend

Reference

[Function] ajaxSend(callback)
Attach a function to be executed before an AJAX request is sent. This is an <a href='Ajax_Events'>Ajax Event</a>.

Signature
ajaxSend(callback) → jQuery
Description
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
Parameters
  • Function callback : The function to execute. <pre>function (event, XMLHttpRequest, ajaxOptions) { this; // dom element listening } </pre>
Examples
Example:
Show a message before an AJAX request is sent.
 $("#msg").ajaxSend(function(evt, request, settings){
   $(this).append("<li>Starting request at " + settings.url + "</li>");
 });
Added
1.0
Timestamp: 2007-12-15T18:07:20Z, Build date: 06-09-2008 13:41


Function: ajaxStart

Reference

[Function] ajaxStart(callback)
Attach a function to be executed whenever an AJAX request begins and there is none already active. This is an <a href='Ajax_Events'>Ajax Event</a>.

Signature
ajaxStart(callback) → jQuery
Parameters
  • Function callback : The function to execute. <pre>function () { this; // dom element listening } </pre>
Examples
Example:
Show a loading message whenever an AJAX request starts (and none is already active).
 $("#loading").ajaxStart(function(){
   $(this).show();
 });
Added
1.0
Timestamp: 2007-10-31T03:36:33Z, Build date: 06-09-2008 13:41


Function: ajaxStop

Reference

[Function] ajaxStop(callback)
Attach a function to be executed whenever all AJAX requests have ended. This is an <a href='Ajax_Events'>Ajax Event</a>.

Signature
ajaxStop(callback) → jQuery
Parameters
  • Function callback : The function to execute. <pre>function () { this; // dom element listening } </pre>
Examples
Example:
Hide a loading message after all the AJAX requests have stopped.
 $("#loading").ajaxStop(function(){
   $(this).hide();
 });
Added
1.0
Timestamp: 2007-10-31T03:35:25Z, Build date: 06-09-2008 13:41


Function: ajaxSuccess

Reference

[Function] ajaxSuccess(callback)
Attach a function to be executed whenever an AJAX request completes successfully. This is an <a href='Ajax_Events'>Ajax Event</a>.

Signature
ajaxSuccess(callback) → jQuery
Description
The event object, XMLHttpRequest, and settings used for that request are passed as arguments to the callback.
Parameters
  • Function callback : The function to execute. <pre>function (event, XMLHttpRequest, ajaxOptions) { this; // dom element listening } </pre>
Examples
Example:
Show a message when an AJAX request completes successfully.
 $("#msg").ajaxSuccess(function(evt, request, settings){
   $(this).append("<li>Successful Request!</li>");
 });
Added
1.0
Timestamp: 2007-12-15T18:08:19Z, Build date: 06-09-2008 13:41


Function: jQuery.ajaxSetup

Reference

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

Signature
jQuery.ajaxSetup(options)
Description
See <a href='Ajax/jQuery.ajax'>$.ajax</a> for a description of all available options.
Parameters
  • Options options : A set of key/value pairs that configure the default Ajax request. All options are optional.
Examples
Example:
Sets the defaults for AJAX requests to the url "/xmlhttp/", disables global handlers and uses POST instead of GET. The following AJAX requests then sends some data without having to set anything else.
 $.ajaxSetup({
   url: "/xmlhttp/",
   global: false,
   type: "POST"
 });
 $.ajax({ data: myData });
Added
1.1
Timestamp: 2008-03-22T05:18:56Z, Build date: 06-09-2008 13:41


Function: serialize

Reference

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

Signature
serialize() → jQuery
Description
Serialize is typically used to prepare user input data to be posted to a server. The serialized data is in a standard format that is compatible with almost all server side programming languages and frameworks. In order to work properly '''serialize requires that form fields have a name''' attribute. Having only an id will not work. Note the name attribute in this field: <input id="email" name="email" type="text" /> '''Versions''' As of jQuery 1.2 the serialize method correctly serializes forms. For older versions of jQuery, the [http://www.malsup.com/jquery/form/ Form Plugin's] fieldSerialize method should be used.
Examples
Example:
Serialize a form to a query string, that could be sent to a server in an Ajax request.
    function showValues() {
      var str = $("form").serialize();
      $("#results").text(str);
    }

    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();

<form>
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
    </select>
    <select name="multiple" multiple="multiple">
      <option selected="selected">Multiple</option>
      <option>Multiple2</option>
      <option selected="selected">Multiple3</option>
    </select><br/>
    <input type="checkbox" name="check" value="check1" id="ch1"/>
    <label for="ch1">check1</label>
    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
    <label for="ch2">check2</label>
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2"/>
    <label for="r2">radio2</label>
  </form>
  <p><tt id="results"></tt></p>

  body, select { font-size:12px; }
  form { margin:5px; }
  p { color:red; margin:5px; font-size:14px; }
  b { color:blue; }
Added
1.0
Timestamp: 2008-07-01T22:01:42Z, Build date: 06-09-2008 13:41


Function: serializeArray

Reference

[Function] serializeArray()
Serializes all forms and form elements (like the <a href='Ajax/serialize'>.serialize()</a> method) but returns a JSON data structure for you to work with.

Signature
serializeArray() → jQuery
Examples
Example:
Get the values from a form, iterate through them, and append them to a results display.
    function showValues() {
      var fields = $(":input").serializeArray();
      $("#results").empty();
      jQuery.each(fields, function(i, field){
        $("#results").append(field.value + " ");
      });
    }

    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();

<p><b>Results:</b> <span id="results"></span></p>
  <form>
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
    </select>
    <select name="multiple" multiple="multiple">
      <option selected="selected">Multiple</option>
      <option>Multiple2</option>
      <option selected="selected">Multiple3</option>
    </select><br/>
    <input type="checkbox" name="check" value="check1" id="ch1"/>
    <label for="ch1">check1</label>
    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
    <label for="ch2">check2</label>
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2"/>
    <label for="r2">radio2</label>
  </form>

  body, select { font-size:14px; }
  form { margin:5px; }
  p { color:red; margin:5px; }
  b { color:blue; }
Added
1.2
Timestamp: 2008-06-23T17:14:50Z, Build date: 06-09-2008 13:41


Function: jQuery.each

Reference

[Function] jQuery.each(object, callback)
A generic iterator function, which can be used to seamlessly iterate over both objects and arrays.

Signature
jQuery.each(object, callback) → Object
Description
This function is not the same as <a href='Core/each'>$().each()</a> - which is used to iterate, exclusively, over a jQuery object. This function can be used to iterate over anything. The callback has two arguments:the key (objects) or index (arrays) as the first, and the value as the second. If you wish to break the each() loop at a particular iteration you can do so by making your function return false. Other return values are ignored.
Parameters
  • Object object : The object or array to iterate over.
  • Function callback : The function that will be executed on every object. <pre>function callback(indexInArray, valueOfElement) { var booleanKeepGoing; this; // == valueOfElement (casted to Object) return booleanKeepGoing; // optional, unless false // and want to stop looping } </pre>
Examples
Example:
Iterates through the array displaying each number as both a word and numeral
    var arr = [ "one", "two", "three", "four", "five" ];
    var obj = { one:1, two:2, three:3, four:4, five:5 };

    jQuery.each(arr, function() {
      $("#" + this).text("My id is " + this + ".");
      return (this != "four"); // will stop running to skip "five"
    });

    jQuery.each(obj, function(i, val) {
      $("#" + i).append(document.createTextNode(" - " + val));
    });

<div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
  <div id="five"></div>

  div { color:blue; }
  div#five { color:red; }
Example:
Iterates over items in an array, accessing both the current item and its index.
 $.each( [0,1,2], function(i, n){
   alert( "Item #" + i + ": " + n );
 });
Example:
Iterates over the properties in an object, accessing both the current item and its key.
$.each( { name: "John", lang: "JS" }, function(i, n){
   alert( "Name: " + i + ", Value: " + n );
 });
Added
1.0
Timestamp: 2008-08-01T18:51:36Z, Build date: 06-09-2008 13:41


Function: jQuery.extend

Reference

[Function] jQuery.extend(target, object1, objectN)
Extend one object with one or more others, returning the original, modified, object.

Signature
jQuery.extend(target, object1, objectN) → Object
Description
If no target is specified, the JQuery namespace itself is extended. This can be useful for plugin authors wishing to add new methods to JQuery. If a boolean true is specified as the first argument, JQuery performs a deep copy, recursively copying any objects it finds. Otherwise, the copy will share structure with the original object(s). Undefined properties are not copied. However, properties inherited from the object's prototype ''will'' be copied over.
Parameters
  • Object target : The object to extend.
  • Object object1 : The object that will be merged into the first.
  • Object objectN : More objects to merge into the first.
Examples
Example:
Merge settings and options, modifying settings.
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
Example:
Merge defaults and options, without modifying the defaults.
var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);
Added
1.0
Timestamp: 2008-06-23T19:45:51Z, Build date: 06-09-2008 13:41


Function: jQuery.grep

Reference

[Function] jQuery.grep(array, callback, invert)
Filter items out of an array, by using a filter function.

Signature
jQuery.grep(array, callback, invert) → Array
Description
The filter function will be passed two arguments: The current array item and its index. The filter function must return 'true' to keep the item in the array.
Parameters
  • Array array : The Array to find items in.
  • Function callback : The function to process each item against. The first argument to the function is the list item, and the second argument is the list index. The function should return a Boolean value. The "lambda-form" function feature was removed in jQuery 1.2.3 to help compatibility with other frameworks. <pre>function callback(elementOfArray, indexInArray) { var shouldKeepIt; this; // == window return shouldKeepIt; } </pre>
  • Boolean invert : If "invert" is false, or not provided, then the function returns an array consisting of all elements for which "callback" returns true. If "invert" is true, then the function returns an array consisting of all elements for which "callback" returns false.
Examples
Example:
Filters the original array of numbers leaving that are not 5 and have an index greater than 3. Then it removes all 9s while inverting it.
    var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
    $("div").text(arr.join(", "));

    arr = jQuery.grep(arr, function(n, i){
      return (n != 5 && i > 4);
    });
    $("p").text(arr.join(", "));

    arr = jQuery.grep(arr, function (a) { return a != 9; });
    $("span").text(arr.join(", "));

<div></div>
  <p></p>
  <span></span>

  div { color:blue; }
  p { color:green; margin:0; }
  span { color:red; }
Example:
Filter an array of numbers to include only numbers bigger then zero.
$.grep( [0,1,2], function(n,i){
   return n > 0;
 });
Added
1.0
Timestamp: 2008-07-09T14:12:58Z, Build date: 06-09-2008 13:41


Function: jQuery.makeArray

Reference

[Function] jQuery.makeArray(obj)
Turns anything into a true array.

Signature
jQuery.makeArray(obj) → Array
Description
Typically it will be unnecessary to use this function if you are using jQuery which uses this function internally.
Parameters
  • Object obj : Anything to turn in to an actual Array.
Examples
Example:
Turn a collection of HTMLElements into an Array of them.
    var arr = jQuery.makeArray(document.getElementsByTagName("div"));
    arr.reverse(); // use an Array method on list of dom elements
    $(arr).appendTo(document.body);

<div>First</div>
  <div>Second</div>
  <div>Third</div>
  <div>Fourth</div>

  div { color:red; }
Added
1.2
Timestamp: 2008-06-08T19:53:41Z, Build date: 06-09-2008 13:41


Function: jQuery.map

Reference

[Function] jQuery.map(array, callback)
Translate all items in an array to another array of items.

Signature
jQuery.map(array, callback) → Array
Description
The translation function that is provided to this method is called for each item in the array and is passed two arguments: The item to be translated, and its index within the array. The function can then return the translated value, 'null' (to remove the item), or an array of values - which will be flattened into the full array.
Parameters
  • Array array : The Array to translate.
  • Function callback : The function to process each item against. The argument to the function is the list item. The function can return any value. The "lambda-form" function represented as a string no longer works. It was removed in version 1.2.3 to increase compatibility with Adobe AIR. <pre>function callback(elementOfArray, indexInArray) { var replacementValue; this; // unmapped return replacementValue; } </pre>
Examples
Example:
A couple examples of using .map()
    var arr = [ "a", "b", "c", "d", "e" ]
    $("div").text(arr.join(", "));

    arr = jQuery.map(arr, function(n, i){
      return (n.toUpperCase() + i);
    });
    $("p").text(arr.join(", "));

    arr = jQuery.map(arr, function (a) { return a + a; });
    $("span").text(arr.join(", "));

<div></div>
  <p></p>
  <span></span>

  div { color:blue; }
  p { color:green; margin:0; }
  span { color:red; }
Example:
Maps the original array to a new one and adds 4 to each value.
$.map( [0,1,2], function(n){
   return n + 4;
 });
Example:
Maps the original array to a new one and adds 1 to each value if it is bigger then zero, otherwise it's removed.
$.map( [0,1,2], function(n){
   return n > 0 ? n + 1 : null;
 });
Example:
Maps the original array to a new one, each element is added with it's original value and the value plus one.
$.map( [0,1,2], function(n){
   return [ n, n + 1 ];
 });
Example:
Maps the original array to a new one, each element is squared.
$.map( [0,1,2,3], function (a) { return a * a; } );
Added
1.0
Timestamp: 2008-05-24T03:59:01Z, Build date: 06-09-2008 13:41


Function: jQuery.inArray

Reference

[Function] jQuery.inArray(value, array)
Determine the index of the first parameter in the Array (-1 if not found).

Signature
jQuery.inArray(value, array) → Number
Parameters
  • Any value : Value to see if it exists in the array.
  • Array array : Array to look through for the value.
Examples
Example:
    var arr = [ 4, "Pete", 8, "John" ];

    $("span:eq(0)").text(jQuery.inArray("John", arr));
    $("span:eq(1)").text(jQuery.inArray(4, arr));
    $("span:eq(2)").text(jQuery.inArray("David", arr));

<div>"John" found at <span></span></div>
  <div>4 found at <span></span></div>
  <div>"David" found at <span></span></div>

  div { color:blue; }
  span { color:red; }
Added
1.2
Timestamp: 2007-10-30T05:08:17Z, Build date: 06-09-2008 13:41


Function: jQuery.unique

Reference

[Function] jQuery.unique(array)
Remove all duplicate elements from an array of elements.

Signature
jQuery.unique(array) → Array
Parameters
  • Array array : The Array to translate.
Examples
Example:
Removes any duplicate elements from the array of divs.
    var divs = $("div").get();

    // add 3 elements of class dup too (they are divs)
    divs = divs.concat($(".dup").get());
    $("div:eq(1)").text("Pre-unique there are " + divs.length + " elements.");

    divs = jQuery.unique(divs);
    $("div:eq(2)").text("Post-unique there are " + divs.length + " elements.")
                  .css("color", "red");

<div>There are 6 divs in this document.</div>
  <div></div>
  <div class="dup"></div>
  <div class="dup"></div>
  <div class="dup"></div>
  <div></div>

  div { color:blue; }
Example:
Removes any duplicate elements from the array of divs.
$.unique(document.getElementsByTagName("div"));
Added
1.1.3
Timestamp: 2007-10-11T23:08:12Z, Build date: 06-09-2008 13:41


Function: jQuery.isFunction

Reference

[Function] jQuery.isFunction(obj)
Determine if the parameter passed is a function.

Signature
jQuery.isFunction(obj) → boolean
Parameters
  • Object obj : Object to test whether or not it is a function.
Examples
Example:
Test a few parameter examples.
    function stub() {
    }
    var objs = [
          function () {},
          { x:15, y:20 },
          null,
          stub,
          "function"
        ];

    jQuery.each(objs, function (i) {
      var isFunc = jQuery.isFunction(objs[i]);
      $("span:eq( " + i + ")").text(isFunc);
    });

  <div>jQuery.isFunction(objs[0]) = <span></span></div>
  <div>jQuery.isFunction(objs[1]) = <span></span></div>
  <div>jQuery.isFunction(objs[2]) = <span></span></div>
  <div>jQuery.isFunction(objs[3]) = <span></span></div>
  <div>jQuery.isFunction(objs[4]) = <span></span></div>

  div { color:blue; margin:2px; font-size:14px; }
  span { color:red; }
Example:
Finds out if the parameter is a funcion.
$.isFunction(function(){});
Added
1.2
Timestamp: 2007-10-30T04:08:08Z, Build date: 06-09-2008 13:41


Function: jQuery.trim

Reference

[Function] jQuery.trim(str)
Remove the whitespace from the beginning and end of a string.

Signature
jQuery.trim(str) → String
Description
Uses a regular expression to remove whitespace from the given string.
Parameters
  • String str : The string to trim.
Examples
Example:
Removes the two whitespaces at the start and at the end of the string.
    $("button").click(function () {
      var str = "     lots of spaces before and after     ";
      alert("'" + str + "'");

      str = jQuery.trim(str);
      alert("'" + str + "' - no longer");
    });

<button>Show Trim Example</button>
Example:
Removes the two whitespaces at the start and at the end of the string.
 $.trim("  hello, how are you?  ");
Added
1.0
Timestamp: 2007-10-11T23:06:18Z, Build date: 06-09-2008 13:41


Function: jQuery.data

Reference

[Function] jQuery.data(elem)
Returns a unique ID for the element.

Signature
jQuery.data(elem) → Number
Description
Typically this function will only be used internally. It is called automatically when necessary when using the other data() functionality.
Parameters
  • Element elem : DOM element of interest.
Examples
Example:
Get the store id of an element. It is assigned on the data() function call if one hasn't been assigned yet.
    $(document.body).click(function(e) {
      var id = jQuery.data(e.target);
      $("span").text(id);
    });

<div>A div</div>
  <div>Another</div>
  <p>The id of this div is <span>?</span></p>

  div { margin:5px; background:yellow; }
  p { margin:5px; color:blue; }
  span { color:red; }
Added
1.2
Timestamp: 2007-10-30T10:55:01Z, Build date: 06-09-2008 13:41


Function: jQuery.data

Reference

[Function] jQuery.data(elem, name)
Returns value at named data store for the element.

Signature
jQuery.data(elem, name) → Any
Parameters
  • Element elem : DOM element of interest.
  • String name : Name of the data stored.
Examples
Example:
Get the data named "blah" stored at for an element.
    $("button").click(function(e) {
      var adiv = $("div").get(0);
      var value;

      switch ($("button").index(this)) {
        case 0 :
          value = jQuery.data(adiv, "blah");
          break;
        case 1 :
          jQuery.data(adiv, "blah", "hello");
          value = "Stored!";
          break;
        case 2 :
          jQuery.data(adiv, "blah", 86);
          value = "Stored!";
          break;
        case 3 :
          jQuery.removeData(adiv);
          value = "Removed!";
          break;
      }

      $("span").text("" + value);
    });

<div>A div</div>
  <button>Get "blah" from the div</button>
  <button>Set "blah" to "hello"</button>
  <button>Set "blah" to 86</button>
  <button>Remove "blah" from the div</button>
  <p>The "blah" value of this div is <span>?</span></p>

  div { margin:5px; background:yellow; }
  button { margin:5px; font-size:14px; }
  p { margin:5px; color:blue; }
  span { color:red; }
Added
1.2
Timestamp: 2007-10-30T10:55:01Z, Build date: 06-09-2008 13:41


Function: jQuery.data

Reference

[Function] jQuery.data(elem, name, value)
Stores the value in the named spot and also returns the value.

Signature
jQuery.data(elem, name, value) → Any
Description
This function can be useful for attaching data to elements without having to create a new expando. It also isn't limited to a string. The value can be any format. To avoid conflicts in plugins, it is usually effective to store one object using the plugin name and put all the necessary information in that object. <code> var obj = jQuery.data($("#target").get(0), "pluginname", {}); obj[...] = ... </code>
Parameters
  • Element elem : DOM element of interest.
  • String name : Name of the data to store.
  • Any value : Value to be stored.
Examples
Example:
Store then retrieve a value from the div element.
    var adiv = $("div").get(0);
    jQuery.data(adiv, "test", { first: 16, last: "pizza!" });
    $("span:first").text(jQuery.data(adiv, "test").first);
    $("span:last").text(jQuery.data(adiv, "test").last);

<div>
    The values stored were
    <span></span>
    and
    <span></span>
  </div>

  div { color:blue; }
  span { color:red; }
Added
1.2
Timestamp: 2007-10-30T10:55:01Z, Build date: 06-09-2008 13:41


Function: jQuery.removeData

Reference

[Function] jQuery.removeData(elem)
Remove the expando attribute that allows data storage on an element.

Signature
jQuery.removeData(elem)
Description
This is the complement function to jQuery.data(elem) which is called as necessary by jQuery.data(elem, name, value).
Parameters
  • Element elem : Element to delete the data store from.
Examples
Example:
Set a data store then remove it.
    var adiv = $("div").get(0);

    $("span:eq(0)").text("" + jQuery.data(adiv, "test1"));
    jQuery.data(adiv, "test1", "VALUE-1");
    jQuery.data(adiv, "test2", "VALUE-2");
    $("span:eq(1)").text("" + jQuery.data(adiv, "test1"));
    jQuery.removeData(adiv);
    $("span:eq(2)").text("" + jQuery.data(adiv, "test1"));
    $("span:eq(3)").text("" + jQuery.data(adiv, "test2"));

<div>value1 before creation: <span></span></div>
  <div>value1 after creation: <span></span></div>
  <div>value1 after removal: <span></span></div>
  <div>value2 after removal: <span></span></div>

  div { margin:2px; color:blue; }
  span { color:red; }
Added
1.2
Timestamp: 2007-11-29T03:09:45Z, Build date: 06-09-2008 13:41


Function: jQuery.removeData

Reference

[Function] jQuery.removeData(elem, name)
Removes just this one named data store.

Signature
jQuery.removeData(elem, name)
Description
This is the complement function to jQuery.data(elem, name, value).
Parameters
  • Element elem : Element to delete the named data store property from.
  • String name : The name of the data store property to remove.
Examples
Example:
Set a data store for 2 names then remove one of them.
    var adiv = $("div").get(0);

    $("span:eq(0)").text("" + jQuery.data(adiv, "test1"));
    jQuery.data(adiv, "test1", "VALUE-1");
    jQuery.data(adiv, "test2", "VALUE-2");
    $("span:eq(1)").text("" + jQuery.data(adiv, "test1"));
    jQuery.removeData(adiv, "test1");
    $("span:eq(2)").text("" + jQuery.data(adiv, "test1"));
    $("span:eq(3)").text("" + jQuery.data(adiv, "test2"));

<div>value1 before creation: <span></span></div>
  <div>value1 after creation: <span></span></div>
  <div>value1 after removal: <span></span></div>
  <div>value2 after removal: <span></span></div>

  div { margin:2px; color:blue; }
  span { color:red; }
Added
1.2
Timestamp: 2007-11-29T03:09:45Z, Build date: 06-09-2008 13:41


Function: jQuery.param

Reference

[Function] jQuery.param(obj)
Serializes an array of form elements or an object (core of <a href='Ajax/serialize'>.serialize()</a> method).

Signature
jQuery.param(obj) → String
Parameters
  • Array, jQuery, Object obj : An Array or jQuery object is serialized by name/value pairs. An object by key/value pairs.
Examples
Example:
Serialize a key/value object.
    var params = { width:1680, height:1050 };
    var str = jQuery.param(params);
    $("#results").text(str);

<div id="results"></div>

div { color:red; }
Added
1.2
Timestamp: 2007-10-30T12:38:40Z, Build date: 06-09-2008 13:41


Function: draggable

Reference

[Function] draggable(options)
Creates new draggables on the nodeset supplied by the query.

Signature
draggable(options) → jQuery
Description
This jQuery plugin makes DOM nodes draggable by mouse. You can additionally supply a great range of options to make them fit your needs. All callbacks (start,stop,drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): * '''ui.options''' - options used to initialize the draggable * '''ui.helper''' - the JQuery object representing the helper that's being dragged * '''ui.position''' - current position of the helper as { top, left } object, relative to the offset element * '''ui.absolutePosition''' - current absolute position of the helper as { top, left } object, relative to page
Parameters
  • Options options : A set of key/value pairs that configure the draggable. All options are optional.
Examples
Example:
Makes the div draggable.
$(".block").draggable();

<div class="block"></div>

  .block {
    border: 2px solid #0090DF;
    background-color: #68BFEF;
    width: 150px;
    height: 70px;
    margin: 10px;
  }
Example:
Makes the div draggable.
$(".block").draggable();

<div class="block"></div>

  .block {
    border: 2px solid #0090DF;
    background-color: #68BFEF;
    width: 150px;
    height: 70px;
    margin: 10px;
  }
Timestamp: 2008-08-15T14:49:52Z, Build date: 06-09-2008 13:41


Function: draggable

Reference

[Function] draggable("disable")
Temporarily disable the draggable functionality.

Signature
draggable("disable") → jQuery
Description
This method temporarily disables draggable functionality. It can later be reenabled by calling $(..).draggable("enable").
Parameters
  • String "disable" :
Examples
Example:
Makes the div draggable.
$(".block").draggable();

<div class="block"></div>

  .block {
    border: 2px solid #0090DF;
    background-color: #68BFEF;
    width: 150px;
    height: 70px;
    margin: 10px;
  }
Timestamp: 2008-08-15T14:49:52Z, Build date: 06-09-2008 13:41


Function: draggable

Reference

[Function] draggable("enable")
Enable the draggable functionality.

Signature
draggable("enable") → jQuery
Description
This method re-enables a previously disabled draggable.
Parameters
  • String "enable" :
Timestamp: 2008-08-15T14:49:52Z, Build date: 06-09-2008 13:41


Function: draggable

Reference

[Function] draggable("destroy")
Completely remove the draggable functionality.

Signature
draggable("destroy") → jQuery
Description
This method removes the draggable functionality completely.
Parameters
  • String "destroy" :
Timestamp: 2008-08-15T14:49:52Z, Build date: 06-09-2008 13:41


Function: droppable

Reference

[Function] droppable(options)
Creates new droppables on the nodeset supplied by the query.

Signature
droppable(options) → Dropset
Description
This jQuery plugin makes DOM nodes droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept. All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): * '''ui.options''' - options used to initialize the droppable * '''ui.position''' - current position of the draggable helper * '''ui.absolutePosition''' - current absolute position of the draggable helper * '''ui.draggable''' - current draggable element * '''ui.helper''' - current draggable helper
Parameters
  • Options options : A set of key/value pairs that configure the droppable. All options are optional.
Timestamp: 2008-06-24T00:38:31Z, Build date: 06-09-2008 13:41


Function: droppable

Reference

[Function] droppable("disable")
Temporarily disable the droppable functionality.

Signature
droppable("disable") → jQuery
Description
This method temporarily disables droppable functionality. It can later be reenabled by calling $(..).droppable("enable").
Parameters
  • String "disable" :
Timestamp: 2008-06-24T00:38:31Z, Build date: 06-09-2008 13:41


Function: droppable

Reference

[Function] droppable("enable")
Enable the droppable functionality.

Signature
droppable("enable") → jQuery
Description
This method re-enables a previously disabled droppable.
Parameters
  • String "enable" :
Timestamp: 2008-06-24T00:38:31Z, Build date: 06-09-2008 13:41


Function: droppable

Reference

[Function] droppable("destroy")
Completely remove the droppable functionality.

Signature
droppable("destroy") → jQuery
Description
This method removes the droppable functionality completely.
Parameters
  • String "destroy" :
Timestamp: 2008-06-24T00:38:31Z, Build date: 06-09-2008 13:41


Function: sortable

Reference

[Function] sortable(options)
Creates new sortable on the nodeset supplied by the query.

Signature
sortable(options)
Description
This jQuery plugin makes DOM nodes sortable by mouse. You can additionally supply a great range of options to make them fit your needs. All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): * '''ui.options''' - options used to initialize the sortable * '''ui.position''' - current position of the helper * '''ui.absolutePosition''' - current absolute position of the helper * '''ui.helper''' - the current helper element (most often a clone of the item) * '''ui.placeholder''' - the placeholder (if you defined one) * '''ui.item''' - the sortable items (default: ''> *'') * '''ui.sender''' -
Parameters
  • Options options : A set of key/value pairs that configure the sortable. All options are optional.
Timestamp: 2008-09-06T05:27:40Z, Build date: 06-09-2008 13:41


Function: sortable

Reference

[Function] sortable("disable")
Temporarily disable the sortable functionality.

Signature
sortable("disable") → jQuery
Description
This method temporarily disables sortable functionality. It can later be reenabled by calling $(..).sortable("enable").
Parameters
  • String "disable" :
Timestamp: 2008-09-06T05:27:40Z, Build date: 06-09-2008 13:41


Function: sortable

Reference

[Function] sortable("enable")
Enable the sortable functionality.

Signature
sortable("enable") → jQuery
Description
This method re-enables a previously disabled sortable.
Parameters
  • String "enable" :
Timestamp: 2008-09-06T05:27:40Z, Build date: 06-09-2008 13:41


Function: sortable

Reference

[Function] sortable("destroy")
Completely remove the sortable functionality.

Signature
sortable("destroy") → jQuery
Description
This method removes the sortable functionality completely.
Parameters
  • String "destroy" :
Timestamp: 2008-09-06T05:27:40Z, Build date: 06-09-2008 13:41


Function: sortable

Reference

[Function] sortable("serialize", options)
Serializes the sortable's item id's into a form/ajax submittable string.

Signature
sortable("serialize", options) → String
Description
Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server. It works by default by looking at the id of each item in the format 'setname_number', and it spits out a hash like "setname[]=number&setname[]=number". You can also give in a second argument to custom define how the function works. If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2 will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1 or foo-1 or foo_1 all serialize to foo[]=1.
Parameters
  • String "serialize" :
  • Hash options : a key/value hash defining how serialize works.
Timestamp: 2008-09-06T05:27:40Z, Build date: 06-09-2008 13:41


Function: sortable

Reference

[Function] sortable("refresh")
Refresh the sortable items.

Signature
sortable("refresh") → jQuery
Description
Custom trigger the reloading of all sortable items, causing new items to be recognized.
Parameters
  • String "refresh" :
Timestamp: 2008-09-06T05:27:40Z, Build date: 06-09-2008 13:41


Function: sortable

Reference

[Function] sortable("refreshPositions")
Refresh the cached positions of the sortables' items.

Signature
sortable("refreshPositions") → jQuery
Description
Calling this method refreshes the cached item positions of all sortables. This is usually done automatically by the script and slows down performance. Use wisely.
Parameters
  • String "refreshPositions" :
Timestamp: 2008-09-06T05:27:40Z, Build date: 06-09-2008 13:41


Function: selectable

Reference

[Function] selectable(options)
Creates new selectable on the nodeset supplied by the query.

Signature
selectable(options)
Parameters
  • Options options : A set of key/value pairs that configure the selectable. All options are optional.
Timestamp: 2008-06-09T12:16:20Z, Build date: 06-09-2008 13:41


Function: selectable

Reference

[Function] selectable("disable")
Temporarily disable the selectable functionality.

Signature
selectable("disable") → jQuery
Description
This method temporarily disables selectable functionality. It can later be reenabled by calling $(..).selectable("enable").
Parameters
  • String "disable" :
Timestamp: 2008-06-09T12:16:20Z, Build date: 06-09-2008 13:41


Function: selectable

Reference

[Function] selectable("enable")
Enable the selectable functionality.

Signature
selectable("enable") → jQuery
Description
This method re-enables a previously disabled selectable.
Parameters
  • String "enable" :
Timestamp: 2008-06-09T12:16:20Z, Build date: 06-09-2008 13:41


Function: selectable

Reference

[Function] selectable("refresh")
Refresh the position and size of each selectee element

Signature
selectable("refresh") → jQuery
Description
This method can be used to manually recalculate the position and size of each selectee element. Very useful if autoRefresh is set to false.
Parameters
  • String "refresh" :
Timestamp: 2008-06-09T12:16:20Z, Build date: 06-09-2008 13:41


Function: selectable

Reference

[Function] selectable("toggle")
Toggles the state of selectable functionality.

Signature
selectable("toggle") → jQuery
Description
This method either enables or disables selecting based on the current state.
Parameters
  • String "toggle" :
Timestamp: 2008-06-09T12:16:20Z, Build date: 06-09-2008 13:41


Function: selectable

Reference

[Function] selectable("destroy")
Completely remove the selectable functionality.

Signature
selectable("destroy") → jQuery
Description
This method removes the selectable functionality completely.
Parameters
  • String "destroy" :
Timestamp: 2008-06-09T12:16:20Z, Build date: 06-09-2008 13:41


Function: resizable

Reference

[Function] resizable(options)
Creates new resizables on the nodeset supplied by the query.

Signature
resizable(options)
Description
This jQuery plugin makes DOM nodes resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height. All callbacks (start,stop,drag) receive two arguments: The original browser event and a prepared ui object. The ui object has the following fields: * '''ui.element''' - a jQuery object containing the resizable element * '''ui.helper''' - a jQuery object containing the helper element * '''ui.options''' - options used to initialize the resizable * '''ui.originalPosition''' - {top, left} before resizing started * '''ui.originalSize''' - {width, height} before resizing started * '''ui.position''' - {top, left} before resizing started * '''ui.size''' - {width, height} before resizing started
Parameters
  • Options options : A set of key/value pairs that configure the resizable. All options are optional, but a resizable will not be useful without at least one handle.
Timestamp: 2008-07-23T19:40:19Z, Build date: 06-09-2008 13:41


Function: resizable

Reference

[Function] resizable("disable")
Temporarily disable the resizable functionality.

Signature
resizable("disable") → jQuery
Description
This method temporarily disables resizable functionality. It can later be reenabled by calling $(..).resizable("enable").
Parameters
  • String "disable" :
Timestamp: 2008-07-23T19:40:19Z, Build date: 06-09-2008 13:41


Function: resizable

Reference

[Function] resizable("enable")
Enable the resizable functionality.

Signature
resizable("enable") → jQuery
Description
This method re-enables a previously disabled resizable.
Parameters
  • String "enable" :
Timestamp: 2008-07-23T19:40:19Z, Build date: 06-09-2008 13:41


Function: resizable

Reference

[Function] resizable("destroy")
Completely remove the resizable functionality.

Signature
resizable("destroy") → jQuery
Description
This method removes the resizable functionality completely.
Parameters
  • String "destroy" :
Timestamp: 2008-07-23T19:40:19Z, Build date: 06-09-2008 13:41


Function: accordion

Reference

[Function] accordion(options)
Make the selected elements Accordion widgets.

Signature
accordion(options) → jQuery
Description
Semantic requirements: If the structure of your container is flat with unique tags for header and content elements, eg. a definition list (dl > dt + dd), you don't have to specify any options at all. If your structure uses the same elements for header and content or uses some kind of nested structure, you have to specify the header elements, eg. via class, see the second example. Use activate(Number) to change the active content programmatically. A "accordionchange" event is triggered every time the accordion changes. If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately. <pre>$(".ui-accordion").bind("accordionchange", function(event, ui) { ui.options // options used to intialize this widget ui.newHeader // jQuery, activated header ui.oldHeader // jQuery, previous header ui.newContent // jQuery, activated content ui.oldContent // jQuery, previous content });</pre>
Parameters
  • Options options : A set of key/value pairs that configure the accordion. All options are optional.
Examples
Example:
A simple jQuery UI Accordion.
$("#example").accordion();

<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.accordion.js"></script>

    <ul id="example" class="ui-accordion-container" style="width: 200px;">
        <li>
            <a href='#' class="ui-accordion-link">
                Test 1
            </a>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<a href="#"> hello  </a>
            </div>

        </li>
        <li>
            <div class="ui-accordion-left"></div>
            <a href='#' class="ui-accordion-link">Test 2<div class="ui-accordion-right"></div></a>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </li>
        <li>
            <div class="ui-accordion-left"></div>

            <a href='#' class="ui-accordion-link">Test 3<div class="ui-accordion-right"></div></a>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </li>
    </ul>
Timestamp: 2008-07-09T15:33:39Z, Build date: 06-09-2008 13:41


Function: accordion

Reference

[Function] accordion("activate", index)
Activate a content part of the Accordion programmatically.

Signature
accordion("activate", index) → jQuery
Description
The index can be a zero-indexed number to match the position of the header to close or a string expression matching an element. Pass -1 to close all (only possible with alwaysOpen:false).
Parameters
  • String "activate" :
  • String, Element, jQuery, Boolean, Number index : An Integer specifying the zero-based index of the content to be activated or an expression specifying the element, or an element/jQuery object, or a boolean false to close all.
Examples
Example:
Activate the second content of the Accordion contained in <div id="accordion">.
$(".selector").accordion("activate", 1)
Example:
Close all content parts of the accordion.
$(".selector").accordion("activate", false)
Example:
Activate the first element matching the given expression.
$(".selector").accordion("activate", "a:first")
Timestamp: 2008-07-09T15:33:39Z, Build date: 06-09-2008 13:41


Function: accordion

Reference

[Function] accordion("enable")
Enable the selected accordion.

Signature
accordion("enable") → jQuery
Description
Enabling an accordion reverts the change made by accordion("disable"), turning the behaviour back to the usual state.
Parameters
  • String "enable" :
Examples
Example:
Activate the second content of the Accordion contained in <div id="accordion">.
$(".selector").accordion("enable")
Timestamp: 2008-07-09T15:33:39Z, Build date: 06-09-2008 13:41


Function: accordion

Reference

[Function] accordion("disable")
Disables the selected accordion.

Signature
accordion("disable") → jQuery
Description
Disabling an accordion turns of the ability to close or open anything in the accordion, it disables all interactions. To completely remove the accordion behaviour, including visual changes, use <a href='UI/Accordion/accordion#.22destroy.22'>accordion("destroy")</a>.
Parameters
  • String "disable" :
Examples
Example:
Activate the second content of the Accordion contained in <div id="accordion">.
$(".selector").accordion("disable")
Timestamp: 2008-07-09T15:33:39Z, Build date: 06-09-2008 13:41


Function: accordion

Reference

[Function] accordion("destroy")
Destroy the selected accordion.

Signature
accordion("destroy") → jQuery
Description
Destroying the accordion completely reverts changes made by accordion), including events and styles. To just temporily disable the behaviour of an accordion, use <a href='UI/Accordion/accordion#.22disable.22'>accordion("disable")</a>.
Parameters
  • String "destroy" :
Examples
Example:
Activate the second content of the Accordion contained in <div id="accordion">.
$(".selector").accordion("disable")
Timestamp: 2008-07-09T15:33:39Z, Build date: 06-09-2008 13:41


Function: autocomplete

Reference

[Function] autocomplete(options)
Make the selected elements Autocomplete.

Signature
autocomplete(options) → jQuery
Parameters
  • Options options : A set of key/value pairs that configure the autocomplete. All options are optional.
Timestamp: 2008-07-31T17:57:50Z, Build date: 06-09-2008 13:41


Function: autocomplete

Reference

[Function] autocomplete("result", handler)
Handle the result of a search event.

Signature
autocomplete("result", handler) → jQuery
Description
Is executed when the user selects a value or a programmatic search event is triggered (see 'search'). You can add and remove (using unbind("result")) this event at any time.
Parameters
  • String "result" :
  • Function handler : The event handler, gets a default event object as first and the selected list item as second argument.
Examples
Example:
Bind a handler to the result event to display the selected value in a #result element. The first argument is a generic event object, in this case with type "result". The second argument refers to the selected data, which can be a plain string value or an array or object. The third argument is the formatted value that is inserted into the input field.
$('input#suggest').autocomplete("result",function(event, data, formatted) {
  $("#result").html( !data ? "No match!" : "Selected: " + formatted);
 });
Timestamp: 2008-07-31T17:57:50Z, Build date: 06-09-2008 13:41


Function: autocomplete

Reference

[Function] autocomplete("search")
Trigger a search event.

Signature
autocomplete("search") → jQuery
Description
See 'result' for binding to that event. A search event mimics the same behaviour as when the user selects a value from the list of autocomplete items. You can use it to execute anything that does something with the selected value, beyond simply putting the value into the input and submitting it.
Parameters
  • String "search" :
Timestamp: 2008-07-31T17:57:50Z, Build date: 06-09-2008 13:41


Function: autocomplete

Reference

[Function] autocomplete("flushCache")
Flush (empty) the cache of matched input's autocompleters.

Signature
autocomplete("flushCache") → jQuery
Parameters
  • String "flushCache" :
Timestamp: 2008-07-31T17:57:50Z, Build date: 06-09-2008 13:41


Function: autocomplete

Reference

[Function] autocomplete("setData", options)
Updates the options for the current autocomplete field.

Signature
autocomplete("setData", options) → jQuery
Description
This allows you to change things like the URL, max items to display, etc. If you're changing the URL, be sure to call the 'flushCache' method.
Parameters
  • String "setData" :
  • Options options : The options to set.
Timestamp: 2008-07-31T17:57:50Z, Build date: 06-09-2008 13:41


Function: autocomplete

Reference

[Function] autocomplete("destroy")
Completely remove the autocomplete.

Signature
autocomplete("destroy") → jQuery
Description
This method removes the autocomplete completely.
Parameters
  • String "destroy" :
Timestamp: 2008-07-31T17:57:50Z, Build date: 06-09-2008 13:41


Function: colorpicker

Reference

[Function] colorpicker(options)
Make the selected elements colorpicker.

Signature
colorpicker(options) → jQuery
Parameters
  • Options options : A set of key/value pairs that configure the colorpicker. All options are optional.
Timestamp: 2008-08-17T08:53:25Z, Build date: 06-09-2008 13:41


Function: colorpicker

Reference

[Function] colorpicker("setColor", color)
Set a new color.

Signature
colorpicker("setColor", color) → jQuery
Description
This method set a new color.
Parameters
  • String "setColor" :
  • String or Object color : The 'color' argument is the same format as the option color, string for hex color or hash for RGB and HSB ({r:255, r:0, b:0}).
Timestamp: 2008-08-17T08:53:25Z, Build date: 06-09-2008 13:41


Function: colorpicker

Reference

[Function] colorpicker("destroy")
Completely remove the colorpicker.

Signature
colorpicker("destroy") → jQuery
Description
This method removes the colorpicker completely.
Parameters
  • String "destroy" :
Timestamp: 2008-08-17T08:53:25Z, Build date: 06-09-2008 13:41


Function: datepicker

Reference

[Function] datepicker(options)
The method that you use to create a new date picker. Customize with plenty of options.

Signature
datepicker(options) → jQuery
Description
Attach the date picker to an input or for an inline view attach the date picker to a div or span.
Parameters
  • Options options : A set of key/value pairs that configure the date picker. All options are optional.
Timestamp: 2008-07-28T18:36:45Z, Build date: 06-09-2008 13:41


Function: datepicker

Reference

[Function] datepicker("change", settings)
Change the settings for a previously attached datepicker.

Signature
datepicker("change", settings) → jQuery
Parameters
  • String "change" :
  • Options settings : The new settings for these date pickers. These are the same as when <a href='UI/Datepicker/datepicker'>attaching a datepicker</a>.
Timestamp: 2008-07-28T18:36:45Z, Build date: 06-09-2008 13:41


Function: datepicker

Reference

[Function] datepicker("dialog", dateText, onSelect, settings, pos)
Open a datepicker in a "dialog" box.

Signature
datepicker("dialog", dateText, onSelect, settings, pos) → jQuery
Parameters
  • String "dialog" :
  • String dateText : The initial date for the date picker.
  • Function onSelect : A callback function when a date is selected. The function receives the date text and date picker instance as parameters.
  • Options settings : The new settings for the date picker.
  • Number[2] or MouseEvent pos : The position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.
Timestamp: 2008-07-28T18:36:45Z, Build date: 06-09-2008 13:41


Function: datepicker

Reference

[Function] datepicker("disable")
Disable an input field and its attached date picker.

Signature
datepicker("disable") → jQuery
Parameters
  • String "disable" :
Timestamp: 2008-07-28T18:36:45Z, Build date: 06-09-2008 13:41


Function: datepicker

Reference

[Function] datepicker("enable")
Enable an input field and its attached date picker.

Signature
datepicker("enable") → jQuery
Parameters
  • String "enable" :
Timestamp: 2008-07-28T18:36:45Z, Build date: 06-09-2008 13:41


Function: datepicker

Reference

[Function] datepicker("isDisabled")
Determine whether a date picker has been disabled.

Signature
datepicker("isDisabled") → boolean
Description
Only the first control is processed.
Parameters
  • String "isDisabled" :
Timestamp: 2008-07-28T18:36:45Z, Build date: 06-09-2008 13:41


Function: datepicker

Reference

[Function] datepicker("hide", speed)
Close a previously opened date picker.

Signature
datepicker("hide", speed) → jQuery
Parameters
  • String "hide" :
  • String speed : The speed at which to close the date picker (optional).
Timestamp: 2008-07-28T18:36:45Z, Build date: 06-09-2008 13:41


Function: datepicker

Reference

[Function] datepicker("show")
Call up a previously attached date picker.

Signature
datepicker("show") → jQuery
Description
Only the first entry in the jQuery collection is processed.
Parameters
  • String "show" :
Timestamp: 2008-07-28T18:36:45Z, Build date: 06-09-2008 13:41


Function: datepicker

Reference

[Function] datepicker("destroy")
Disconnect the datepicker functionality from its associated control.

Signature
datepicker("destroy") → jQuery
Parameters
  • String "destroy" :
Timestamp: 2008-07-28T18:36:45Z, Build date: 06-09-2008 13:41


Function: datepicker

Reference

[Function] datepicker("getDate")
Retrieve the current date(s) for a datepicker.

Signature
datepicker("getDate") → Date or Date[2]
Description
Returns the current date for the datepicker attached to the first control, or an array of two dates for a range.
Parameters
  • String "getDate" :
Timestamp: 2008-07-28T18:36:45Z, Build date: 06-09-2008 13:41


Function: datepicker

Reference

[Function] datepicker("setDate", date, endDate)
Set the current date(s) for a datepicker.

Signature
datepicker("setDate", date, endDate) → jQuery
Description
Returns the current date for the datepicker attached to the first control, or an array of two dates for a range.
Parameters
  • String "setDate" :
  • Date date : The new current date.
  • Date endDate : The new end date for a date range (optional).
Timestamp: 2008-07-28T18:36:45Z, Build date: 06-09-2008 13:41


Function: $.datepicker.setDefaults

Reference

[Function] $.datepicker.setDefaults(settings)
Change the default settings for all date pickers

Signature
$.datepicker.setDefaults(settings) → Datepicker
Parameters
  • Options settings : The new settings for all date pickers. See the <a href='UI/Datepicker/datepicker'>datepicker options</a>.
Examples
Example:
Set all date pickers to open on focus or a click on an icon.
$.datepicker.setDefaults({
    showOn: 'both',
    buttonImageOnly: true,
    buttonImage: 'calendar.gif',
    buttonText: 'Calendar' });
Example:
Set all date pickers to have French text.
$.datepicker.setDefaults($.datepicker.regional['fr']);
Timestamp: 2008-01-24T05:52:40Z, Build date: 06-09-2008 13:41


Function: $.datepicker.formatDate

Reference

[Function] $.datepicker.formatDate(format, date, settings)
Format a date into a string value with a specified format.

Signature
$.datepicker.formatDate(format, date, settings) → String
Description
The format can be combinations of the following: * d - day of month (no leading zero) * dd - day of month (two digit) * D - day name short * DD - day name long * m - month of year (no leading zero) * mm - month of year (two digit) * M - month name short * MM - month name long * y - year (two digit) * yy - year (four digit) * @ - Unix timestamp (ms since 01/01/1970) * '...' - literal text * '' - single quote * anything else - literal text There are also a number of predefined standard date formats available from $.datepicker: * ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601) * COOKIE - 'D, dd M yy' * ISO_8601 - 'yy-mm-dd' * RFC_822 - 'D, d M y' (See RFC 822) * RFC_850 - 'DD, dd-M-y' (See RFC 850) * RFC_1036 - 'D, d M y' (See RFC 1036) * RFC_1123 - 'D, d M yy' (See RFC 1123) * RFC_2822 - 'D, d M yy' (See RFC 2822) * RSS - 'D, d M y' (Same as RFC 822) * TIMESTAMP - '@' * W3C - 'yy-mm-dd' (Same as ISO 8601)
Parameters
  • String format : The format to use in presenting the date.
  • Date date : The date value to be displayed.
  • Object settings : Additional parameters for formatting the date. All are optional and default to the datapicker defaults, which are usually standard English.<br/> Attributes include:<br/> <i>dayNamesShort</i> (String[7]) - the short names for the days of the week, starting at Sunday.<br/> <i>dayNames</i> (String[7]) - the long names for the days of the week, starting at Sunday.<br/> <i>monthNamesShort</i> (String[12]) - the short names for the months of the year.<br/> <i>monthNames</i> (String[12]) - the long names for the months of the year.<br/><br/>
Examples
Example:
Display the date in ISO format. Produces '2007-01-26'.
$.datepicker.formatDate('yy-mm-dd', new Date(2007, 1 - 1, 26));
Example:
Display the date in RSS format.
$.datepicker.formatDate($.datepicker.RSS, new Date(2007, 1 - 1, 26));
Example:
Display the date in expanded French format. Produces 'Samedi, Juillet 14, 2007'.
$.datepicker.formatDate('DD, MM d, yy', new Date(2007, 7 - 1, 14), {dayNamesShort: $.datepicker.regional['fr'].dayNamesShort, dayNames: $.datepicker.regional['fr'].dayNames, monthNamesShort: $.datepicker.regional['fr'].monthNamesShort, monthNames: $.datepicker.regional['fr'].monthNames});
Timestamp: 2008-07-27T19:32:18Z, Build date: 06-09-2008 13:41


Function: $.datepicker.iso8601Week

Reference

[Function] $.datepicker.iso8601Week(date)
Determine the week of the year for a given date: 1 to 53.

Signature
$.datepicker.iso8601Week(date) → Number
Description
This function uses the ISO 8601 definition of a week: weeks start on a Monday and the first week of the year contains January 4. This means that up to three days from the previous year may be included in the first week of the current year, and that up to three days from the current year may be included in the last week of the previous year.<br/>'''Since v3.1.'''
Parameters
  • Date date : The date to find the week for.
Examples
Example:
Find the week of the year for a date.
$.datepicker.iso8601Week(new Date(2007, 1 - 1, 26));
Timestamp: 2008-01-24T05:56:44Z, Build date: 06-09-2008 13:41


Function: $.datepicker.parseDate

Reference

[Function] $.datepicker.parseDate(format, value, settings)
Extract a date from a string value with a specified format.

Signature
$.datepicker.parseDate(format, value, settings) → Date
Description
For a full list of the possible formats see the <a href='UI/Datepicker/%24.datepicker.formatDate'>formatDate</a> function. A number of exceptions may be thrown: * 'Invalid arguments' if either ''format'' or ''value'' is null * 'Missing number at position nn' if ''format'' indicated a numeric value that is not then found * 'Unknown name at position nn' if ''format'' indicated day or month name that is not then found * 'Unexpected literal at position nn' if ''format'' indicated a literal value that is not then found * 'Invalid date' if the date is invalid, such as '31/02/2007'
Parameters
  • String format : The format to use in extracting the date.
  • String value : The date value to be examined.
  • Object settings : Additional parameters for parsing the date. All are optional and default to the datepicker default, which is usually standard English.<br/> Attributes include:<br/> ''shortYearCutoff'' (Number) - the value (0-99) beyond which years are considered to be in the previous century. Used in conjunction with the 'y' format option. Defaults to the datepicker default, which is usually 10 years in the future.<br/> <i>dayNamesShort</i> (String[7]) - the short names for the days of the week, starting at Sunday.<br/> <i>dayNames</i> (String[7]) - the long names for the days of the week, starting at Sunday<br/> <i>monthNamesShort</i> (String[12]) - the short names for the months of the year.<br/> <i>monthNames</i> (String[12]) - the long names for the months of the year.<br/><br/>
Examples
Example:
Extract a date in ISO format.
$.datepicker.parseDate('yy-mm-dd', '2007-01-26');
Example:
Extract a date in RSS format.
$.datepicker.parseDate($.datepicker.RSS, 'Fri, 26 Jan 07');
Example:
Extract a date in expanded French format.
$.datepicker.parseDate('DD, MM d, yy', 'Samedi, Juillet 14, 2007', {shortYearCutoff: 20, dayNamesShort: $.datepicker.regional['fr'].dayNamesShort, dayNames: $.datepicker.regional['fr'].dayNames, monthNamesShort: $.datepicker.regional['fr'].monthNamesShort, monthNames: $.datepicker.regional['fr'].monthNames});
Timestamp: 2008-07-27T15:02:26Z, Build date: 06-09-2008 13:41


Function: dialog

Reference

[Function] dialog(options)
Make the selected elements Dialog boxes.

Signature
dialog(options) → jQuery
Parameters
  • Options options : A set of key/value pairs that configure the dialog. All options are optional.
Timestamp: 2008-08-27T15:31:17Z, Build date: 06-09-2008 13:41


Function: dialog

Reference

[Function] dialog("open")
Opens the specified dialog boxes.

Signature
dialog("open") → jQuery
Parameters
  • String "open" :
Timestamp: 2008-08-27T15:31:17Z, Build date: 06-09-2008 13:41


Function: dialog

Reference

[Function] dialog("isOpen")
Return if the dialog has opened.

Signature
dialog("isOpen") → Boolean
Description
Since version 1.6 stable.
Parameters
  • String "isOpen" :
Timestamp: 2008-08-27T15:31:17Z, Build date: 06-09-2008 13:41


Function: dialog

Reference

[Function] dialog("close")
Closes the specified dialog boxes.

Signature
dialog("close") → jQuery
Parameters
  • String "close" :
Timestamp: 2008-08-27T15:31:17Z, Build date: 06-09-2008 13:41


Function: dialog

Reference

[Function] dialog("destroy")
Completely remove the dialog.

Signature
dialog("destroy") → jQuery
Description
This method removes the dialog completely.
Parameters
  • String "destroy" :
Timestamp: 2008-08-27T15:31:17Z, Build date: 06-09-2008 13:41


Function: magnifier

Reference

[Function] magnifier(options)
Make the contents of the selected elements magnify upon mouse proximity.

Signature
magnifier(options) → jQuery
Parameters
  • Options options : A set of key/value pairs that configure the magnifier. All options are optional.
Timestamp: 2008-07-30T17:44:11Z, Build date: 06-09-2008 13:41


Function: magnifier

Reference

[Function] magnifier("reset")
Reset the magnifier.

Signature
magnifier("reset") → jQuery
Description
This method reset the magnifier.
Parameters
  • String "reset" :
Timestamp: 2008-07-30T17:44:11Z, Build date: 06-09-2008 13:41


Function: magnifier

Reference

[Function] magnifier("disable")
Disable the magnifier.

Signature
magnifier("disable") → jQuery
Description
This method disable the magnifier.
Parameters
  • String "disable" :
Timestamp: 2008-07-30T17:44:11Z, Build date: 06-09-2008 13:41


Function: magnifier

Reference

[Function] magnifier("destroy")
Completely remove the magnifier.

Signature
magnifier("destroy") → jQuery
Description
This method removes the magnifier completely.
Parameters
  • String "destroy" :
Timestamp: 2008-07-30T17:44:11Z, Build date: 06-09-2008 13:41


Function: progressbar

Reference

[Function] progressbar(options)
Make the selected elements progressbar.

Signature
progressbar(options) → jQuery
Parameters
  • Options options : A set of key/value pairs that configure the progressbar. All options are optional.
Timestamp: 2008-08-25T06:29:11Z, Build date: 06-09-2008 13:41


Function: progressbar

Reference

[Function] progressbar("start")
Start the progressbar.

Signature
progressbar("start") → jQuery
Description
This method start the progressbar.
Parameters
  • String "start" :
Timestamp: 2008-08-25T06:29:11Z, Build date: 06-09-2008 13:41


Function: progressbar

Reference

[Function] progressbar("stop")
Stop the progressbar.

Signature
progressbar("stop") → jQuery
Description
This method stop the progressbar.
Parameters
  • String "stop" :
Timestamp: 2008-08-25T06:29:11Z, Build date: 06-09-2008 13:41


Function: progressbar

Reference

[Function] progressbar("pause")
Pause the progressbar.

Signature
progressbar("pause") → jQuery
Description
This method pause the progressbar.
Parameters
  • String "pause" :
Timestamp: 2008-08-25T06:29:11Z, Build date: 06-09-2008 13:41


Function: progressbar

Reference

[Function] progressbar("progress", value)
Set range of the progressbar.

Signature
progressbar("progress", value) → jQuery
Description
This method set range of the progressbar.
Parameters
  • String "progress" :
  • Number value :
Timestamp: 2008-08-25T06:29:11Z, Build date: 06-09-2008 13:41


Function: progressbar

Reference

[Function] progressbar("enable")
Enable the progressbar.

Signature
progressbar("enable") → jQuery
Description
This method enable the progressbar.
Parameters
  • String "enable" :
Timestamp: 2008-08-25T06:29:11Z, Build date: 06-09-2008 13:41


Function: progressbar

Reference

[Function] progressbar("disable")
Disable the progressbar.

Signature
progressbar("disable") → jQuery
Description
This method disable the progressbar.
Parameters
  • String "disable" :
Timestamp: 2008-08-25T06:29:11Z, Build date: 06-09-2008 13:41


Function: progressbar

Reference

[Function] progressbar("destroy")
Completely remove the progressbar.

Signature
progressbar("destroy") → jQuery
Description
This method removes the progressbar completely.
Parameters
  • String "destroy" :
Timestamp: 2008-08-25T06:29:11Z, Build date: 06-09-2008 13:41


Function: slider

Reference

[Function] slider(options)
Makes a slider from the nodeset supplied by the query.

Signature
slider(options)
Description
With this plugin, you can generate sliders with a wide range of options, including multiple handles, callbacks and more. Some options will not work correctly unless your external and internal stylesheets come '''before''' the script tags. All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): * '''ui.options''': Options - options used to initialize the slider * '''ui.handle''': jQuery - the current focused handle * '''ui.value''': Integer - the current handle's value * '''ui.range''': Integer - the current range value (only with two handles and range: true)
Parameters
  • Options options : A set of key/value pairs that configure the slider. All options are optional, but a slider will not be useful without at least one callback.
Timestamp: 2008-08-22T16:40:00Z, Build date: 06-09-2008 13:41


Function: slider

Reference

[Function] slider("moveTo", value, index)
Moves a slider's handle to the given position.

Signature
slider("moveTo", value, index) → jQuery
Description
Calling this method moves the specified handle to the given value. If no handle or handle's index/number is specified as second argument, it moves the focused handle. If you want to increase/decrease the handles' value, you can also input a relative string format, using "+=" or "-=". Example: $(..).slider("moveTo", "-=10") (Decrements the current handles' value by 10). Note also that when using a slider with range: true set in the options, move the second slider handle first as if the first handle is forced to overtake the second, you'll get strange results with minus numbers.
Parameters
  • String "moveTo" :
  • Integer/String value : The value to move the handle to.
  • Integer/Element index : The index/number of the handle, zero-based (or alternatively the handle element itself).
Timestamp: 2008-08-22T16:40:00Z, Build date: 06-09-2008 13:41


Function: slider

Reference

[Function] slider("value", index)
Retrieves a handle's value.

Signature
slider("value", index) → jQuery
Description
This method returns a handle's value. If no handle is specified in the second argument by its index, it returns the value of the currently focused handle.
Parameters
  • String "value" :
  • Integer index : The index/number of the handle, zero-based.
Timestamp: 2008-08-22T16:40:00Z, Build date: 06-09-2008 13:41


Function: slider

Reference

[Function] slider("disable")
Temporarily disables the slider.

Signature
slider("disable") → jQuery
Description
This method temporarily disables the slider. It can later be reenabled by calling $(..).slider("enable").
Parameters
  • String "disable" :
Timestamp: 2008-08-22T16:40:00Z, Build date: 06-09-2008 13:41


Function: slider

Reference

[Function] slider("enable")
Enables the slider.

Signature
slider("enable") → jQuery
Description
This method re-enables a previously disabled slider.
Parameters
  • String "enable" :
Timestamp: 2008-08-22T16:40:00Z, Build date: 06-09-2008 13:41


Function: slider

Reference

[Function] slider("destroy")
Completely removes the sliding functionality.

Signature
slider("destroy") → jQuery
Description
This method removes the sliding functionality completely.
Parameters
  • String "destroy" :
Timestamp: 2008-08-22T16:40:00Z, Build date: 06-09-2008 13:41


Function: spinner

Reference

[Function] spinner(options)
Make the selected elements Spinner.

Signature
spinner(options) → jQuery
Parameters
  • Options options : A set of key/value pairs that configure the spinner. All options are optional.
Timestamp: 2008-08-25T06:32:43Z, Build date: 06-09-2008 13:41


Function: spinner

Reference

[Function] spinner("disable")
Temporarily disables the spinner.

Signature
spinner("disable") → jQuery
Description
This method temporarily disables the spinner. It can later be reenabled by calling $(..).spinner("enable").
Parameters
  • String "disable" :
Timestamp: 2008-08-25T06:32:43Z, Build date: 06-09-2008 13:41


Function: spinner

Reference

[Function] spinner("enable")
Enables the spinner.

Signature
spinner("enable") → jQuery
Description
This method re-enables a previously disabled spinner.
Parameters
  • String "enable" :
Timestamp: 2008-08-25T06:32:43Z, Build date: 06-09-2008 13:41


Function: spinner

Reference

[Function] spinner("destroy")
Completely remove the spinner.

Signature
spinner("destroy") → jQuery
Description
This method removes the spinner completely.
Parameters
  • String "destroy" :
Timestamp: 2008-08-25T06:32:43Z, Build date: 06-09-2008 13:41


Function: tabs

Reference

[Function] tabs(options)
The method that you use to create a new tabs interface.

Signature
tabs(options) → jQuery
Parameters
  • Options options : A set of key/value pairs that configures the tabs interface. All options are optional.
Examples
Example:
A simple jQuery UI Tabs interface.
$("#example > ul").tabs();

        <div id="example" class="flora">
            <ul>
                <li><a href="#fragment-1"><span>One</span></a></li>
                <li><a href="#fragment-2"><span>Two</span></a></li>
                <li><a href="#fragment-3"><span>Three</span></a></li>
            </ul>
            <div id="fragment-1">
                <p>First tab is selected by default.</p>
            </div>
            <div id="fragment-2">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-3">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>
Timestamp: 2008-08-28T22:51:35Z, Build date: 06-09-2008 13:41


Function: tabs

Reference

[Function] tabs("add", url, label, index)
Add a new tab.

Signature
tabs("add", url, label, index) → jQuery
Parameters
  • String "add" :
  • String url : Either a URL consisting of a fragment identifier only to create an in-page tab or a full url (relative or absolute, no cross-domain support) to turn the new tab into an Ajax (remote) tab.
  • String label : The label of the tab to be added.
  • Number index : Zero-based position where to insert the new tab. Optional, by default a new tab is appended at the end.
Examples
Example:
Append a new in-page tab.
$(".selector").tabs("add", '#fragment-identifier', 'New Tab');
Example:
Insert a new in-page tab at the second position.
$(".selector").tabs("add", '#fragment-identifier', 'New Tab', 1);
Example:
Append a new remote tab.
$(".selector").tabs("add", '/load/content/url', 'New Tab');
Timestamp: 2008-08-28T22:51:35Z, Build date: 06-09-2008 13:41


Function: tabs

Reference

[Function] tabs("remove", index)
Remove a tab.

Signature
tabs("remove", index) → jQuery
Parameters
  • String "remove" :
  • Number index : Zero-based index of the tab to be removed.
Examples
Example:
Remove second tab.
$(".selector").tabs("remove", 1);
Timestamp: 2008-08-28T22:51:35Z, Build date: 06-09-2008 13:41


Function: tabs

Reference

[Function] tabs("enable", index)
Enable a disabled tab.

Signature
tabs("enable", index) → jQuery
Description
To enable more than one tab at once reset the disabled property like: <code>$('#example').data('disabled.tabs', []);</code>
Parameters
  • String "enable" :
  • Number index : Zero-based index of the tab to be enabled.
Examples
Example:
Enable second tab.
$(".selector").tabs("enable", 1);
Timestamp: 2008-08-28T22:51:35Z, Build date: 06-09-2008 13:41


Function: tabs

Reference

[Function] tabs("disable", index)
Disable a tab.

Signature
tabs("disable", index) → jQuery
Description
The selected tab cannot be disabled. To disable more than one tab at once use: <code>$('#example').data('disabled.tabs', [1, 2, 3]);</code>
Parameters
  • String "disable" :
  • Number index : Zero-based index of the tab to be disabled.
Examples
Example:
Disable second tab.
$(".selector").tabs("disable", 1);
Timestamp: 2008-08-28T22:51:35Z, Build date: 06-09-2008 13:41


Function: tabs

Reference

[Function] tabs("select", index)
Select a tab, i.e., simulate a click programmatically.

Signature
tabs("select", index) → jQuery
Parameters
  • String "select" :
  • Number, String index : Zero-based index of the tab to be selected or the id selector of the panel the tab is associated with (the tab's href fragment identifier, e.g. hash, points to the panel's id).
Examples
Example:
Select second tab.
$(".selector").tabs("select", 1);
Example:
Select tab that is associated with a panel that has the id "foo".
$(".selector").tabs("select", '#foo');
Timestamp: 2008-08-28T22:51:35Z, Build date: 06-09-2008 13:41


Function: tabs

Reference

[Function] tabs("load", index)
Reload the content of an Ajax tab programmatically.

Signature
tabs("load", index) → jQuery
Description
This method always loads the tab content from the remote location, even is cache is set to true.
Parameters
  • String "load" :
  • Number index : Zero-based index of the tab to be reloaded.
Examples
Example:
Reload second tab.
$(".selector").tabs("load", 1);
Timestamp: 2008-08-28T22:51:35Z, Build date: 06-09-2008 13:41


Function: tabs

Reference

[Function] tabs("url", index, url)
Change the url from which an Ajax (remote) tab will be loaded.

Signature
tabs("url", index, url) → jQuery
Description
The specified URL will be used for subsequent loads. Note that you can not only change the URL for an existing remote tab with this method, but also turn an in-page tab into a remote tab.
Parameters
  • String "url" :
  • Number index : Zero-based index of the tab of which its URL is to be updated.
  • String url : A URL the content of the tab is loaded from.
Examples
Example:
Set the URL of an Ajax tab to load content from.
$(".selector").tabs("url", '/changed/url');
Timestamp: 2008-08-28T22:51:35Z, Build date: 06-09-2008 13:41


Function: tabs

Reference

[Function] tabs("destroy")
Destroy tabs interface and revert HTML to the state before creating tabs.

Signature
tabs("destroy") → jQuery
Parameters
  • String "destroy" :
Timestamp: 2008-08-28T22:51:35Z, Build date: 06-09-2008 13:41


Function: tabs

Reference

[Function] tabs("length")
Retrieve the number of tabs of the first matched tab pane.

Signature
tabs("length") → Number
Parameters
  • String "length" :
Timestamp: 2008-08-28T22:51:35Z, Build date: 06-09-2008 13:41


Function: tabs

Reference

[Function] tabs("rotate", ms, continuing)
Set up an automatic rotation through tabs of a tab pane.

Signature
tabs("rotate", ms, continuing) → jQuery
Description
'''Part of the UI Tabs extension package.'''
Parameters
  • String "rotate" :
  • Number ms : Amount of time in milliseconds until the next tab in the cycle gets activated. Use 0 or null to stop the rotation.
  • Boolean continuing : Whether or not to continue the rotation after a tab has been selected by a user. Default: false.
Examples
Example:
Start rotation with an interval of 5 seconds.
$(".selector").tabs('rotate', 5000);
Example:
Stop rotation.
$(".selector").tabs('rotate', null);
Timestamp: 2008-08-28T22:51:35Z, Build date: 06-09-2008 13:41


jQuery

← Use the table of contents on the left to navigate.