API/1.2/Core - jQuery JavaScript Library

jQuery: The Write Less, Do More JavaScript Library

  • Download
  • Documentation
  • Plugins
  • Tutorials
  • Discuss
  • Blog

API/1.2/Core

From jQuery JavaScript Library

(Redirected from Core)
Jump to: navigation, search

Name Type
$(...) The jQuery Function:

Name | Type
jQuery( expression, context ) | Returns: jQuery
This function accepts a string containing a CSS selector which is then used to match a set of elements.
jQuery( html ) | Returns: jQuery
Create DOM elements on-the-fly from the provided String of raw HTML.
jQuery( elements ) | Returns: jQuery
Wrap jQuery functionality around a single or multiple DOM Element(s).
jQuery( callback ) | Returns: jQuery
A shorthand for $(document).ready().
jQuery Object Accessors:

Name | Type
each( callback ) | Returns: jQuery
Execute a function within the context of every matched element.
size( ) | Returns: Number
The number of elements in the jQuery object.
length | Returns: Number
The number of elements in the jQuery object.
eq( position ) | Returns: jQuery
Reduce the set of matched elements to a single element.
get( ) | Returns: Array<Element>
Access all matched DOM elements.
get( index ) | Returns: Element
Access a single matched DOM element at a specified index in the matched set.
index( subject ) | Returns: Number
Searches every matched element for the object and returns the index of the element, if found, starting with zero.
Plugins:

Name | Type
jQuery.fn.extend( object ) | Returns: jQuery
Extends the jQuery element set to provide new methods (used to make a typical jQuery plugin).
jQuery.extend( object ) | Returns: jQuery
Extends the jQuery object itself.
Interoperability:

Name | Type
jQuery.noConflict( ) | Returns: jQuery
Run this function to give control of the $ variable back to whichever library first implemented it.
jQuery.noConflict( extreme ) | Returns: jQuery
Revert control of both the $ and jQuery variables to their original owners. Use with discretion.

Retrieved from "http://docs.jquery.com/API/1.2/Core"

Category: Events/ready

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link

© 2007 John Resig and the jQuery team.
Hosting provided by Media Temple.

  • Download
  • Documentation
  • Plugins
  • Tutorials
  • Discuss
  • Blog


Core/jQuery - jQuery JavaScript Library

  • Plugins
  • Tutorials
  • Discuss
  • Blog

Core/jQuery

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Core

[edit]

jQuery( expression, [context] )

  • Overview
  • Options
  • Examples
  • Discuss

This function accepts a string containing a CSS selector which is then used to match a set of elements.
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 Selectors for the allowed CSS syntax for expressions.
Arguments:
expression | String
An expression to search with.
context (Optional) | Element, jQuery
A DOM Element, Document or jQuery to use as context

Examples:
  • Demo
  • View Source
Finds all p elements that are children of a div element.

$("div > p").css("border", "1px solid gray");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("div > p").css("border", "1px solid gray");
  });
  </script>

</head>
<body>
  <p>one</p> <div><p>two</p></div> <p>three</p>
</body>
</html>

  • Code
Finds all inputs of type radio within the first form in the document.

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

  • Code
Finds all div elements within an XML document from an AJAX response.

$("div", xml.responseXML);

Name Type
[edit]

jQuery( html )

  • Overview
  • Options
  • Examples
  • Discuss

Create DOM elements on-the-fly from the provided String of raw HTML.
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.
Arguments:
html String
A string of HTML to create on the fly.

Examples:
  • Code
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")

  • Code
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 official statement for details.

// Does NOT work in IE:
$("<input/>").attr("type", "checkbox");
// Does work in IE:
$("<input type='checkbox'/>");

Name Type
[edit]

jQuery( elements )

  • Overview
  • Options
  • Examples
  • Discuss

Wrap jQuery functionality around a single or multiple DOM Element(s).
This function also accepts XML Documents and Window objects as valid arguments (even though they are not DOM Elements).
Arguments:
elements Element, Array<Element>
DOM element(s) to be encapsulated by a jQuery object.

Examples:
  • Code
Sets the background color of the page to black.

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

  • Code
Hides all the input elements within a form.

$(myForm.elements).hide()

Name Type
[edit]

jQuery( callback )

  • Overview
  • Options
  • Examples
  • Discuss

A shorthand for $(document).ready().
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.
Arguments:
callback Function
The function to execute when the DOM is ready.

Examples:
  • Code
Executes the function when the DOM is ready to be used.

$(function(){
  // Document is ready
});

  • Code
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...
});

Name Type

Retrieved from "http://docs.jquery.com/Core/jQuery"

Categories: Core/jQuery | API | Core/$ | CSS/css | Manipulation/appendTo | Attributes/attr | Effects/hide | Events/ready

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link

© 2007 John Resig and the jQuery team.
Hosting provided by Media Temple.


Core/each - jQuery JavaScript Library

  • Blog

Core/each

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Core

[edit]

each( callback )

  • Overview
  • Options
  • Examples
  • Discuss

Execute a function within the context of every matched element.
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).
Arguments:
callback Function
The callback to execute for each matched element.
function callback(index, domElement) {
  this; // this == domElement
}

Examples:
  • Demo
  • View Source
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 = "";
        }
      });
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $(document.body).click(function () {
      $("div").each(function (i) {
        if (this.style.color != "blue") {
          this.style.color = "blue";
        } else {
          this.style.color = "";
        }
      });
    });

  });
  </script>
  <style>
  div { color:red; text-align:center; cursor:pointer;
        font-weight:bolder; width:300px; }
  </style>
</head>
<body>
  <div>Click here</div>
  <div>to iterate through</div>
  <div>these divs.</div>
</body>
</html>

  • Demo
  • View Source
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");
      });
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("span").click(function () {
      $("li").each(function(){
        $(this).toggleClass("example");
      });
    });

  });
  </script>
  <style>
  ul { font-size:18px; margin:0; }
  span { color:blue; text-decoration:underline; cursor:pointer; }
  .example { font-style:italic; }
  </style>
</head>
<body>
  To do list: <span>(click here to change)</span>
  <ul>
    <li>Eat</li>
    <li>Sleep</li>
    <li>Be merry</li>
  </ul>
</body>
</html>

  • Demo
  • View Source
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;
        }
      });
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("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;
        }
      });
    });

  });
  </script>
  <style>
  div { width:40px; height:40px; margin:5px; float:left;
        border:2px blue solid; text-align:center; }
  span { color:red; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Core/each"

Categories: Core/each | API | Events/click | Attributes/toggleClass | CSS/css | Traversing/is | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Core/size - jQuery JavaScript Library

  • Blog

Core/size

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Core

[edit]

size( )

  • Overview
  • Options
  • Examples
  • Discuss

The number of elements in the jQuery object.
This returns the same number as the 'length' property of the jQuery object.

Examples:
  • Demo
  • View Source
Count the divs. Click to add more.

    $(document.body).click(function () {
      $(document.body).append($("<div>"));
      var n = $("div").size();
      $("span").text("There are " + n + " divs." +
                     "Click to add more.");
    }).click(); // trigger the click to start

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $(document.body).click(function () {
      $(document.body).append($("<div>"));
      var n = $("div").size();
      $("span").text("There are " + n + " divs." +
                     "Click to add more.");
    }).click(); // trigger the click to start

  });
  </script>
  <style>
  body { cursor:pointer; }
  div { width:50px; height:30px; margin:5px; float:left;
        background:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <span></span>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Core/size"

Categories: Core/size | API | Events/click | Manipulation/append | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Core/length - jQuery JavaScript Library

  • Blog

Core/length

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Core

[edit]

length

  • Overview
  • Options
  • Examples
  • Discuss

The number of elements in the jQuery object.
In a The number of elements currently matched. The size function will return the same value.

Examples:
  • Demo
  • View Source
Count the divs. Click to add more.

    $(document.body).click(function () {
      $(document.body).append($("<div>"));
      var n = $("div").length;
      $("span").text("There are " + n + " divs." +
                     "Click to add more.");
    }).trigger('click'); // trigger the click to start

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $(document.body).click(function () {
      $(document.body).append($("<div>"));
      var n = $("div").length;
      $("span").text("There are " + n + " divs." +
                     "Click to add more.");
    }).trigger('click'); // trigger the click to start

  });
  </script>
  <style>
  body { cursor:pointer; }
  div { width:50px; height:30px; margin:5px; float:left;
        background:green; }
  span { color:red; }
  </style>
</head>
<body>
  <span></span>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Core/length"

Categories: Core/length | API | Events/click | Manipulation/append | Attributes/text | Events/trigger

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Core/eq - jQuery JavaScript Library

  • Blog

Core/eq

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Core

[edit]

eq( position )

  • Overview
  • Options
  • Examples
  • Discuss

Reduce the set of matched elements to a single element.
The position of the element in the set of matched elements starts at 0 and goes to length - 1.
Arguments:
position Number
The index of the element to select.

Examples:
  • Demo
  • View Source
Reduces the selection to the second selected element.

$("p").eq(1)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").eq(1)
  });
  </script>

</head>
<body>
  <p>This is just a test.</p><p>So is this</p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Core/eq"

Categories: Core/eq | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Core/get - jQuery JavaScript Library

  • Blog

Core/get

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Core

[edit]

get( )

  • Overview
  • Options
  • Examples
  • Discuss

Access all matched DOM elements.
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:
  • Demo
  • View Source
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() );

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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() );

  });
  </script>
  <style>
  span { color:red; }
  </style>
</head>
<body>
  Reversed - <span></span>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</body>
</html>

Name Type

[edit]

get( index )

  • Overview
  • Options
  • Examples
  • Discuss

Access a single matched DOM element at a specified index in the matched set.
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].
Arguments:
index Number
Access the element in the Nth position.

Examples:
  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("*", document.body).click(function (e) {
      e.stopPropagation();
      var domEl = $(this).get(0);
      $("span:first").text("Clicked on - " + domEl.tagName);
    });

  });
  </script>
  <style>
  span { color:red; }
  div { background:yellow; }
  </style>
</head>
<body>
  <span> </span>
  <p>In this paragraph is an <span>important</span> section</p>
  <div><input type="text" /></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Core/get"

Categories: Core/get | API | Attributes/text | Events/click | Selectors/first

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Core/index - jQuery JavaScript Library

  • Blog

Core/index

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Core

[edit]

index( subject )

  • Overview
  • Options
  • Examples
  • Discuss

Searches every matched element for the object and returns the index of the element, if found, starting with zero.
Returns -1 if the object wasn't found.
Arguments:
subject Element
Object to search for.

Examples:
  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div").click(function () {
      // this is the dom element clicked
      var index = $("div").index(this);
      $("span").text("That was div index #" + index);
    });

  });
  </script>
  <style>
  div { background:yellow; margin:5px; }
  span { color:red; }
  </style>
</head>
<body>
  <span>Click a div!</span>
  <div>First div</div>
  <div>Second div</div>
  <div>Third div</div>
</body>
</html>

  • Demo
  • View Source
Returns the index for the element with ID foobar.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("*").index( $('#foobar')[0] )
  });
  </script>

</head>
<body>
  <div id="foobar"><b></b><span id="foo"></span></div>
</body>
</html>

  • Demo
  • View Source
Returns the index for the element with ID foo within another element.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("*").index( $('#foo')[0] )
  });
  </script>

</head>
<body>
  <div id="foobar"><b></b><span id="foo"></span></div>
</body>
</html>

  • Code
Returns the index for the element clicked within a collection.

var mainNavLinks = $('ul#mainNav li a');
mainNavLinks.click(function(){alert(mainNavLinks.index(this)0;});

  • Demo
  • View Source
Returns -1, as there is no element with ID bar.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("*").index( $('#bar')[0] )
  });
  </script>

</head>
<body>
  <div id="foobar"><b></b><span id="foo"></span></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Core/index"

Categories: Core/index | API | Events/click | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Core/jQuery.fn.extend - jQuery JavaScript Library

  • Blog

Core/jQuery.fn.extend

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Core

[edit]

jQuery.fn.extend( object )

  • Overview
  • Options
  • Examples
  • Discuss

Extends the jQuery element set to provide new methods (used to make a typical jQuery plugin).
Can be used to add functions into the to add plugin methods (plugins).
Arguments:
object Object
The object that will be merged into the jQuery object.

Examples:
  • Code
  • Results
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; });
  }
});

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

Name Type

Retrieved from "http://docs.jquery.com/Core/jQuery.fn.extend"

Categories: Core/jQuery.fn.extend | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Core/jQuery.extend - jQuery JavaScript Library

  • Blog

Core/jQuery.extend

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Core

[edit]

jQuery.extend( object )

  • Overview
  • Options
  • Examples
  • Discuss

Extends the jQuery object itself.
Can be used to add functions into the jQuery namespace. See jQuery.fn.extend for more information on using this method to add Plugins.
Arguments:
object Object
The object that will be merged into the jQuery object.

Examples:
  • Code
  • Results
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; }
});

jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5

Name Type

Retrieved from "http://docs.jquery.com/Core/jQuery.extend"

Categories: Core/jQuery.extend | API | Core/jQuery

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Core/jQuery.noConflict - jQuery JavaScript Library

  • Blog

Core/jQuery.noConflict

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Core

[edit]

jQuery.noConflict( )

  • Overview
  • Options
  • Examples
  • Discuss

Run this function to give control of the $ variable back to whichever library first implemented it.
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").

Examples:
  • Code
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';

  • Code
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

  • Code
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';

Name Type

[edit]

jQuery.noConflict( extreme )

  • Overview
  • Options
  • Examples
  • Discuss

Revert control of both the $ and jQuery variables to their original owners. Use with discretion.
This is a more-extreme version of the simple noConflict 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.
Arguments:
extreme Boolean
Set to true to enable the extreme rollback of jQuery and it's variables.

Examples:
  • Code
  • Results
Completely move jQuery to a new namespace in another object.

var dom = {};
dom.query = jQuery.noConflict(true);

// Do something with the new jQuery
dom.query("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
// Do something with another version of jQuery
jQuery("div > p").hide();

Name Type

Retrieved from "http://docs.jquery.com/Core/jQuery.noConflict"

Categories: Core/jQuery.noConflict | API | Core/jQuery | Effects/hide

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


API/1.2/Selectors - jQuery JavaScript Library

  • Blog

API/1.2/Selectors

From jQuery JavaScript Library

(Redirected from Selectors)
Jump to: navigation, search

Name Type
Basics:

Name | Type
#id | Returns: Element
Matches a single element with the given id attribute.
element | Returns: Array<Element>
Matches all elements with the given name.
.class | Returns: Array<Element>
Matches all elements with the given class.
* | Returns: Array<Element>
Matches all elements.
selector1, selector2, selectorN | Returns: Array<Element>
Matches the combined results of all the specified selectors.
Hierarchy:

Name | Type
ancestor descendant | Returns: Array<Element>
Matches all descendant elements specified by "descendant" of elements specified by "ancestor".
parent > child | Returns: Array<Element>
Matches all child elements specified by "child" of elements specified by "parent".
prev + next | Returns: Array<Element>
Matches all next elements specified by "next" that are next to elements specified by "prev".
prev ~ siblings | Returns: Array<Element>
Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.
Basic Filters:

Name | Type
:first | Returns: Element
Matches the first selected element.
:last | Returns: Element
Matches the last selected element.
:not(selector) | Returns: Array<Element>
Filters out all elements matching the given selector.
:even | Returns: Array<Element>
Matches even elements, zero-indexed.
:odd | Returns: Array<Element>
Matches odd elements, zero-indexed.
:eq(index) | Returns: Element
Matches a single element by its index.
:gt(index) | Returns: Array<Element>
Matches all elements with an index above the given one.
:lt(index) | Returns: Array<Element>
Matches all elements with an index below the given one.
:header | Returns: Array<Element>
Matches all elements that are headers, like h1, h2, h3 and so on.
:animated | Returns: Array<Element>
Matches all elements that are currently being animated.
Content Filters:

Name | Type
:contains(text) | Returns: Array<Element>
Matches elements which contain the given text.
:empty | Returns: Array<Element>
Matches all elements that have no children (including text nodes).
:has(selector) | Returns: Array<Element>
Matches elements which contain at least one element that matches the specified selector.
:parent | Returns: Array<Element>
Matches all elements that are parents - they have child elements, including text.
Visibility Filters:

Name | Type
:hidden | Returns: Array<Element>
Matches all elements that are hidden, or input elements of type "hidden".
:visible | Returns: Array<Element>
Matches all elements that are visible.
Attribute Filters:

Name | Type
[attribute] | Returns: Array<Element>
Matches elements that have the specified attribute.
[attribute=value] | Returns: Array<Element>
Matches elements that have the specified attribute with a certain value.
[attribute!=value] | Returns: Array<Element>
Matches elements that don't have the specified attribute with a certain value.
[attribute^=value] | Returns: Array<Element>
Matches elements that have the specified attribute and it starts with a certain value.
[attribute$=value] | Returns: Array<Element>
Matches elements that have the specified attribute and it ends with a certain value.
[attribute*=value] | Returns: Array<Element>
Matches elements that have the specified attribute and it contains a certain value.
[selector1][selector2][selectorN] | Returns: Array<Element>
Matches elements that have the specified attribute and it contains a certain value.
Child Filters:

Name | Type
:nth-child(index/even/odd/equation) | Returns: Array<Element>
Matches the nth-child of its parent or all its even or odd children.
:first-child | Returns: Array<Element>
Matches the first child of its parent.
:last-child | Returns: Array<Element>
Matches the last child of its parent.
:only-child | Returns: Array<Element>
Matches the only child of its parent.
Forms:

Name | Type
:input | Returns: Array<Element>
Matches all input, textarea, select and button elements.
:text | Returns: Array<Element>
Matches all input elements of type text.
:password | Returns: Array<Element>
Matches all input elements of type password.
:radio | Returns: Array<Element>
Matches all input elements of type radio.
:checkbox | Returns: Array<Element>
Matches all input elements of type checkbox.
:submit | Returns: Array<Element>
Matches all input elements of type submit.
:image | Returns: Array<Element>
Matches all input elements of type image.
:reset | Returns: Array<Element>
Matches all input elements of type reset.
:button | Returns: Array<Element>
Matches all input elements of type button.
:file | Returns: Array<Element>
Matches all input elements of type file.
:hidden | Returns: Array<Element>
Matches all elements that are hidden, or input elements of type "hidden".
Form Filters:

Name | Type
:enabled | Returns: Array<Element>
Matches all elements that are enabled.
:disabled | Returns: Array<Element>
Matches all elements that are disabled.
:checked | Returns: Array<Element>
Matches all elements that are checked.
:selected | Returns: Array<Element>
Matches all elements that are selected.

Retrieved from "http://docs.jquery.com/API/1.2/Selectors"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/id - jQuery JavaScript Library

  • Blog

Selectors/id

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

#id

  • Overview
  • Options
  • Examples
  • Discuss

Matches a single element with the given id attribute.
If the id contains characters like periods or colons you have to escape those characters with backslashes [1].
Arguments:
id String
An ID to search for, specified via the id attribute of an element.

Examples:
  • Demo
  • View Source
Finds the element with the id "myDiv".

$("#myDiv").css("border","3px solid red");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#myDiv").css("border","3px solid red");
  });
  </script>
  <style>
  div {
    width: 90px;
    height: 90px;
    float:left;
    padding: 5px;
    margin: 5px;
    background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div id="notMe"><p>id="notMe"</p></div>
  <div id="myDiv">id="myDiv"</div>
</body>
</html>

  • Demo
  • View Source
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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#myID\\.entry\\[1\\]").css("border","3px solid red");
  });
  </script>
  <style>
  div {
    width: 300px;
    float:left;
    padding: 2px;
    margin: 3px;
    background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/id"

Categories: API | Core/$ | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/element - jQuery JavaScript Library

  • Blog

Selectors/element

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

element

  • Overview
  • Options
  • Examples
  • Discuss

Matches all elements with the given name.
Arguments:
element String
An element to search for. Refers to the tagName of DOM nodes.

Examples:
  • Demo
  • View Source
Finds every DIV element.

$("div").css("border","3px solid red");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("div").css("border","3px solid red");
  });
  </script>
  <style>
  div,span {
    width: 60px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div>DIV1</div>
  <div>DIV2</div>
  <span>SPAN</span>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/element"

Categories: API | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/class - jQuery JavaScript Library

  • Blog

Selectors/class

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

.class

  • Overview
  • Options
  • Examples
  • Discuss

Matches all elements with the given class.
Arguments:
class String
A class to search for. An element can have multiple classes, one of them must match.

Examples:
  • Demo
  • View Source
Finds the element with the class "myClass".

$(".myClass").css("border","3px solid red");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $(".myClass").css("border","3px solid red");
  });
  </script>
  <style>
  div,span {
    width: 150px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div class="notMe">div class="notMe"</div>
  <div class="myClass">div class="myClass"</div>
  <span class="myClass">span class="myClass"</span>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/class"

Categories: API | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/all - jQuery JavaScript Library

  • Blog

Selectors/all

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

*

  • Overview
  • Options
  • Examples
  • Discuss

Matches all elements.
Most useful when combined with a context to search in.

Examples:
  • Demo
  • View Source
Finds every element (including head, body, etc).

$("*").css("border","3px solid red");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("*").css("border","3px solid red");
  });
  </script>
  <style>
  div,span,p {
    width: 150px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div>DIV</div>
  <span>SPAN</span>
  <p>P <button>Button</button></p>
</body>
</html>

  • Code
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");

Name Type

Retrieved from "http://docs.jquery.com/Selectors/all"

Categories: API | CSS/css | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/multiple - jQuery JavaScript Library

  • Blog

Selectors/multiple

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

selector1, selector2, selectorN

  • Overview
  • Options
  • Examples
  • Discuss

Matches the combined results of all the specified selectors.
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.
Arguments:

selector1 | Selector
Any valid selector
selector2 | Selector
Another valid selector
selectorN (Optional) | Selector
As many more valid selectors as you like

Examples:
  • Demo
  • View Source
Finds the elements that match any of these three selectors.

$("div,span,p.myClass").css("border","3px solid red");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("div,span,p.myClass").css("border","3px solid red");
  });
  </script>
  <style>
  div,span,p {
    width: 130px;
    height: 60px;
    float:left;
    padding: 3px;
    margin: 2px;
    background-color: #EEEEEE;
    font-size:14px;
  }
  </style>
</head>
<body>
  <div>div</div>
  <p class="myClass">p class="myClass"</p>
  <p class="notMyClass">p class="notMyClass"</p>
  <span>span</span>
</body>
</html>

  • Demo
  • View Source
Show the order in the jQuery object.

    var list = $("div,p,span").map(function () {
      return this.tagName;
    }).get().join(", ");
    $("b").append(document.createTextNode(list));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var list = $("div,p,span").map(function () {
      return this.tagName;
    }).get().join(", ");
    $("b").append(document.createTextNode(list));

  });
  </script>
  <style>
  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; }
  </style>
</head>
<body>
  <span>span</span>
  <p>p</p>
  <p>p</p>
  <div>div</div>
  <span>span</span>
  <p>p</p>
  <div>div</div>
  <b></b>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/multiple"

Categories: API | CSS/css | Traversing/map | Core/get

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/descendant - jQuery JavaScript Library

  • Blog

Selectors/descendant

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

ancestor descendant

  • Overview
  • Options
  • Examples
  • Discuss

Matches all descendant elements specified by "descendant" of elements specified by "ancestor".
Arguments:
ancestor | Selector
Any valid selector.
descendant | Selector
A selector to match elements that are descendants of the first selector.

Examples:
  • Demo
  • View Source
Finds all input descendants of forms.

$("form input").css("border", "2px dotted blue");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("form input").css("border", "2px dotted blue");
  });
  </script>
  <style>
  body { font-size:14px; }
  form { border:2px green solid; padding:2px; margin:0;
         background:#efe; }
  div { color:red; }
  fieldset { margin:1px; padding:3px; }
  </style>
</head>
<body>
  <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>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/descendant"

Categories: API | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/child - jQuery JavaScript Library

  • Blog

Selectors/child

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

parent > child

  • Overview
  • Options
  • Examples
  • Discuss

Matches all child elements specified by "child" of elements specified by "parent".
Arguments:
parent | Selector
Any valid selector.
child | Selector
A selector to match elements that are children of the first selector.

Examples:
  • Demo
  • View Source
Finds all children of the element with id "main" which is yellow.

$("#main > *").css("border", "3px double red");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#main > *").css("border", "3px double red");
  });
  </script>
  <style>
  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; }
  </style>
</head>
<body>
  <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>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/child"

Categories: API | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/next - jQuery JavaScript Library

  • Blog

Selectors/next

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

prev + next

  • Overview
  • Options
  • Examples
  • Discuss

Matches all next elements specified by "next" that are next to elements specified by "prev".
Arguments:
prev | Selector
Any valid selector.
next | Selector
A selector to match elements that are next to the first selector.

Examples:
  • Demo
  • View Source
Finds all inputs that are next to a label.

$("label + input").css("color", "blue").val("Labeled!")

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("label + input").css("color", "blue").val("Labeled!")
  });
  </script>

</head>
<body>
  <form>
    <label>Name:</label>
    <input name="name" />
    <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
    </fieldset>
  </form>
  <input name="none" />
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/next"

Categories: API | CSS/css | Attributes/val

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/siblings - jQuery JavaScript Library

  • Blog

Selectors/siblings

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

prev ~ siblings

  • Overview
  • Options
  • Examples
  • Discuss

Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.
Arguments:
prev | Selector
Any valid selector.
siblings | Selector
A filter selector to match elements that are following siblings to the first selector.

Examples:
  • Demo
  • View Source
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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#prev ~ div").css("border", "3px groove blue");
  });
  </script>
  <style>
  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;
  }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/siblings"

Categories: API | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/first - jQuery JavaScript Library

  • Blog

Selectors/first

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:first

  • Overview
  • Options
  • Examples
  • Discuss

Matches the first selected element.

Examples:
  • Demo
  • View Source
Finds the first table row.

$("tr:first").css("font-style", "italic");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("tr:first").css("font-style", "italic");
  });
  </script>
  <style>
  td { color:blue; font-weight:bold; }
  </style>
</head>
<body>
  <table>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
  </table>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/first"

Categories: API | Selectors/first | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/last - jQuery JavaScript Library

  • Blog

Selectors/last

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:last

  • Overview
  • Options
  • Examples
  • Discuss

Matches the last selected element.

Examples:
  • Demo
  • View Source
Finds the last table row.

$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});
  });
  </script>

</head>
<body>
  <table>
    <tr><td>First Row</td></tr>
    <tr><td>Middle Row</td></tr>
    <tr><td>Last Row</td></tr>
  </table>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/last"

Categories: API | Selectors/last | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/not - jQuery JavaScript Library

  • Blog

Selectors/not

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:not(selector)

  • Overview
  • Options
  • Examples
  • Discuss

Filters out all elements matching the given selector.
Arguments:
selector Selector
A selector with which to filter by.

Examples:
  • Demo
  • View Source
Finds all inputs that are not checked and hilites 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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("input:not(:checked) + span").css("background-color", "yellow");
    $("input").attr("disabled", "disabled");

  });
  </script>

</head>
<body>
  <div>
    <input type="checkbox" name="a" />
    <span>Mary</span>
  </div>
  <div>
    <input type="checkbox" name="b" />
    <span>Paul</span>
  </div>
  <div>
    <input type="checkbox" name="c" checked="checked" />
    <span>Peter</span>
  </div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/not"

Categories: API | Selectors/not | Selectors/checked | CSS/css | Attributes/attr

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/even - jQuery JavaScript Library

  • Blog

Selectors/even

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:even

  • Overview
  • Options
  • Examples
  • Discuss

Matches even elements, zero-indexed.

Examples:
  • Demo
  • View Source
Finds even table rows, matching the first, third and so on (index 0, 2, 4 etc.).

$("tr:even").css("background-color", "#bbbbff");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("tr:even").css("background-color", "#bbbbff");
  });
  </script>
  <style>
  table {
    background:#eeeeee;
  }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/even"

Categories: API | Selectors/even | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/odd - jQuery JavaScript Library

  • Blog

Selectors/odd

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:odd

  • Overview
  • Options
  • Examples
  • Discuss

Matches odd elements, zero-indexed.

Examples:
  • Demo
  • View Source
Finds odd table rows, matching the second, fourth and so on (index 1, 3, 5 etc.).

$("tr:odd").css("background-color", "#bbbbff");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("tr:odd").css("background-color", "#bbbbff");
  });
  </script>
  <style>
  table {
    background:#f3f7f5;
  }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/odd"

Categories: API | Selectors/odd | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/eq - jQuery JavaScript Library

  • Blog

Selectors/eq

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:eq(index)

  • Overview
  • Options
  • Examples
  • Discuss

Matches a single element by its index.
Arguments:
index Number
Zero-based index of the element to match.

Examples:
  • Demo
  • View Source
Finds the third td. (annoying blink isn't it)

$("td:eq(2)").css("text-decoration", "blink");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("td:eq(2)").css("text-decoration", "blink");
  });
  </script>

</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/eq"

Categories: API | Selectors/eq | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/gt - jQuery JavaScript Library

  • Blog

Selectors/gt

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:gt(index)

  • Overview
  • Options
  • Examples
  • Discuss

Matches all elements with an index above the given one.
Arguments:
index Number
Zero-based index.

Examples:
  • Demo
  • View Source
Finds TD #5 and higher. Reminder: the indexing starts at 0.

$("td:gt(4)").css("text-decoration", "line-through");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("td:gt(4)").css("text-decoration", "line-through");
  });
  </script>

</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/gt"

Categories: API | Selectors/gt | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/lt - jQuery JavaScript Library

  • Blog

Selectors/lt

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:lt(index)

  • Overview
  • Options
  • Examples
  • Discuss

Matches all elements with an index below the given one.
Arguments:
index Number
Zero-based index.

Examples:
  • Demo
  • View Source
Finds TDs less than the one with the 4th index (TD#4).

$("td:lt(4)").css("color", "red");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("td:lt(4)").css("color", "red");
  });
  </script>

</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/lt"

Categories: API | Selectors/lt | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/header - jQuery JavaScript Library

  • Blog

Selectors/header

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:header

  • Overview
  • Options
  • Examples
  • Discuss

Matches all elements that are headers, like h1, h2, h3 and so on.

Examples:
  • Demo
  • View Source
Adds a background and text color to all the headers on the page.

$(":header").css({ background:'#CCC', color:'blue' });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $(":header").css({ background:'#CCC', color:'blue' });
  });
  </script>
  <style>
  body { font-size: 10px; font-family: Arial; }
  h1, h2 { margin: 3px 0; }
  </style>
</head>
<body>
  <h1>Header 1</h1>
  <p>Contents 1</p>
  <h2>Header 2</h2>
  <p>Contents 2</p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/header"

Categories: API | Selectors/header | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/animated - jQuery JavaScript Library

  • Blog

Selectors/animated

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:animated

  • Overview
  • Options
  • Examples
  • Discuss

Matches all elements that are currently being animated.

Examples:
  • Demo
  • View Source
Change the color of any div that is animated.

    $("#run").click(function(){
      $("div:animated").toggleClass("colored");
    });
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
    }
    animateIt();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("#run").click(function(){
      $("div:animated").toggleClass("colored");
    });
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
    }
    animateIt();

  });
  </script>
  <style>
  div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left; }
  div.colored { background:green; }
  </style>
</head>
<body>
  <button id="run">Run</button>
  <div></div>
  <div id="mover"></div>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/animated"

Categories: API | Events/click | Selectors/animated | Attributes/toggleClass | Effects/slideToggle

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/contains - jQuery JavaScript Library

  • Blog

Selectors/contains

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:contains(text)

  • Overview
  • Options
  • Examples
  • Discuss

Matches elements which contain the given text.
Arguments:
text String
A string of text to look for. It's case sensitive.

Examples:
  • Demo
  • View Source
Finds all divs containing "John" and underlines them.

$("div:contains('John')").css("text-decoration", "underline");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("div:contains('John')").css("text-decoration", "underline");
  });
  </script>

</head>
<body>
  <div>John Resig</div>
  <div>George Martin</div>
  <div>Malcom John Sinclair</div>
  <div>J. Ohn
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/contains"

Categories: API | Selectors/contains | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/empty - jQuery JavaScript Library

  • Blog

Selectors/empty

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:empty

  • Overview
  • Options
  • Examples
  • Discuss

Matches all elements that have no children (including text nodes).

Examples:
  • Demo
  • View Source
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)');

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');
  });
  </script>
  <style>
  td { text-align:center; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/empty"

Categories: API | Selectors/empty | Attributes/text | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/has - jQuery JavaScript Library

  • Blog

Selectors/has

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:has(selector)

  • Overview
  • Options
  • Examples
  • Discuss

Matches elements which contain at least one element that matches the specified selector.
Arguments:
selector Selector
A selector with which to filter by.

Examples:
  • Demo
  • View Source
Adds the class "test" to all divs that have a paragraph inside of them.

$("div:has(p)").addClass("test");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("div:has(p)").addClass("test");
  });
  </script>
  <style>
  .test{ border: 3px inset red; }
  </style>
</head>
<body>
  <div><p>Hello in a paragraph</p></div>
  <div>Hello again! (with no paragraph)</div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/has"

Categories: API | Selectors/has | Attributes/addClass

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/parent - jQuery JavaScript Library

  • Blog

Selectors/parent

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:parent

  • Overview
  • Options
  • Examples
  • Discuss

Matches all elements that are parents - they have child elements, including text.

Examples:
  • Demo
  • View Source
Finds all tds with children, including text.

$("td:parent").fadeTo(1500, 0.3);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("td:parent").fadeTo(1500, 0.3);
  });
  </script>
  <style>
td { width:40px; background:green; }
  </style>
</head>
<body>
  <table border="1">
    <tr><td>Value 1</td><td></td></tr>
    <tr><td>Value 2</td><td></td></tr>
  </table>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/parent"

Categories: API | Selectors/parent | Effects/fadeTo

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/hidden - jQuery JavaScript Library

  • Blog

Selectors/hidden

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:hidden

  • Overview
  • Options
  • Examples
  • Discuss

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

Examples:
  • Demo
  • View Source
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.");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    // 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.");

  });
  </script>
  <style>
  div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
  span { display:block; clear:left; color:red; }
  .starthidden { display:none; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/hidden"

Categories: API | Selectors/first | Attributes/text | Selectors/hidden | Core/length | Effects/show | Selectors/last

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/visible - jQuery JavaScript Library

  • Blog

Selectors/visible

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:visible

  • Overview
  • Options
  • Examples
  • Discuss

Matches all elements that are visible.

Examples:
  • Demo
  • View Source
Make all visible divs turn yellow on click.

    $("div:visible").click(function () {
      $(this).css("background", "yellow");
    });
    $("button").click(function () {
      $("div:hidden").show("fast");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div:visible").click(function () {
      $(this).css("background", "yellow");
    });
    $("button").click(function () {
      $("div:hidden").show("fast");
    });

  });
  </script>
  <style>
  div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
  .starthidden { display:none; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/visible"

Categories: API | Selectors/visible | Events/click | CSS/css | Selectors/hidden | Effects/show

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/attributeHas - jQuery JavaScript Library

  • Blog

Selectors/attributeHas

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

[attribute]

  • Overview
  • Options
  • Examples
  • Discuss

Matches elements that have the specified attribute.
Arguments:
attribute String
An attribute name.

Examples:
  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div[id]").one("click", function(){
      var idString = $(this).text() + " = " + $(this).attr("id");
      $(this).text(idString);
    });

  });
  </script>

</head>
<body>
  <div>no id</div>
  <div id="hey">with id</div>
  <div id="there">has an id</div>
  <div>nope</div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/attributeHas"

Categories: API | Events/one | Attributes/text | Attributes/attr

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/attributeEquals - jQuery JavaScript Library

  • Blog

Selectors/attributeEquals

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

[attribute=value]

  • Overview
  • Options
  • Examples
  • Discuss

Matches elements that have the specified attribute with a certain value.
Arguments:
attribute | String
An attribute name.
value | String
An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]".

Examples:
  • Demo
  • View Source
Finds all inputs with name 'newsletter' and changes the text of the span next to it.

$("input[name='newsletter']").next().text(" is newsletter");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("input[name='newsletter']").next().text(" is newsletter");
  });
  </script>

</head>
<body>
  <div>
    <input type="radio" name="newsletter" value="Hot Fuzz" />
    <span>name?</span>
  </div>
  <div>
    <input type="radio" name="newsletter" value="Cold Fusion" />
    <span>name?</span>
  </div>
  <div>
    <input type="radio" name="accept" value="Evil Plans" />
    <span>name?</span>
  </div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/attributeEquals"

Categories: API | Traversing/next | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/attributeNotEqual - jQuery JavaScript Library

  • Blog

Selectors/attributeNotEqual

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

[attribute!=value]

  • Overview
  • Options
  • Examples
  • Discuss

Matches elements that don't have the specified attribute with a certain value.
Arguments:
attribute | String
An attribute name.
value | String
An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]".

Examples:
  • Demo
  • View Source
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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("input[name!='newsletter']").next().text(" is not newsletter");
  });
  </script>

</head>
<body>
  <div>
    <input type="radio" name="newsletter" value="Hot Fuzz" />
    <span>name?</span>
  </div>
  <div>
    <input type="radio" name="newsletter" value="Cold Fusion" />
    <span>name?</span>
  </div>
  <div>
    <input type="radio" name="accept" value="Evil Plans" />
    <span>name?</span>
  </div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/attributeNotEqual"

Categories: API | Traversing/next | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/attributeStartsWith - jQuery JavaScript Library

  • Blog

Selectors/attributeStartsWith

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

[attribute^=value]

  • Overview
  • Options
  • Examples
  • Discuss

Matches elements that have the specified attribute and it starts with a certain value.
Arguments:
attribute | String
An attribute name.
value | String
An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]".

Examples:
  • Demo
  • View Source
Finds all inputs with an attribute name that starts with 'news' and puts text in them.

$("input[name^='news']").val("news here!");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("input[name^='news']").val("news here!");
  });
  </script>

</head>
<body>
  <input name="newsletter" />
  <input name="milkman" />
  <input name="newsboy" />
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/attributeStartsWith"

Categories: API | Attributes/val

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/attributeEndsWith - jQuery JavaScript Library

  • Blog

Selectors/attributeEndsWith

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

[attribute$=value]

  • Overview
  • Options
  • Examples
  • Discuss

Matches elements that have the specified attribute and it ends with a certain value.
Arguments:
attribute | String
An attribute name.
value | String
An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]".

Examples:
  • Demo
  • View Source
Finds all inputs with an attribute name that ends with 'letter' and puts text in them.

$("input[name$='letter']").val("a letter");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("input[name$='letter']").val("a letter");
  });
  </script>

</head>
<body>
  <input name="newsletter" />
  <input name="milkman" />
  <input name="jobletter" />
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/attributeEndsWith"

Categories: API | Attributes/val

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/attributeContains - jQuery JavaScript Library

  • Blog

Selectors/attributeContains

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

[attribute*=value]

  • Overview
  • Options
  • Examples
  • Discuss

Matches elements that have the specified attribute and it contains a certain value.
Arguments:
attribute | String
An attribute name.
value | String
An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]".

Examples:
  • Demo
  • View Source
Finds all inputs that with a name attribute that contains 'man' and sets the value with some text.

$("input[name*='man']").val("has man in it!");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("input[name*='man']").val("has man in it!");
  });
  </script>

</head>
<body>
  <input name="man-news" />
  <input name="milkman" />
  <input name="letterman2" />
  <input name="newmilk" />
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/attributeContains"

Categories: API | Attributes/val

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/attributeMultiple - jQuery JavaScript Library

  • Blog

Selectors/attributeMultiple

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

[selector1][selector2][selectorN]

  • Overview
  • Options
  • Examples
  • Discuss

Matches elements that have the specified attribute and it contains a certain value.
Arguments:

selector1 | Selector
An attribute selector.
selector2 | Selector
Another attribute selector, reducing the selection even more
selectorN (Optional) | Selector
As many more attribute selectors as necessary

Examples:
  • Demo
  • View Source
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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("input[id][name$='man']").val("only this one");
  });
  </script>

</head>
<body>
  <input id="man-news" name="man-news" />
  <input name="milkman" />
  <input id="letterman" name="new-letterman" />
  <input name="newmilk" />
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/attributeMultiple"

Categories: API | Attributes/val

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/nthChild - jQuery JavaScript Library

  • Blog

Selectors/nthChild

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:nth-child(index/even/odd/equation)

  • Overview
  • Options
  • Examples
  • Discuss

Matches the nth-child of its parent or all its even or odd children.
While :eq(index) 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.
Arguments:
index Number/String
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:
  • Demo
  • View Source
Finds the second li in each matched ul and notes it.

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("ul li:nth-child(2)").append("<span> - 2nd!</span>");
  });
  </script>
  <style>
  div { float:left; }
  span { color:blue; }
  </style>
</head>
<body>
  <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>
</body>
</html>

  • Demo
  • View Source
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", "#e2e1fb");
      $("#inner").text(str);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("button").click(function () {
      var str = $(this).text();
      $("tr").css("background", "white");
      $("tr" + str).css("background", "#e2e1fb");
      $("#inner").text(str);
    });

  });
  </script>
  <style>
  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; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/nthChild"

Categories: API | Manipulation/append | Selectors/even | Selectors/odd | Events/click | Attributes/text | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/firstChild - jQuery JavaScript Library

  • Blog

Selectors/firstChild

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:first-child

  • Overview
  • Options
  • Examples
  • Discuss

Matches the first child of its parent.
While :first matches only a single element, this matches more then one: One for each parent.

Examples:
  • Demo
  • View Source
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");
            });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div span:first-child")
        .css("text-decoration", "underline")
        .hover(function () {
              $(this).addClass("sogreen");
            }, function () {
              $(this).removeClass("sogreen");
            });

  });
  </script>
  <style>
  span { color:#008; }
  span.sogreen { color:green; font-weight: bolder; }
  </style>
</head>
<body>
  <div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon</span>
  </div>
  <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph</span>
  </div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/firstChild"

Categories: API | CSS/css | Events/hover | Attributes/addClass | Attributes/removeClass

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/lastChild - jQuery JavaScript Library

  • Blog

Selectors/lastChild

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:last-child

  • Overview
  • Options
  • Examples
  • Discuss

Matches the last child of its parent.
While :last matches only a single element, this matches more then one: One for each parent.

Examples:
  • Demo
  • View Source
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");
            });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div span:last-child")
        .css({color:"red", fontSize:"80%"})
        .hover(function () {
              $(this).addClass("solast");
            }, function () {
              $(this).removeClass("solast");
            });

  });
  </script>
  <style>
  span.solast { text-decoration:line-through; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/lastChild"

Categories: API | CSS/css | Events/hover | Attributes/addClass | Attributes/removeClass

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/onlyChild - jQuery JavaScript Library

  • Blog

Selectors/onlyChild

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:only-child

  • Overview
  • Options
  • Examples
  • Discuss

Matches the only child of its parent.
If the parent has other child elements, nothing is matched.

Examples:
  • Demo
  • View Source
Finds the button with no siblings in each matched div and modifies look.

$("div button:only-child").text("Alone").css("border", "2px blue solid");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("div button:only-child").text("Alone").css("border", "2px blue solid");
  });
  </script>
  <style>
  div { width:100px; height:80px; margin:5px; float:left; background:#b9e }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/onlyChild"

Categories: API | Attributes/text | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/input - jQuery JavaScript Library

  • Blog

Selectors/input

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:input

  • Overview
  • Options
  • Examples
  • Discuss

Matches all input, textarea, select and button elements.

Examples:
  • Demo
  • View Source
Finds all input elements.

    var allInputs = $(":input");
    var formChildren = $("form > *");
    $("div").text("Found " + allInputs.length + " inputs and the form has " +
                             formChildren.length + " children.")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var allInputs = $(":input");
    var formChildren = $("form > *");
    $("div").text("Found " + allInputs.length + " inputs and the form has " +
                             formChildren.length + " children.")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/input"

Categories: API | Selectors/input | Attributes/text | Core/length | CSS/css | Events/submit

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/text - jQuery JavaScript Library

  • Blog

Selectors/text

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:text

  • Overview
  • Options
  • Examples
  • Discuss

Matches all input elements of type text.

Examples:
  • Demo
  • View Source
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/text"

Categories: API | Selectors/text | CSS/css | Attributes/text | Core/length | Events/submit

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/password - jQuery JavaScript Library

  • Blog

Selectors/password

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:password

  • Overview
  • Options
  • Examples
  • Discuss

Matches all input elements of type password.

Examples:
  • Demo
  • View Source
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/password"

Categories: API | Selectors/password | CSS/css | Attributes/text | Core/length | Events/submit

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/radio - jQuery JavaScript Library

  • Blog

Selectors/radio

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:radio

  • Overview
  • Options
  • Examples
  • Discuss

Matches all input elements of type radio.

Examples:
  • Demo
  • View Source
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/radio"

Categories: API | Selectors/radio | CSS/css | Attributes/text | Core/length | Events/submit

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/checkbox - jQuery JavaScript Library

  • Blog

Selectors/checkbox

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:checkbox

  • Overview
  • Options
  • Examples
  • Discuss

Matches all input elements of type checkbox.

Examples:
  • Demo
  • View Source
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/checkbox"

Categories: API | Selectors/checkbox | CSS/css | Attributes/text | Core/length | Events/submit

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/submit - jQuery JavaScript Library

  • Blog

Selectors/submit

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:submit

  • Overview
  • Options
  • Examples
  • Discuss

Matches all input elements of type submit.

Examples:
  • Demo
  • View Source
Finds all submit inputs.

    var input = $(":submit").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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var input = $(":submit").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

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/submit"

Categories: API | Selectors/submit | CSS/css | Attributes/text | Core/length | Events/submit

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/image - jQuery JavaScript Library

  • Blog

Selectors/image

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:image

  • Overview
  • Options
  • Examples
  • Discuss

Matches all input elements of type image.

Examples:
  • Demo
  • View Source
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/image"

Categories: API | Selectors/image | CSS/css | Attributes/text | Core/length | Events/submit

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/reset - jQuery JavaScript Library

  • Blog

Selectors/reset

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:reset

  • Overview
  • Options
  • Examples
  • Discuss

Matches all input elements of type reset.

Examples:
  • Demo
  • View Source
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/reset"

Categories: API | Selectors/reset | CSS/css | Attributes/text | Core/length | Events/submit

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/button - jQuery JavaScript Library

  • Blog

Selectors/button

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:button

  • Overview
  • Options
  • Examples
  • Discuss

Matches all input elements of type button.

Examples:
  • Demo
  • View Source
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/button"

Categories: API | Selectors/button | CSS/css | Attributes/text | Core/length | Events/submit

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/file - jQuery JavaScript Library

  • Blog

Selectors/file

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:file

  • Overview
  • Options
  • Examples
  • Discuss

Matches all input elements of type file.

Examples:
  • Demo
  • View Source
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/file"

Categories: API | Selectors/file | CSS/css | Attributes/text | Core/length | Events/submit

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/enabled - jQuery JavaScript Library

  • Blog

Selectors/enabled

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:enabled

  • Overview
  • Options
  • Examples
  • Discuss

Matches all elements that are enabled.

Examples:
  • Demo
  • View Source
Finds all input elements that are enabled.

$("input:enabled").val("this is it");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("input:enabled").val("this is it");
  });
  </script>

</head>
<body>
  <form>
    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/enabled"

Categories: API | Selectors/enabled | Attributes/val

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/disabled - jQuery JavaScript Library

  • Blog

Selectors/disabled

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:disabled

  • Overview
  • Options
  • Examples
  • Discuss

Matches all elements that are disabled.

Examples:
  • Demo
  • View Source
Finds all input elements that are disabled.

$("input:disabled").val("this is it");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("input:disabled").val("this is it");
  });
  </script>

</head>
<body>
  <form>
    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/disabled"

Categories: API | Selectors/disabled | Attributes/val

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/checked - jQuery JavaScript Library

  • Blog

Selectors/checked

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:checked

  • Overview
  • Options
  • Examples
  • Discuss

Matches all elements that are checked.

Examples:
  • Demo
  • View Source
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);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    function countChecked() {
      var n = $("input:checked").length;
      $("div").text(n + (n == 1 ? " is" : " are") + " checked!");
    }
    countChecked();
    $(":checkbox").click(countChecked);

  });
  </script>
  <style>
  div { color:red; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/checked"

Categories: API | Selectors/checked | Core/length | Attributes/text | Events/click

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Selectors/selected - jQuery JavaScript Library

  • Blog

Selectors/selected

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

[edit]

:selected

  • Overview
  • Options
  • Examples
  • Discuss

Matches all elements that are selected.

Examples:
  • Demo
  • View Source
Attaches a change even 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');

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .trigger('change');

  });
  </script>
  <style>
  div { color:red; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Selectors/selected"

Categories: API | Events/change | Selectors/selected | Core/each | Attributes/text | Events/trigger

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


API/1.2/Attributes - jQuery JavaScript Library

  • Blog

API/1.2/Attributes

From jQuery JavaScript Library

(Redirected from Attributes)
Jump to: navigation, search

Name Type
Attr:

Name | Type
attr( name ) | Returns: Object
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.
attr( properties ) | Returns: jQuery
Set a key/value object as properties to all matched elements.
attr( key, value ) | Returns: jQuery
Set a single property to a value, on all matched elements.
attr( key, fn ) | Returns: jQuery
Set a single property to a computed value, on all matched elements.
removeAttr( name ) | Returns: jQuery
Remove an attribute from each of the matched elements.
Class:

Name | Type
addClass( class ) | Returns: jQuery
Adds the specified class(es) to each of the set of matched elements.
removeClass( class ) | Returns: jQuery
Removes all or the specified class(es) from the set of matched elements.
toggleClass( class ) | Returns: jQuery
Adds the specified class if it is not present, removes the specified class if it is present.
HTML:

Name | Type
html( ) | Returns: String
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).
html( val ) | Returns: jQuery
Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).
Text:

Name | Type
text( ) | Returns: String
Get the combined text contents of all matched elements.
text( val ) | Returns: jQuery
Set the text contents of all matched elements.
Value:

Name | Type
val( ) | Returns: String, Array
Get the content of the value attribute of the first matched element.
val( val ) | Returns: jQuery
Set the value attribute of every matched element.
val( val ) | Returns: jQuery
Checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.

Retrieved from "http://docs.jquery.com/API/1.2/Attributes"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Attributes/attr - jQuery JavaScript Library

  • Blog

Attributes/attr

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Attributes

[edit]

attr( name )

  • Overview
  • Options
  • Examples
  • Discuss

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.
Arguments:
name String
The name of the property to access.

Examples:
  • Demo
  • View Source
Finds the title attribute of the first <em> in the page.

    var title = $("em").attr("title");
    $("div").text(title);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var title = $("em").attr("title");
    $("div").text(title);

  });
  </script>
  <style>
  em { color:blue; font-weight;bold; }
  div { color:red; }
  </style>
</head>
<body>
  <p>
    Once there was a <em title="huge, gigantic">large</em> dinosaur...
  </p>
  The title of the emphasis is:<div></div>
</body>
</html>

Name Type

[edit]

attr( properties )

  • Overview
  • Options
  • Examples
  • Discuss

Set a key/value object as properties to all matched elements.
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 ).
Arguments:
properties Map
Key/value pairs to set as object properties.

Examples:
  • Demo
  • View Source
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"));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("img").attr({
          src: "/images/hat.gif",
          title: "jQuery",
          alt: "jQuery Logo"
        });
    $("div").text($("img").attr("alt"));

  });
  </script>
  <style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
  </style>
</head>
<body>
  <img />
  <img />
  <img />
  <div></div>
</body>
</html>

Name Type

[edit]

attr( key, value )

  • Overview
  • Options
  • Examples
  • Discuss

Set a single property to a value, on all matched elements.
Arguments:
key | String
The name of the property to set.
value | Object
The value to set the property to.

Examples:
  • Demo
  • View Source
Disables buttons greater than the 0th button.

$("button:gt(0)").attr("disabled","disabled");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("button:gt(0)").attr("disabled","disabled");
  });
  </script>
  <style>
  button { margin:10px; }
  </style>
</head>
<body>
  <button>0th Button</button>
  <button>1st Button</button>
  <button>2nd Button</button>
</body>
</html>

Name Type

[edit]

attr( key, fn )

  • Overview
  • Options
  • Examples
  • Discuss

Set a single property to a computed value, on all matched elements.
Instead of supplying a string value as described above, a function is provided that computes the value.
Arguments:
key | String
The name of the property to set.
fn | Function
A function returning the value to set. Scope: Current element, argument: Index of current element
function callback(indexArray) {
  // indexArray[0] == position in the jQuery object
  this; // dom element
}

Examples:
  • Demo
  • View Source
Sets id for divs based on the position in the page.

    $("div").attr("id", function (arr) {
          return "div-id" + arr[0];
        })
        .each(function () {
          $("span", this).html("(ID = '<b>" + this.id + "</b>')");
        });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div").attr("id", function (arr) {
          return "div-id" + arr[0];
        })
        .each(function () {
          $("span", this).html("(ID = '<b>" + this.id + "</b>')");
        });

  });
  </script>
  <style>
  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }
  </style>
</head>
<body>
  <div>Zero-th <span></span></div>
  <div>First <span></span></div>
  <div>Second <span></span></div>
</body>
</html>

  • Demo
  • View Source
Sets src attribute from title attribute on the image.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

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

  });
  </script>

</head>
<body>
  <img title="hat.gif"/>
  <img title="hat-old.gif"/>
  <img title="hat2-old.gif"/>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Attributes/attr"

Categories: Attributes/attr | API | Attributes/text | Selectors/gt | Core/each | Core/$ | Attributes/html

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Attributes/removeAttr - jQuery JavaScript Library

  • Blog

Attributes/removeAttr

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Attributes

[edit]

removeAttr( name )

  • Overview
  • Options
  • Examples
  • Discuss

Remove an attribute from each of the matched elements.
Arguments:
name String
The name of the property to remove.

Examples:
  • Demo
  • View Source
Clicking the button enables the input next to it.

    $("button").click(function () {
      $(this).next().removeAttr("disabled")
             .focus()
             .val("editable now");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("button").click(function () {
      $(this).next().removeAttr("disabled")
             .focus()
             .val("editable now");
    });

  });
  </script>

</head>
<body>
  <button>Enable</button>
  <input type="text" disabled="disabled" value="can't edit this" />
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Attributes/removeAttr"

Categories: Attributes/removeAttr | API | Events/click | Traversing/next | Events/focus | Attributes/val

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Attributes/addClass - jQuery JavaScript Library

  • Blog

Attributes/addClass

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Attributes

[edit]

addClass( class )

  • Overview
  • Options
  • Examples
  • Discuss

Adds the specified class(es) to each of the set of matched elements.
Arguments:
class String
One or more CSS classes to add to the elements, these are separated by spaces.

Examples:
  • Demo
  • View Source
Adds the class 'selected' to the matched elements.

$("p:last").addClass("selected");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p:last").addClass("selected");
  });
  </script>
  <style>
  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
</body>
</html>

  • Demo
  • View Source
Adds the classes 'selected' and 'highlight' to the matched elements.

$("p:last").addClass("selected highlight");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p:last").addClass("selected highlight");
  });
  </script>
  <style>
  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Attributes/addClass"

Categories: Attributes/addClass | API | Core/$ | Selectors/last

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Attributes/removeClass - jQuery JavaScript Library

  • Blog

Attributes/removeClass

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Attributes

[edit]

removeClass( class )

  • Overview
  • Options
  • Examples
  • Discuss

Removes all or the specified class(es) from the set of matched elements.
Arguments:
class String (optional)
One or more CSS classes to remove from the elements, these are separated by spaces.

Examples:
  • Demo
  • View Source
Remove the class 'blue' from the matched elements.

$("p:even").removeClass("blue");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p:even").removeClass("blue");
  });
  </script>
  <style>
  p { margin: 4px; font-size:16px; font-weight:bolder; }
  .blue { color:blue; }
  .under { text-decoration:underline; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
  <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>
</body>
</html>

  • Demo
  • View Source
Remove the class 'blue' and 'under' from the matched elements.

$("p:odd").removeClass("blue under");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p:odd").removeClass("blue under");
  });
  </script>
  <style>
  p { margin: 4px; font-size:16px; font-weight:bolder; }
  .blue { color:blue; }
  .under { text-decoration:underline; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
  <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>
</body>
</html>

  • Demo
  • View Source
Remove all the classes from the matched elements.

$("p:eq(1)").removeClass();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p:eq(1)").removeClass();
  });
  </script>
  <style>
  p { margin: 4px; font-size:16px; font-weight:bolder; }
  .blue { color:blue; }
  .under { text-decoration:underline; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Attributes/removeClass"

Categories: Attributes/removeClass | API | Selectors/even | Selectors/odd | Selectors/eq

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Attributes/toggleClass - jQuery JavaScript Library

  • Blog

Attributes/toggleClass

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Attributes

[edit]

toggleClass( class )

  • Overview
  • Options
  • Examples
  • Discuss

Adds the specified class if it is not present, removes the specified class if it is present.
Arguments:
class String
A CSS class to toggle on the elements.

Examples:
  • Demo
  • View Source
Toggle the class 'highlight' when a paragraph is clicked.

    $("p").click(function () {
      $(this).toggleClass("highlight");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").click(function () {
      $(this).toggleClass("highlight");
    });

  });
  </script>
  <style>
  p { margin: 4px; font-size:16px; font-weight:bolder;
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
  <p class="blue">Click to toggle</p>
  <p class="blue highlight">highlight</p>
  <p class="blue">on these</p>
  <p class="blue">paragraphs</p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Attributes/toggleClass"

Categories: Attributes/toggleClass | API | Events/click

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Attributes/html - jQuery JavaScript Library

  • Blog

Attributes/html

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Attributes

[edit]

html( )

  • Overview
  • Options
  • Examples
  • Discuss

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).

Examples:
  • Demo
  • View Source
Click a paragraph to convert it from html to text.

    $("p").click(function () {
      var htmlStr = $(this).html();
      $(this).text(htmlStr);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").click(function () {
      var htmlStr = $(this).html();
      $(this).text(htmlStr);
    });

  });
  </script>
  <style>
  p { margin:8px; font-size:20px; color:blue;
      cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

[edit]

html( val )

  • Overview
  • Options
  • Examples
  • Discuss

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

Examples:
  • Demo
  • View Source
Add some html to each div.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("div").html("<span class='red'>Hello <b>Again</b></span>");
  });
  </script>
  <style>
  .red { color:red; }
  </style>
</head>
<body>
  <span>Hello</span>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

  • Demo
  • View Source
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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div").html("<b>Wow!</b> Such excitement...");
    $("div b").append(document.createTextNode("!!!"))
              .css("color", "red");

  });
  </script>
  <style>
  div { color:blue; font-size:18px; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Attributes/html"

Categories: Attributes/html | API | Events/click | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Attributes/text - jQuery JavaScript Library

  • Blog

Attributes/text

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Attributes

[edit]

text( )

  • Overview
  • Options
  • Examples
  • Discuss

Get the combined text contents of all matched elements.
The result is a string that contains the combined text contents of all matched elements. This method works on both HTML and XML documents.

Examples:
  • Demo
  • View Source
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);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var str = $("p:first").text();
    $("p:last").html(str);

  });
  </script>
  <style>
  p { color:blue; margin:8px; }
  b { color:red; }
  </style>
</head>
<body>
  <p><b>Test</b> Paragraph.</p>
  <p></p>
</body>
</html>

Name Type

[edit]

text( val )

  • Overview
  • Options
  • Examples
  • Discuss

Set the text contents of all matched elements.
Similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities).
Arguments:
val String
The text value to set the contents of the element to.

Examples:
  • Demo
  • View Source
Add text to the paragraph (notice the bold tag is escaped).

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").text("<b>Some</b> new text.");
  });
  </script>
  <style>
  p { color:blue; margin:8px; }
  </style>
</head>
<body>
  <p>Test Paragraph.</p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Attributes/text"

Categories: Attributes/text | API | Selectors/first | Selectors/last | Attributes/html | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Attributes/val - jQuery JavaScript Library

  • Blog

Attributes/val

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Attributes

[edit]

val( )

  • Overview
  • Options
  • Examples
  • Discuss

Get the content of the value attribute of the first matched element.
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 fieldValue function of the Form Plugin.

Examples:
  • Demo
  • View Source
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();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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();

  });
  </script>
  <style>
  p { color:red; margin:4px; }
  b { color:blue; }
  </style>
</head>
<body>
  <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>
</body>
</html>

  • Demo
  • View Source
Find the value of an input box.

    $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();

  });
  </script>
  <style>
  p { color:blue; margin:8px; }
  </style>
</head>
<body>
  <input type="text" value="some text"/>
  <p></p>
</body>
</html>

Name Type

[edit]

val( val )

  • Overview
  • Options
  • Examples
  • Discuss

Set the value attribute of every matched element.
In jQuery 1.2, this is also able to set the value of select elements, but selecting the appropriate options.
Arguments:
val String
The value to set on the matched element.

Examples:
  • Demo
  • View Source
Set the value of an input box.

    $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });

  });
  </script>
  <style>
  button { margin:4px; cursor:pointer; }
  input { margin:4px; color:blue; }
  </style>
</head>
<body>
  <div>
    <button>Feed</button>
    <button>the</button>
    <button>Input</button>
  </div>
  <input type="text" value="click a button" />
</body>
</html>

Name Type

[edit]

val( val )

  • Overview
  • Options
  • Examples
  • Discuss

Checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.
Arguments:
val Array<String>
The set of values to check/select.

Examples:
  • Demo
  • View Source
Get the single value from a single select and an array of values from a multiple select and display their values.

    $("#single").val("Single2");
    $("#multiple").val(["Multiple2", "Multiple3"]);
    $("input").val(["check2", "radio1"]);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("#single").val("Single2");
    $("#multiple").val(["Multiple2", "Multiple3"]);
    $("input").val(["check2", "radio1"]);

  });
  </script>
  <style>
  body { color:blue; }
  </style>
</head>
<body>
  <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" value="check1"/> check1
  <input type="checkbox" value="check2"/> check2
  <input type="radio" name="r" value="radio1"/> radio1
  <input type="radio" name="r" value="radio2"/> radio2
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Attributes/val"

Categories: Attributes/val | API | Attributes/html | Events/change | Events/keyup | Attributes/text | Events/click

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


API/1.2/Traversing - jQuery JavaScript Library

  • Blog

API/1.2/Traversing

From jQuery JavaScript Library

(Redirected from Traversing)
Jump to: navigation, search

Name Type
Filtering:

Name | Type
eq( index ) | Returns: jQuery
Reduce the set of matched elements to a single element.
hasClass( class ) | Returns: Boolean
Checks the current selection against a class and returns true, if at least one element of the selection has the given class.
filter( expr ) | Returns: jQuery
Removes all elements from the set of matched elements that do not match the specified expression(s).
filter( fn ) | Returns: jQuery
Removes all elements from the set of matched elements that does not match the specified function.
is( expr ) | Returns: Boolean
Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression.
map( callback ) | Returns: jQuery
Translate a set of elements in the jQuery object into another set of values in an array (which may, or may not, be elements).
not( expr ) | Returns: jQuery
Removes elements matching the specified expression from the set of matched elements.
slice( start, end ) | Returns: jQuery
Selects a subset of the matched elements.
Finding:

Name | Type
add( expr ) | Returns: jQuery
Adds more elements, matched by the given expression, to the set of matched elements.
children( expr ) | Returns: jQuery
Get a set of elements containing all of the unique immediate children of each of the matched set of elements.
contents( ) | Returns: jQuery
Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.
find( expr ) | Returns: jQuery
Searches for all elements that match the specified expression. This method is a good way to find additional descendant elements with which to process.
next( expr ) | Returns: jQuery
Get a set of elements containing the unique next siblings of each of the given set of elements.
nextAll( expr ) | Returns: jQuery
Find all sibling elements after the current element.
parent( expr ) | Returns: jQuery
Get a set of elements containing the unique parents of the matched set of elements.
parents( expr ) | Returns: jQuery
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.
prev( expr ) | Returns: jQuery
Get a set of elements containing the unique previous siblings of each of the matched set of elements.
prevAll( expr ) | Returns: jQuery
Find all sibling elements before the current element.
siblings( expr ) | Returns: jQuery
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.
Chaining:

Name | Type
andSelf( ) | Returns: jQuery
Add the previous selection to the current selection.
end( ) | Returns: jQuery
Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state (right before the destructive operation).

Retrieved from "http://docs.jquery.com/API/1.2/Traversing"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/eq - jQuery JavaScript Library

  • Blog

Traversing/eq

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

eq( index )

  • Overview
  • Options
  • Examples
  • Discuss

Reduce the set of matched elements to a single element.
The position of the element in the set of matched elements starts at 0 and goes to length - 1.
Arguments:
index Integer
The index of the element in the jQuery object.

Examples:
  • Demo
  • View Source
Turn the div with index 2 red by adding an appropriate class.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

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

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:10px; float:left;
        border:2px solid blue; }
  .red { background:red; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/eq"

Categories: Traversing/eq | API | Attributes/addClass

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/hasClass - jQuery JavaScript Library

  • Blog

Traversing/hasClass

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

hasClass( class )

  • Overview
  • Options
  • Examples
  • Discuss

Checks the current selection against a class and returns true, if at least one element of the selection has the given class.
This is an alternative to is("." + class).
Arguments:
class String
The class to match.

Examples:
  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("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);
    });

  });
  </script>
  <style>
  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; }
  </style>
</head>
<body>
  <span></span><div class="protected"></div>
  <span></span><div></div>
  <span></span><div></div>
  <span></span><div class="protected"></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/hasClass"

Categories: Traversing/hasClass | API | Events/click | Effects/animate

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/filter - jQuery JavaScript Library

  • Blog

Traversing/filter

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

filter( expr )

  • Overview
  • Options
  • Examples
  • Discuss

Removes all elements from the set of matched elements that do not match the specified expression(s).
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.
Arguments:
expr Expression
An expression to pass into the filter

Examples:
  • Demo
  • View Source
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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

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

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:5px; float:left;
        border:2px white solid;}
  </style>
</head>
<body>
  <div></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div></div>
</body>
</html>

  • Code
Selects all paragraphs and removes those without a class "selected".

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

  • Code
Selects all paragraphs and removes those that aren't of class "selected" or the first one.

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

Name Type

[edit]

filter( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Removes all elements from the set of matched elements that does not match the specified function.
The function is called with a context equal to the current element (just like $.each). If the function returns false, then the element is removed - anything else and the element is kept.
Arguments:
fn Function
A function to pass into the filter
function callback(indexInJQueryObject) {
  var keepItBoolean = true;

  this; // dom element

  return keepItBoolean;
}

Examples:
  • Demo
  • View Source
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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div").css("background", "#b4b0da")
            .filter(function (index) {
                  return index == 1 || $(this).attr("id") == "fourth";
                })
            .css("border", "3px double red");

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:5px; float:left;
        border:3px white solid; }
  </style>
</head>
<body>
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
  <div id="fourth"></div>
  <div id="fifth"></div>
  <div id="sixth"></div>
</body>
</html>

  • Code
Remove all elements that have a descendant ol element

$("p").filter(function(index) {
  return $("ol", this).length == 0;
});

Name Type

Retrieved from "http://docs.jquery.com/Traversing/filter"

Categories: Traversing/filter | API | CSS/css | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/is - jQuery JavaScript Library

  • Blog

Traversing/is

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

is( expr )

  • Overview
  • Options
  • Examples
  • Discuss

Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression.
If no element fits, or the expression is not valid, then the response will be 'false'. filter is used internally, therefore all rules that apply there apply here, as well.
Arguments:
expr String
The expression with which to filter

Examples:
  • Demo
  • View Source
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"});
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("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"});
    });

  });
  </script>
  <style>
  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; }
  </style>
</head>
<body>
  <div></div>
  <div class="blue"></div>
  <div></div>
  <div class="red"></div>
  <div><br/><span>Peter</span></div>
  <div class="blue"></div>
  <p> </p>
</body>
</html>

  • Demo
  • View Source
Returns true, because the parent of the input is a form element

    var isFormParent = $("input[@type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var isFormParent = $("input[@type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);

  });
  </script>
  <style>div { color:red; }</style>
</head>
<body>
  <form><input type="checkbox" /></form>
  <div></div>
</body>
</html>

  • Demo
  • View Source
Returns false, because the parent of the input is a p element

    var isFormParent = $("input[@type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var isFormParent = $("input[@type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);

  });
  </script>
  <style>div { color:red; }</style>
</head>
<body>
  <form><p><input type="checkbox" /></p></form>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/is"

Categories: Traversing/is | API | Events/one | Attributes/text | Attributes/html | Effects/hide | Effects/slideDown | CSS/css | Traversing/parent

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/map - jQuery JavaScript Library

  • Blog

Traversing/map

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

map( callback )

  • Overview
  • Options
  • Examples
  • Discuss

Translate a set of elements in the jQuery object into another set of values in an array (which may, or may not, be elements).
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 $.map().
Arguments:
callback Function
The function to execute on each element in the set.
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;
}

Examples:
  • Demo
  • View Source
Build a list of all the values within a form.

    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );

  });
  </script>
  <style>
  p { color:red; }
  </style>
</head>
<body>
  <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>
</body>
</html>

  • Demo
  • View Source
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);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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);

  });
  </script>
  <style>
  body { font-size:16px; }
  ul { float:left; margin:0 30px; color:blue; }
  #results { color:red; }
  </style>
</head>
<body>
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
  </ul>
  <ul id="results">
  </ul>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/map"

Categories: Traversing/map | API | Manipulation/append | Attributes/val | Core/get | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/not - jQuery JavaScript Library

  • Blog

Traversing/not

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

not( expr )

  • Overview
  • Options
  • Examples
  • Discuss

Removes elements matching the specified expression from the set of matched elements.
Arguments:
expr String, DOMElement, Array<DOMElement>
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:
  • Demo
  • View Source
Adds a border to divs that are not green or blue.

    $("div").not(".green, #blueone")
            .css("border-color", "red");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div").not(".green, #blueone")
            .css("border-color", "red");

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:10px; float:left;
        background:yellow; border:2px solid white; }
  .green { background:#8f8; }
  .gray { background:#ccc; }
  #blueone { background:#99f; }
  </style>
</head>
<body>
  <div></div>
  <div id="blueone"></div>
  <div></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="gray"></div>
  <div></div>
</body>
</html>

  • Code
Removes the element with the ID "selected" from the set of all paragraphs.

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

  • Code
Removes the element with the ID "selected" from the set of all paragraphs.

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

  • Code
Removes all elements that match "div p.selected" from the total set of all paragraphs.

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

Name Type

Retrieved from "http://docs.jquery.com/Traversing/not"

Categories: Traversing/not | API | CSS/css | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/slice - jQuery JavaScript Library

  • Blog

Traversing/slice

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

slice( start, [end] )

  • Overview
  • Options
  • Examples
  • Discuss

Selects a subset of the matched elements.
Behaves exactly like the built-in Array slice method.
Arguments:
start | Integer
Where to start the subset. The first element is at zero. Can be negative to start from the end of the selection.
end (Optional) | Integer
Where to end the subset. If unspecified, ends at the end of the selection.

Examples:
  • Demo
  • View Source
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);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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);

  });
  </script>
  <style>
  div { width:40px; height:40px; margin:10px; float:left;
        border:2px solid blue; }
  span { color:red; font-weight:bold; }
  button { margin:5px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

  • Code
Selects all paragraphs, then slices the selection to include only the first element.

$("p").slice(0, 1).wrapInner("<b></b>");

  • Code
Selects all paragraphs, then slices the selection to include only the first and second element.

$("p").slice(0, 2).wrapInner("<b></b>");

  • Code
Selects all paragraphs, then slices the selection to include only the second element.

$("p").slice(1, 2).wrapInner("<b></b>");

  • Code
Selects all paragraphs, then slices the selection to include only the second and third element.

$("p").slice(1).wrapInner("<b></b>");

  • Code
Selects all paragraphs, then slices the selection to include only the third element.

$("p").slice(-1).wrapInner("<b></b>");

Name Type

Retrieved from "http://docs.jquery.com/Traversing/slice"

Categories: Traversing/slice | API | Core/length | CSS/css | Attributes/text | Events/click | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/add - jQuery JavaScript Library

  • Blog

Traversing/add

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

add( expr )

  • Overview
  • Options
  • Examples
  • Discuss

Adds more elements, matched by the given expression, to the set of matched elements.
Arguments:
expr String, DOMElement, Array<DOMElement>
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:
  • Demo
  • View Source
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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div").css("border", "2px solid red")
            .add("p")
            .css("background", "yellow");

  });
  </script>
  <style>
  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; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <p>Added this... (notice no border)</p>
</body>
</html>

  • Demo
  • View Source
Adds more elements, matched by the given expression, to the set of matched elements.

$("p").add("span").css("background", "yellow");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").add("span").css("background", "yellow");
  });
  </script>

</head>
<body>
  <p>Hello</p><span>Hello Again</span>
</body>
</html>

  • Demo
  • View Source
Adds more elements, created on the fly, to the set of matched elements.

$("p").clone().add("<span>Again</span>").appendTo(document.body);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").clone().add("<span>Again</span>").appendTo(document.body);
  });
  </script>

</head>
<body>
  <p>Hello</p>
</body>
</html>

  • Demo
  • View Source
Adds one or more Elements to the set of matched elements.

$("p").add(document.getElementById("a")).css("background", "yellow");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").add(document.getElementById("a")).css("background", "yellow");
  });
  </script>

</head>
<body>
  <p>Hello</p><span id="a">Hello Again</span>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/add"

Categories: Traversing/add | API | CSS/css | Core/$ | Manipulation/clone | Manipulation/appendTo

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/children - jQuery JavaScript Library

  • Blog

Traversing/children

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

children( [expr] )

  • Overview
  • Options
  • Examples
  • Discuss

Get a set of elements containing all of the unique immediate children of each of the matched set of elements.
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.
Arguments:
expr (Optional) String
An expression to filter the child Elements with.

Examples:
  • Demo
  • View Source
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;
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("#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;
    });

  });
  </script>
  <style>
  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; }
  </style>
</head>
<body>
  <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>
</html>

  • Demo
  • View Source
Find all children of each div.

$("div").children().css("border-bottom", "3px double red");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("div").children().css("border-bottom", "3px double red");
  });
  </script>
  <style>
  body { font-size:16px; font-weight:bolder; }
  span { color:blue; }
  p { margin:5px 0; }
  </style>
</head>
<body>
  <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>
</html>

  • Demo
  • View Source
Find all children with a class "selected" of each div.

$("div").children(".selected").css("color", "blue");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("div").children(".selected").css("color", "blue");
  });
  </script>
  <style>
  body { font-size:16px; font-weight:bolder; }
  p { margin:5px 0; }
  </style>
</head>
<body>
  <div>
    <span>Hello</span>
    <p class="selected">Hello Again</p>
    <div class="selected">And Again</div>
    <p>And One Last Time</p>
  </div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/children"

Categories: Traversing/children | API | Events/click | Attributes/removeClass | Attributes/addClass | Core/length | Attributes/text | Core/$ | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/contents - jQuery JavaScript Library

  • Blog

Traversing/contents

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

contents( )

  • Overview
  • Options
  • Examples
  • Discuss

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

Examples:
  • Demo
  • View Source
Find all the text nodes inside a paragraph and wrap them with a bold tag.

$("p").contents().not("[nodeType=1]").wrap("<b/>");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").contents().not("[nodeType=1]").wrap("<b/>");
  });
  </script>

</head>
<body>
  <p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
</body>
</html>

  • Demo
  • View Source
Append some new content into an empty iframe.

$("iframe").contents().find("body").append("I'm in an iframe!");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("iframe").contents().find("body").append("I'm in an iframe!");
  });
  </script>

</head>
<body>
  <iframe src="/index-blank.html" width="300" height="100"></iframe>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/contents"

Categories: Traversing/contents | API | Traversing/not | Manipulation/wrap | Traversing/find | Manipulation/append

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/find - jQuery JavaScript Library

  • Blog

Traversing/find

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

find( expr )

  • Overview
  • Options
  • Examples
  • Discuss

Searches for all elements that match the specified expression. This method is a good way to find additional descendant elements with which to process.
All searching is done using a jQuery expression. The expression can be written using CSS 1-3 Selector syntax.
Arguments:
expr String
An expression to search with.

Examples:
  • Demo
  • View Source
Starts with all paragraphs and searches for descendant span elements, same as $("p span")

$("p").find("span").css('color','red');

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").find("span").css('color','red');
  });
  </script>

</head>
<body>
  <p><span>Hello</span>, how are you?</p>
  <p>Me? I'm <span>good</span>.</p>
</body>
</html>

  • Demo
  • View Source
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"});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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"});

  });
  </script>
  <style>
  p { font-size:20px; width:200px; cursor:default;
      color:blue; font-weight:bold; margin:0 10px; }
  .hilite { background:yellow; }
  </style>
</head>
<body>
  <p>
    When the day is short
    find that which matters to you
    or stop believing
  </p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/find"

Categories: Traversing/find | API | Core/$ | CSS/css | Attributes/text | Attributes/html | Events/hover | Attributes/addClass | Attributes/removeClass | Traversing/end | Selectors/contains

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/next - jQuery JavaScript Library

  • Blog

Traversing/next

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

next( [expr] )

  • Overview
  • Options
  • Examples
  • Discuss

Get a set of elements containing the unique next siblings of each of the given set of elements.
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.
Arguments:
expr (Optional) String
An expression with which to filter the returned set.

Examples:
  • Demo
  • View Source
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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("button[disabled]").next().text("this button is disabled");
  });
  </script>
  <style>
  span { color:blue; font-weight:bold; }
  button { width:100px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

  • Demo
  • View Source
Find the very next sibling of each paragraph that has a class "selected".

$("p").next(".selected").css("background", "yellow");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").next(".selected").css("background", "yellow");
  });
  </script>

</head>
<body>
  <p>Hello</p>
  <p class="selected">Hello Again</p>
  <div><span>And Again</span></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/next"

Categories: Traversing/next | Traversing/nextAll | API | Attributes/text | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/nextAll - jQuery JavaScript Library

  • Blog

Traversing/nextAll

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

nextAll( [expr] )

  • Overview
  • Options
  • Examples
  • Discuss

Find all sibling elements after the current element.
Use an optional expression to filter the matched set.
Arguments:
expr (Optional) String
An expression to filter the next Elements with.

Examples:
  • Demo
  • View Source
Locate all the divs after the first and give them a class.

$("div:first").nextAll().addClass("after");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("div:first").nextAll().addClass("after");
  });
  </script>
  <style>
  div { width: 80px; height: 80px; background: #abc;
        border: 2px solid black; margin: 10px; float: left; }
  div.after { border-color: red; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

  • Demo
  • View Source
Locate all the paragraphs after the second child in the body and give them a class.

    $(":nth-child(1)").nextAll("p").addClass("after");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $(":nth-child(1)").nextAll("p").addClass("after");

  });
  </script>
  <style>
  div, p { width: 60px; height: 60px; background: #abc;
           border: 2px solid black; margin: 10px; float: left; }
  .after { border-color: red; }
  </style>
</head>
<body>
  <p>p</p>
  <div>div</div>
  <p>p</p>
  <p>p</p>
  <div>div</div>
  <p>p</p>
  <div>div</div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/nextAll"

Categories: Traversing/nextAll | API | Selectors/first | Attributes/addClass

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/parent - jQuery JavaScript Library

  • Blog

Traversing/parent

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

parent( [expr] )

  • Overview
  • Options
  • Examples
  • Discuss

Get a set of elements containing the unique parents of the matched set of elements.
You may use an optional expression to filter the set of parent elements that will match.
Arguments:
expr (Optional) String
An expression to filter the parents with.

Examples:
  • Demo
  • View Source
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 + " > "));
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("*", document.body).each(function () {
      var parentTag = $(this).parent().get(0).tagName;
      $(this).prepend(document.createTextNode(parentTag + " > "));
    });

  });
  </script>
  <style>
  div,p { margin:10px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

  • Demo
  • View Source
Find the parent element of each paragraph with a class "selected".

$("p").parent(".selected").css("background", "yellow");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").parent(".selected").css("background", "yellow");
  });
  </script>

</head>
<body>
  <div><p>Hello</p></div>
  <div class="selected"><p>Hello Again</p></div>

</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/parent"

Categories: Traversing/parent | API | Core/each | Core/get | Manipulation/prepend | Core/$ | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/parents - jQuery JavaScript Library

  • Blog

Traversing/parents

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

parents( [expr] )

  • Overview
  • Options
  • Examples
  • Discuss

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.
Arguments:
expr (Optional) String
An expression to filter the ancestors with

Examples:
  • Demo
  • View Source
Find all parent elements of each span.

    var parentEls = $("b").parents()
                          .map(function () {
                                return this.tagName;
                              })
                          .get().join(", ");
    $("b").append("<strong>" + parentEls + "</strong>");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var parentEls = $("b").parents()
                          .map(function () {
                                return this.tagName;
                              })
                          .get().join(", ");
    $("b").append("<strong>" + parentEls + "</strong>");

  });
  </script>
  <style>
  b { color:blue; }
  strong { color:red; }
  </style>
</head>
<body>
  <div>
    <p>
      <span>
        <b>My parents are: </b>
      </span>
    </p>
  </div>
</body>
</html>

  • Demo
  • View Source
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();
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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();
    });

  });
  </script>
  <style>
  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; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/parents"

Categories: Traversing/parents | API | Traversing/map | Core/get | Manipulation/append | CSS/css | Core/length | Attributes/text | Events/click | Attributes/toggleClass

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/prev - jQuery JavaScript Library

  • Blog

Traversing/prev

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

prev( [expr] )

  • Overview
  • Options
  • Examples
  • Discuss

Get a set of elements containing the unique previous siblings of each of the matched set of elements.
Use an optional expression to filter the matched set. Only the immediately previous sibling is returned, not all previous siblings.
Arguments:
expr (Optional) String
An expression to filter the previous Elements with.

Examples:
  • Demo
  • View Source
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");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var $curr = $("#start");
    $curr.css("background", "#f99");
    $("button").click(function () {
      $curr = $curr.prev();
      $("div").css("background", "");
      $curr.css("background", "#f99");
    });

  });
  </script>
  <style>
  div { width:40px; height:40px; margin:10px;
        float:left; border:2px blue solid;
        padding:2px; }
  span { font-size:14px; }
  p { clear:left; margin:10px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

  • Demo
  • View Source
Find the very previous sibling of each paragraph that has a class "selected".

$("p").prev(".selected").css("background", "yellow");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").prev(".selected").css("background", "yellow");
  });
  </script>

</head>
<body>
  <div><span>Hello</span></div>
  <p class="selected">Hello Again</p>
  <p>And Again</p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/prev"

Categories: Traversing/prev | API | CSS/css | Events/click | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/prevAll - jQuery JavaScript Library

  • Blog

Traversing/prevAll

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

prevAll( [expr] )

  • Overview
  • Options
  • Examples
  • Discuss

Find all sibling elements before the current element.
Use an optional expression to filter the matched set.
Arguments:
expr (Optional) String
An expression to filter the previous Elements with.

Examples:
  • Demo
  • View Source
Locate all the divs before the last and give them a class.

$("div:last").prevAll().addClass("before");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("div:last").prevAll().addClass("before");
  });
  </script>
  <style>
  div { width:70px; height:70px; background:#abc;
        border:2px solid black; margin:10px; float:left; }
  div.before { border-color: red; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/prevAll"

Categories: Traversing/prevAll | API | Attributes/addClass

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/siblings - jQuery JavaScript Library

  • Blog

Traversing/siblings

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

siblings( [expr] )

  • Overview
  • Options
  • Examples
  • Discuss

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.
Arguments:
expr (Optional) String
An expression to filter the sibling Elements with

Examples:
  • Demo
  • View Source
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);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var len = $(".hilite").siblings()
                          .css("color", "red")
                          .length;
    $("b").text(len);

  });
  </script>
  <style>
  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; }
</style>
</head>
<body>
  <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>
</body>
</html>

  • Demo
  • View Source
Find all siblings with a class "selected" of each div.

$("p").siblings(".selected").css("background", "yellow");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").siblings(".selected").css("background", "yellow");
  });
  </script>

</head>
<body>
  <div><span>Hello</span></div>
  <p class="selected">Hello Again</p>
  <p>And Again</p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/siblings"

Categories: Traversing/siblings | API | CSS/css | Core/length | Attributes/text | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/andSelf - jQuery JavaScript Library

  • Blog

Traversing/andSelf

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

andSelf( )

  • Overview
  • Options
  • Examples
  • Discuss

Add the previous selection to the current selection.
Useful for traversing elements, and then adding something that was matched before the last traversion.

Examples:
  • Demo
  • View Source
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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

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

  });
  </script>
  <style>
  p, div { margin:5px; padding:5px; }
  .border { border: 2px solid red; }
  .background { background:yellow; }
  </style>
</head>
<body>
  <div>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/andSelf"

Categories: Traversing/andSelf | API | Traversing/find | Attributes/addClass

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Traversing/end - jQuery JavaScript Library

  • Blog

Traversing/end

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

end( )

  • Overview
  • Options
  • Examples
  • Discuss

Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state (right before the destructive operation).
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 add, andSelf, children, filter, find, map, next, nextAll, not, parent, parents, prev, prevAll, siblings and slice - plus the clone function (from Manipulation).

Examples:
  • Demo
  • View Source
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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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");

  });
  </script>
  <style>
  p, div { margin:1px; padding:1px; font-weight:bold;
           font-size:16px; }
  div { color:blue; }
  b { color:red; }
  </style>
</head>
<body>
  <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>
</body>
</html>

  • Demo
  • View Source
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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").find("span").end().css("border", "2px red solid");
  });
  </script>
  <style>p { margin:10px; padding:10px; }</style>
</head>
<body>
  <p><span>Hello</span>, how are you?</p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Traversing/end"

Categories: Traversing/end | API | Traversing/map | Core/get | Selectors/eq | Attributes/text | Traversing/find | CSS/css | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


API/1.2/Manipulation - jQuery JavaScript Library

  • Blog

API/1.2/Manipulation

From jQuery JavaScript Library

(Redirected from Manipulation)
Jump to: navigation, search

Name Type
Changing Contents:

Name | Type
html( ) | Returns: String
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).
html( val ) | Returns: jQuery
Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).
text( ) | Returns: String
Get the combined text contents of all matched elements.
text( val ) | Returns: jQuery
Set the text contents of all matched elements.
Inserting Inside:

Name | Type
append( content ) | Returns: jQuery
Append content to the inside of every matched element.
appendTo( content ) | Returns: jQuery
Append all of the matched elements to another, specified, set of elements.
prepend( content ) | Returns: jQuery
Prepend content to the inside of every matched element.
prependTo( content ) | Returns: jQuery
Prepend all of the matched elements to another, specified, set of elements.
Inserting Outside:

Name | Type
after( content ) | Returns: jQuery
Insert content after each of the matched elements.
before( content ) | Returns: jQuery
Insert content before each of the matched elements.
insertAfter( content ) | Returns: jQuery
Insert all of the matched elements after another, specified, set of elements.
insertBefore( content ) | Returns: jQuery
Insert all of the matched elements before another, specified, set of elements.
Inserting Around:

Name | Type
wrap( html ) | Returns: jQuery
Wrap all matched elements with a structure of other elements.
wrap( elem ) | Returns: jQuery
Wrap all matched elements with a structure of other elements.
wrapAll( html ) | Returns: jQuery
Wrap all the elements in the matched set into a single wrapper element.
wrapAll( elem ) | Returns: jQuery
Wrap all the elements in the matched set into a single wrapper element.
wrapInner( html ) | Returns: jQuery
Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
wrapInner( elem ) | Returns: jQuery
Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
Replacing:

Name | Type
replaceWith( content ) | Returns: jQuery
Replaces all matched elements with the specified HTML or DOM elements.
replaceAll( selector ) | Returns: jQuery
Replaces the elements matched by the specified selector with the matched elements.
Removing:

Name | Type
empty( ) | Returns: jQuery
Remove all child nodes from the set of matched elements.
remove( expr ) | Returns: jQuery
Removes all matched elements from the DOM.
Copying:

Name | Type
clone( ) | Returns: jQuery
Clone matched DOM Elements and select the clones.
clone( true ) | Returns: jQuery
Clone matched DOM Elements, and all their event handlers, and select the clones.

Retrieved from "http://docs.jquery.com/API/1.2/Manipulation"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/append - jQuery JavaScript Library

  • Blog

Manipulation/append

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

append( content )

  • Overview
  • Options
  • Examples
  • Discuss

Append content to the inside of every matched element.
This operation is similar to doing an appendChild to all the specified elements, adding them into the document.
Arguments:
content String, Element, jQuery
Content to append to the target.

Examples:
  • Demo
  • View Source
Appends some HTML to all paragraphs.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").append("<b>Hello</b>");
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>I would like to say: </p>
</body>
</html>

  • Demo
  • View Source
Appends an Element to all paragraphs.

$("p").append(document.createTextNode("Hello"));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").append(document.createTextNode("Hello"));
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>I would like to say: </p>
</body>
</html>

  • Demo
  • View Source
Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").append( $("b") );
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <b>Hello</b><p>I would like to say: </p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/append"

Categories: Manipulation/append | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/appendTo - jQuery JavaScript Library

  • Blog

Manipulation/appendTo

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

appendTo( content )

  • Overview
  • Options
  • Examples
  • Discuss

Append all of the matched elements to another, specified, set of elements.
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.
Arguments:
content String
target to which the content will be appended.

Examples:
  • Demo
  • View Source
Appends all spans to the element with the ID "foo"

$("span").appendTo("#foo"); // check append() examples

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("span").appendTo("#foo"); // check append() examples
  });
  </script>
  <style>#foo { background:yellow; }</style>
</head>
<body>
  <span>I have nothing more to say... </span>
  <div id="foo">FOO! </div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/appendTo"

Categories: Manipulation/appendTo | Manipulation/append | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/prepend - jQuery JavaScript Library

  • Blog

Manipulation/prepend

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

prepend( content )

  • Overview
  • Options
  • Examples
  • Discuss

Prepend content to the inside of every matched element.
This operation is the best way to insert elements inside, at the beginning, of all matched elements.
Arguments:
content String, Element, jQuery
Content to prepend to the target.

Examples:
  • Demo
  • View Source
Prepends some HTML to all paragraphs.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").prepend("<b>Hello </b>");
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>there friend!</p>
  <p>amigo!</p>
</body>
</html>

  • Demo
  • View Source
Prepends a DOM Element to all paragraphs.

$("p").prepend(document.createTextNode("Hello "));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").prepend(document.createTextNode("Hello "));
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>is what I'd say</p>
  <p>is what I said</p>
</body>
</html>

  • Demo
  • View Source
Prepends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").prepend( $("b") );
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p> is what was said.</p><b>Hello</b>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/prepend"

Categories: Manipulation/prepend | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/prependTo - jQuery JavaScript Library

  • Blog

Manipulation/prependTo

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

prependTo( content )

  • Overview
  • Options
  • Examples
  • Discuss

Prepend all of the matched elements to another, specified, set of elements.
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.
Arguments:
content String
target to which the content will be prepended.

Examples:
  • Demo
  • View Source
Prepends all spans to the element with the ID "foo"

$("span").prependTo("#foo"); // check prepend() examples

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("span").prependTo("#foo"); // check prepend() examples
  });
  </script>
  <style>div { background:yellow; }</style>
</head>
<body>
  <div id="foo">FOO!</div>
  <span>I have something to say... </span>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/prependTo"

Categories: Manipulation/prependTo | Manipulation/prepend | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/after - jQuery JavaScript Library

  • Blog

Manipulation/after

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

after( content )

  • Overview
  • Options
  • Examples
  • Discuss

Insert content after each of the matched elements.
Arguments:
content String, Element, jQuery
Content to insert after each target.

Examples:
  • Demo
  • View Source
Inserts some HTML after all paragraphs.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").after("<b>Hello</b>");
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>I would like to say: </p>
</body>
</html>

  • Demo
  • View Source
Inserts a DOM element after all paragraphs.

$("p").after( document.createTextNode("Hello") );

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").after( document.createTextNode("Hello") );
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>I would like to say: </p>
</body>
</html>

  • Demo
  • View Source
Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").after( $("b") );
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <b>Hello</b>
  <p>I would like to say: </p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/after"

Categories: Manipulation/after | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/before - jQuery JavaScript Library

  • Blog

Manipulation/before

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

before( content )

  • Overview
  • Options
  • Examples
  • Discuss

Insert content before each of the matched elements.
Arguments:
content String, Element, jQuery
Content to insert before each target.

Examples:
  • Demo
  • View Source
Inserts some HTML before all paragraphs.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").before("<b>Hello</b>");
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p> is what I said...</p>
</body>
</html>

  • Demo
  • View Source
Inserts a DOM element before all paragraphs.

$("p").before( document.createTextNode("Hello") );

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").before( document.createTextNode("Hello") );
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p> is what I said...</p>
</body>
</html>

  • Demo
  • View Source
Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").before( $("b") );
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p> is what I said...</p><b>Hello</b>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/before"

Categories: Manipulation/before | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/insertAfter - jQuery JavaScript Library

  • Blog

Manipulation/insertAfter

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

insertAfter( content )

  • Overview
  • Options
  • Examples
  • Discuss

Insert all of the matched elements after another, specified, set of elements.
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.
Arguments:
content String
Content after which the selected element(s) is inserted.

Examples:
  • Demo
  • View Source
Inserts all paragraphs after an element with id of "foo". Same as $("#foo").after("p")

$("p").insertAfter("#foo"); // check after() examples

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").insertAfter("#foo"); // check after() examples
  });
  </script>
  <style>#foo { background:yellow; }</style>
</head>
<body>
  <p> is what I said... </p><div id="foo">FOO!</div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/insertAfter"

Categories: Manipulation/insertAfter | Manipulation/after | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/insertBefore - jQuery JavaScript Library

  • Blog

Manipulation/insertBefore

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

insertBefore( content )

  • Overview
  • Options
  • Examples
  • Discuss

Insert all of the matched elements before another, specified, set of elements.
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.
Arguments:
content String
Content after which the selected element(s) is inserted.

Examples:
  • Demo
  • View Source
Inserts all paragraphs before an element with id of "foo". Same as $("#foo").before("p")

$("p").insertBefore("#foo"); // check before() examples

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").insertBefore("#foo"); // check before() examples
  });
  </script>
  <style>#foo { background:yellow; }</style>
</head>
<body>
  <div id="foo">FOO!</div><p>I would like to say: </p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/insertBefore"

Categories: Manipulation/insertBefore | Manipulation/before | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/wrap - jQuery JavaScript Library

  • Blog

Manipulation/wrap

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

wrap( html )

  • Overview
  • Options
  • Examples
  • Discuss

Wrap all matched elements with a structure of other elements.
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.

This does not work with elements that contain text. Any necessary text must be added after the wrapping is done.
Arguments:
html String
A string of HTML that will be created on the fly and wrapped around the target.

Examples:
  • Demo
  • View Source
Wraps a newly created div around all paragraphs.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").wrap("<div class='wrap'></div>");
  });
  </script>
  <style>.wrap {  background:#bbf; }</style>
</head>
<body>
  <p>Test Paragraph.</p>
</body>
</html>

  • Demo
  • View Source
Wraps a newly created tree of objects around each span.

$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("span").wrap("<div><div><p><em><b></b></em></p></div></div>");
  });
  </script>
  <style>
  div { border:2px blue solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  </style>
</head>
<body>
  <span>Span Text</span>
  <span>Another One</span>
</body>
</html>

Name Type

[edit]

wrap( elem )

  • Overview
  • Options
  • Examples
  • Discuss

Wrap all matched elements with a structure of other elements.
Arguments:
elem Element
A DOM element that will be wrapped around the target.

Examples:
  • Demo
  • View Source
Wraps an element with id of "content" around all paragraphs.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").wrap(document.getElementById('content'));
  });
  </script>
  <style>#content { background:#9f9; }</style>
</head>
<body>
  <p>Test Paragraph.</p><div id="content"></div>
</body>
</html>

  • Demo
  • View Source
Wraps a jQuery object (in this case a div) around all paragraphs.

$("p").wrap($("<div>"));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").wrap($("<div>"));
  });
  </script>
  <style>div { background:#f99; }</style>
</head>
<body>
  <p>Test Paragraph.</p>
  <p>Another Paragraph.</p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/wrap"

Categories: Manipulation/wrap | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/wrapAll - jQuery JavaScript Library

  • Blog

Manipulation/wrapAll

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

wrapAll( html )

  • Overview
  • Options
  • Examples
  • Discuss

Wrap all the elements in the matched set into a single wrapper element.
This is different from .wrap() 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 ancestor element within its structure -- it is that element that will enwrap everything else.
Arguments:
html String
A string of HTML that will be created on the fly and wrapped around the target.

Examples:
  • Demo
  • View Source
Wrap a new div around all of the paragraphs.

$("p").wrapAll("<div></div>");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").wrapAll("<div></div>");
  });
  </script>
  <style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>

  • Demo
  • View Source
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>");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");
  });
  </script>
  <style>
  div { border:2px blue solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  strong { color:red; }
  </style>
</head>
<body>
  <span>Span Text</span>
  <strong>What about me?</strong>
  <span>Another One</span>
</body>
</html>

Name Type

[edit]

wrapAll( elem )

  • Overview
  • Options
  • Examples
  • Discuss

Wrap all the elements in the matched set into a single wrapper element.
This is different from .wrap() where each element in the matched set would get wrapped with an element.
Arguments:
elem Element
A DOM element that will be wrapped around the target.

Examples:
  • Demo
  • View Source
Wrap a new div around all of the paragraphs.

$("p").wrapAll(document.createElement("div"));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").wrapAll(document.createElement("div"));
  });
  </script>
  <style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>

  • Demo
  • View Source
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"));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").wrapAll($(".doublediv"));
  });
  </script>
  <style>
  div { border: 2px solid blue; margin:2px; padding:2px; }
  .doublediv { border-color:red; }
  p { background:yellow; margin:4px; font-size:14px; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div class="doublediv"><div></div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/wrapAll"

Categories: Manipulation/wrapAll | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/wrapInner - jQuery JavaScript Library

  • Blog

Manipulation/wrapInner

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

wrapInner( html )

  • Overview
  • Options
  • Examples
  • Discuss

Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
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.
Arguments:
html String
A string of HTML that will be created on the fly and wrapped around the target.

Examples:
  • Demo
  • View Source
Selects all paragraphs and wraps a bold tag around each of its contents.

$("p").wrapInner("<b></b>");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").wrapInner("<b></b>");
  });
  </script>
  <style>p { background:#bbf; }</style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>

  • Demo
  • View Source
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>");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");
  });
  </script>
  <style>
  div { border:2px green solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  </style>
</head>
<body>
  Plain old text, or is it?
</body>
</html>

Name Type

[edit]

wrapInner( elem )

  • Overview
  • Options
  • Examples
  • Discuss

Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
Arguments:
elem Element
A DOM element that will be wrapped around the target.

Examples:
  • Demo
  • View Source
Selects all paragraphs and wraps a bold tag around each of its contents.

$("p").wrapInner(document.createElement("b"));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").wrapInner(document.createElement("b"));
  });
  </script>
  <style>p { background:#9f9; }</style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>

  • Demo
  • View Source
Selects all paragraphs and wraps a jQuery object around each of its contents.

$("p").wrapInner($("<span class='red'></span>"));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").wrapInner($("<span class='red'></span>"));
  });
  </script>
  <style>
  p { background:#9f9; }
  .red { color:red; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/wrapInner"

Categories: Manipulation/wrapInner | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/replaceWith - jQuery JavaScript Library

  • Blog

Manipulation/replaceWith

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

replaceWith( content )

  • Overview
  • Options
  • Examples
  • Discuss

Replaces all matched elements with the specified HTML or DOM elements.
Arguments:
content String, Element, jQuery
Content to replace the matched elements with.

Examples:
  • Demo
  • View Source
On click, replace the button with a div containing the same word.

    $("button").click(function () {
      $(this).replaceWith("<div>" + $(this).text() + "</div>");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("button").click(function () {
      $(this).replaceWith("<div>" + $(this).text() + "</div>");
    });

  });
  </script>
  <style>
  button { display:block; margin:3px; color:red; width:200px; }
  div { color:red; border:2px solid blue; width:200px;
        margin:3px; text-align:center; }
  </style>
</head>
<body>
  <button>First</button>
  <button>Second</button>
  <button>Third</button>
</body>
</html>

  • Demo
  • View Source
Replace all the paragraphs with bold words.

$("p").replaceWith("<b>Paragraph. </b>");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").replaceWith("<b>Paragraph. </b>");
  });
  </script>

</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>

  • Demo
  • View Source
Replace all the paragraphs with empty div elements.

$("p").replaceWith(document.createElement("div"));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").replaceWith(document.createElement("div"));
  });
  </script>
  <style>
  div { border:2px solid blue; margin:3px; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>

  • Demo
  • View Source
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"));
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").click(function () {
      $(this).replaceWith($("div"));
    });

  });
  </script>
  <style>
  div { border:2px solid blue; color:red; margin:3px; }
  p { border:2px solid red; color:blue; margin:3px; cursor:pointer; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div>Replaced!</div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/replaceWith"

Categories: Manipulation/replaceWith | API | Events/click

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/replaceAll - jQuery JavaScript Library

  • Blog

Manipulation/replaceAll

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

replaceAll( selector )

  • Overview
  • Options
  • Examples
  • Discuss

Replaces the elements matched by the specified selector with the matched elements.
This function is the complement to replaceWith() which does the same task with the parameters reversed.
Arguments:
selector Selector
The elements to find and replace the matched elements with.

Examples:
  • Demo
  • View Source
Replace all the paragraphs with bold words.

$("<b>Paragraph. </b>").replaceAll("p"); // check replaceWith() examples

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("<b>Paragraph. </b>").replaceAll("p"); // check replaceWith() examples
  });
  </script>

</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/replaceAll"

Categories: Manipulation/replaceAll | Manipulation/replaceWith | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/empty - jQuery JavaScript Library

  • Blog

Manipulation/empty

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

empty( )

  • Overview
  • Options
  • Examples
  • Discuss

Remove all child nodes from the set of matched elements.
Note that this function starting with 1.2.2 will also remove all event handlers and internally cached data.

Examples:
  • Demo
  • View Source
Removes all child nodes (including text nodes) from all paragraphs

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

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

  });
  </script>
  <style>
  p { background:yellow; }
  </style>
</head>
<body>
  <p>
    Hello, <span>Person</span> <a href="javascript:;">and person</a>
  </p>
  <button>Call empty() on above paragraph</button>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/empty"

Categories: Manipulation/empty | API | Events/click

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/remove - jQuery JavaScript Library

  • Blog

Manipulation/remove

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

remove( [expr] )

  • Overview
  • Options
  • Examples
  • Discuss

Removes all matched elements from the DOM.
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:

$("#foo").remove().appendTo("#bar");

should be written as

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

to avoid losing the event handlers.

Can be filtered with an optional expression.
Arguments:
expr (Optional) String
A jQuery expression to filter the set of elements to be removed.

Examples:
  • Demo
  • View Source
Removes all paragraphs from the DOM

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

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

  });
  </script>
  <style>p { background:yellow; margin:6px 0; }</style>
</head>
<body>
  <p>Hello</p>
  how are
  <p>you?</p>
  <button>Call remove() on paragraphs
</body>
</html>

  • Demo
  • View Source
Removes all paragraphs that contain "Hello" from the DOM

    $("button").click(function () {
      $("p").remove(":contains('Hello')");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("button").click(function () {
      $("p").remove(":contains('Hello')");
    });

  });
  </script>
  <style>p { background:yellow; margin:6px 0; }</style>
</head>
<body>
  <p class="hello">Hello</p>
  how are
  <p>you?</p>
  <button>Call remove(":contains('Hello')") on paragraphs
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/remove"

Categories: Manipulation/remove | Core/$ | Manipulation/appendTo | API | Events/click

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Manipulation/clone - jQuery JavaScript Library

  • Blog

Manipulation/clone

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

clone( )

  • Overview
  • Options
  • Examples
  • Discuss

Clone matched DOM Elements and select the clones.
This is useful for moving copies of the elements to another location in the DOM.

Examples:
  • Demo
  • View Source
Clones all b elements (and selects the clones) and prepends them to all paragraphs.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("b").clone().prependTo("p");
  });
  </script>

</head>
<body>
  <b>Hello</b><p>, how are you?</p>
</body>
</html>

Name Type

[edit]

clone( true )

  • Overview
  • Options
  • Examples
  • Discuss

Clone matched DOM Elements, and all their event handlers, and select the clones.
This is useful for moving copies of the elements, and their events, to another location in the DOM.
Arguments:
true Boolean
Set to true to enable cloning of event handlers.

Examples:
  • Demo
  • View Source
Create a button that's able to clone itself - and have the clones themselves be clonable.

    $("button").click(function(){
      $(this).clone(true).insertAfter(this);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("button").click(function(){
      $(this).clone(true).insertAfter(this);
    });

  });
  </script>

</head>
<body>
  <button>Clone Me!</button>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Manipulation/clone"

Categories: Manipulation/clone | API | Core/$ | Manipulation/prependTo | Events/click | Manipulation/insertAfter

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


API/1.2/CSS - jQuery JavaScript Library

  • Blog

API/1.2/CSS

From jQuery JavaScript Library

(Redirected from CSS)
Jump to: navigation, search

Name Type
CSS:

Name | Type
css( name ) | Returns: String
Return a style property on the first matched element.
css( properties ) | Returns: jQuery
Set a key/value object as style properties to all matched elements.
css( name, value ) | Returns: jQuery
Set a single style property to a value on all matched elements.
Positioning:

Name | Type
offset( ) | Returns: Object{top,left}
Get the current offset of the first matched element relative to the viewport.
Height and Width:

Name | Type
height( ) | Returns: Integer
Get the current computed, pixel, height of the first matched element.
height( val ) | Returns: jQuery
Set the CSS height of every matched element.
width( ) | Returns: Integer
Get the current computed, pixel, width of the first matched element.
width( val ) | Returns: jQuery
Set the CSS width of every matched element.

Retrieved from "http://docs.jquery.com/API/1.2/CSS"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


CSS/css - jQuery JavaScript Library

  • Blog

CSS/css

From jQuery JavaScript Library

Jump to: navigation, search

« Back to CSS

[edit]

css( name )

  • Overview
  • Options
  • Examples
  • Discuss

Return a style property on the first matched element.
Arguments:
name String
The name of the property to access.

Examples:
  • Demo
  • View Source
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>.");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div").click(function () {
      var color = $(this).css("background-color");
      $("#result").html("That div is <span style='color:" +
                         color + ";'>" + color + "</span>.");
    });

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:5px; float:left; }
  </style>
</head>
<body>
  <span id="result"> </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>
</body>
</html>

Name Type

[edit]

css( properties )

  • Overview
  • Options
  • Examples
  • Discuss

Set a key/value object as style properties to all matched elements.
This is the best way to set several style properties on all matched elements.
Arguments:
properties Map
Key/value pairs to set as style properties.

Examples:
  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").hover(function () {
      $(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });
    }, function () {
      var cssObj = {
        backgroundColor: "#ddd",
        fontWeight: "",
        color: "rgb(0,40,244)"
      }
      $(this).css(cssObj);
    });

  });
  </script>
  <style>
  p { color:green; }
  </style>
</head>
<body>
  <p>
    Move the mouse over a paragraph.
  </p>
  <p>
    Like this one or the one above.
  </p>
</body>
</html>

  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("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);
    });

  });
  </script>
  <style>
  p { color:green; }
  </style>
</head>
<body>
  <p>
    Move the mouse over a paragraph.
  </p>
  <p>
    Like this one or the one above.
  </p>
</body>
</html>

Name Type

[edit]

css( name, value )

  • Overview
  • Options
  • Examples
  • Discuss

Set a single style property to a value on all matched elements.
If a number is provided, it is automatically converted into a pixel value.
Arguments:
name | String
The name of the property to set.
value | String or Number
The value to set the property to.

Examples:
  • Demo
  • View Source
To change the color of any paragraph to red on mouseover event.

    $("p").mouseover(function () {
      $(this).css("color","red");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").mouseover(function () {
      $(this).css("color","red");
    });

  });
  </script>
  <style>
  p { color:blue; width:200px; font-size:14px; }
  </style>
</head>
<body>
  <p>
    Just roll the mouse over me.
  </p>
  <p>
    Or me to see a color change.
  </p>
</body>
</html>

  • Demo
  • View Source
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");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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");
    });

  });
  </script>
  <style>
  p { color:blue; font-weight:bold; cursor:pointer; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/CSS/css"

Categories: CSS/css | API | Events/click | Attributes/html | Events/hover | Events/mouseover | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


CSS/offset - jQuery JavaScript Library

  • Blog

CSS/offset

From jQuery JavaScript Library

Jump to: navigation, search

« Back to CSS

[edit]

offset( )

  • Overview
  • Options
  • Examples
  • Discuss

Get the current offset of the first matched element relative to the viewport.
The returned object contains two Integer properties, top and left. The method works only with visible elements.

Examples:
  • Demo
  • View Source
Access the offset of the second paragraph:

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
  });
  </script>
  <style>
  p { margin-left:10px; }
  </style>
</head>
<body>
  <p>Hello</p><p>2nd Paragraph</p>
</body>
</html>

  • Demo
  • View Source
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 + " )");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("*", document.body).click(function (e) {
      var offset = $(this).offset();
      e.stopPropagation();
      $("#result").text(this.tagName + " coords ( " + offset.left + ", " +
                                      offset.top + " )");
    });

  });
  </script>
  <style>
  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; }
  </style>
</head>
<body>
  <div id="result">Click an element.</div>
  <p>
    This is the best way to <span>find</span> an offset.
  </p>
  <div class="abs">
  </dov>

</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/CSS/offset"

Categories: CSS/offset | API | Core/$ | Attributes/html | Events/click | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


CSS/height - jQuery JavaScript Library

  • Blog

CSS/height

From jQuery JavaScript Library

Jump to: navigation, search

« Back to CSS

[edit]

height( )

  • Overview
  • Options
  • Examples
  • Discuss

Get the current computed, pixel, height of the first matched element.
In jQuery 1.2, this method is able to find the height of the window and document.

Examples:
  • Demo
  • View Source
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());
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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());
    });

  });
  </script>
  <style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold; }
  </style>
</head>
<body>
  <button id="getp">Get Paragraph Height</button>
  <button id="getd">Get Document Height</button>
  <button id="getw">Get Window Height</button>
  <div> </div>
  <p>
    Sample paragraph to test height
  </p>
</body>
</html>

Name Type

[edit]

height( val )

  • Overview
  • Options
  • Examples
  • Discuss

Set the CSS height of every matched element.
If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.
Arguments:
val String or Number
Set the CSS 'height' property to the specified value.

Examples:
  • Demo
  • View Source
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"});
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div").one('click', function () {
      $(this).height(30)
             .css({cursor:"auto", backgroundColor:"green"});
    });

  });
  </script>
  <style>
  div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/CSS/height"

Categories: CSS/height | API | Attributes/text | Events/click | Events/one | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


CSS/width - jQuery JavaScript Library

  • Blog

CSS/width

From jQuery JavaScript Library

Jump to: navigation, search

« Back to CSS

[edit]

width( )

  • Overview
  • Options
  • Examples
  • Discuss

Get the current computed, pixel, width of the first matched element.
In jQuery 1.2, this method is able to find the width of the window and document.

Examples:
  • Demo
  • View Source
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());
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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());
    });

  });
  </script>
  <style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold;  }
  </style>
</head>
<body>
  <button id="getp">Get Paragraph Width</button>
  <button id="getd">Get Document Width</button>
  <button id="getw">Get Window Width</button>
  <div> </div>
  <p>
    Sample paragraph to test width
  </p>
</body>
</html>

Name Type

[edit]

width( val )

  • Overview
  • Options
  • Examples
  • Discuss

Set the CSS width of every matched element.
If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.
Arguments:
val String or Number
Set the CSS 'width' property to the specified value.

Examples:
  • Demo
  • View Source
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"});
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div").one('click', function () {
      $(this).width(30)
             .css({cursor:"auto", "background-color":"blue"});
    });

  });
  </script>
  <style>
  div { width:70px; height:50px; float:left; margin:5px;
        background:red; cursor:pointer; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/CSS/width"

Categories: CSS/width | API | Attributes/text | Events/click | Events/one | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


API/1.2/Events - jQuery JavaScript Library

  • Blog

API/1.2/Events

From jQuery JavaScript Library

(Redirected from Events)
Jump to: navigation, search

This section details the event-related functions in the jQuery API. For more information about how jQuery handles and normalizes event properties and functions in a cross-browser manner, see Events (Guide).

Name Type
Page Load:

Name | Type
ready( fn ) | Returns: jQuery
Binds a function to be executed whenever the DOM is ready to be traversed and manipulated.
Event Handling:

Name | Type
bind( type, data, fn ) | Returns: jQuery
Binds a handler to a particular event (like click) for each matched element. Can also bind custom events.
one( type, data, fn ) | Returns: jQuery
Binds a handler to a particular event to be executed once for each matched element.
trigger( type, data ) | Returns: jQuery
Trigger a type of event on every matched element.
triggerHandler( type, data ) | Returns: jQuery
This particular method triggers all bound event handlers on an element (for a specific event type) WITHOUT executing the browsers default actions.
unbind( type, data ) | Returns: jQuery
This does the opposite of bind, it removes bound events from each of the matched elements.
Interaction Helpers:

Name | Type
hover( over, out ) | Returns: jQuery
Simulates hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.
toggle( fn, fn ) | Returns: jQuery
Toggle between two function calls every other click.
Event Helpers:

Name | Type
blur( ) | Returns: jQuery
Triggers the blur event of each matched element.
blur( fn ) | Returns: jQuery
Bind a function to the blur event of each matched element.
change( ) | Returns: jQuery
Triggers the change event of each matched element.
change( fn ) | Returns: jQuery
Binds a function to the change event of each matched element.
click( ) | Returns: jQuery
Triggers the click event of each matched element.
click( fn ) | Returns: jQuery
Binds a function to the click event of each matched element.
dblclick( ) | Returns: jQuery
Triggers the dblclick event of each matched element.
dblclick( fn ) | Returns: jQuery
Binds a function to the dblclick event of each matched element.
error( ) | Returns: jQuery
Triggers the error event of each matched element.
error( fn ) | Returns: jQuery
Binds a function to the error event of each matched element.
focus( ) | Returns: jQuery
Triggers the focus event of each matched element.
focus( fn ) | Returns: jQuery
Binds a function to the focus event of each matched element.
keydown( ) | Returns: jQuery
Triggers the keydown event of each matched element.
keydown( fn ) | Returns: jQuery
Bind a function to the keydown event of each matched element.
keypress( ) | Returns: jQuery
Triggers the keypress event of each matched element.
keypress( fn ) | Returns: jQuery
Binds a function to the keypress event of each matched element.
keyup( ) | Returns: jQuery
Triggers the keyup event of each matched element.
keyup( fn ) | Returns: jQuery
Bind a function to the keyup event of each matched element.
load( fn ) | Returns: jQuery
Binds a function to the load event of each matched element.
mousedown( fn ) | Returns: jQuery
Binds a function to the mousedown event of each matched element.
mousemove( fn ) | Returns: jQuery
Bind a function to the mousemove event of each matched element.
mouseout( fn ) | Returns: jQuery
Bind a function to the mouseout event of each matched element.
mouseover( fn ) | Returns: jQuery
Bind a function to the mouseover event of each matched element.
mouseup( fn ) | Returns: jQuery
Bind a function to the mouseup event of each matched element.
resize( fn ) | Returns: jQuery
Bind a function to the resize event of each matched element.
scroll( fn ) | Returns: jQuery
Bind a function to the scroll event of each matched element.
select( ) | Returns: jQuery
Trigger the select event of each matched element.
select( fn ) | Returns: jQuery
Bind a function to the select event of each matched element.
submit( ) | Returns: jQuery
Trigger the submit event of each matched element.
submit( fn ) | Returns: jQuery
Bind a function to the submit event of each matched element.
unload( fn ) | Returns: jQuery
Binds a function to the unload event of each matched element.

Retrieved from "http://docs.jquery.com/API/1.2/Events"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/ready - jQuery JavaScript Library

  • Blog

Events/ready

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

ready( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Binds a function to be executed whenever the DOM is ready to be traversed and manipulated.

This is probably the most important function included in the event module, as it can greatly improve the response times of your web applications.

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.

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.

Please ensure you have no code in your <body> onload event handler, otherwise $(document).ready() may not fire.

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.

Arguments:
fn Function
The function to be executed when the DOM is ready.
function callback(jQueryReference) {
  this; // document
}

Examples:
  • Demo
  • View Source
Display a message when the DOM is loaded.

$("p").text("The DOM is now loaded and can be manipulated.");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
  });
  </script>
  <style>p { color:red; }</style>
</head>
<body>
  <p>
  </p>
</body>
</html>

  • Code
To run code when the DOM loads, write:

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

  • Code
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...
});

  • Code
Commonly written as:

$(function() {
  // Your code here...
});

Name Type

Retrieved from "http://docs.jquery.com/Events/ready"

Categories: Events/ready | API | Attributes/text | Core/jQuery | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/bind - jQuery JavaScript Library

  • Blog

Events/bind

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

bind( type, [data], fn )

  • Overview
  • Options
  • Examples
  • Discuss

Binds a handler to a particular event (like click) for each matched element. Can also bind custom events.
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.
Arguments:

type | String
An event type
data (Optional) | Object
Additional data passed to the event handler as event.data
fn | Function
A function to bind to the event on each of the set of matched elements
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("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);
    });

  });
  </script>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer;
      padding:5px; }
  span { color:red; }
  </style>
</head>
<body>
  <p>Click or double click here.</p>
  <span></span>
</body>
</html>

  • Code
To display each paragraph's text in an alert box whenever it is clicked:

$("p").bind("click", function(){
  alert( $(this).text() );
});

  • Code
You can pass some extra data before the event handler:

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

  • Code
To cancel a default action and prevent it from bubbling up, return false:

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

  • Code
To cancel only the default action by using the preventDefault method.

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

  • Code
Stop only an event from bubbling by using the stopPropagation method.

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

  • Demo
  • View Source
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" ]);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("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" ]);
    });

  });
  </script>
  <style>
  p { color:red; }
  span { color:blue; }
  </style>
</head>
<body>
  <p>Has an attached custom event.</p>
  <button>Trigger custom event</button>
  <span style="display:none;"></span>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Events/bind"

Categories: Events/bind | API | Attributes/text | Effects/stop | CSS/css | Effects/fadeIn | Effects/fadeOut | Events/click | Events/trigger

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/one - jQuery JavaScript Library

  • Blog

Events/one

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

one( type, [data], fn )

  • Overview
  • Options
  • Examples
  • Discuss

Binds a handler to a particular event to be executed once for each matched element.

The handler is executed only once for each element. Otherwise, the same rules as described in bind() 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.

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.

Arguments:

type | String
An event type
data (Optional) | Object
Additional data passed to the event handler as event.data
fn | Function
A function to bind to the specified event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Demo
  • View Source
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.");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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.");
    });

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:5px; float:left;
        background:green; border:10px outset;
        cursor:pointer; }
  p { color:red; margin:0; clear:left; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <p>Click a green square...</p>
</body>
</html>

  • Code
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() );
});

Name Type

Retrieved from "http://docs.jquery.com/Events/one"

Categories: Events/one | API | Core/index | CSS/css | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/trigger - jQuery JavaScript Library

  • Blog

Events/trigger

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

trigger( type, [data] )

  • Overview
  • Options
  • Examples
  • Discuss

Trigger a type of event on every matched element.

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.

You can also trigger custom events registered with bind.

Arguments:
type | String
An event type to trigger.
data (Optional) | Array
Additional data to pass as arguments (after the event object) to the event handler.

Examples:
  • Demo
  • View Source
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);
    }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("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);
    }

  });
  </script>
  <style>
  button { margin:10px; }
  div { color:blue; font-weight:bold; }
  span { color:red; }
  </style>
</head>
<body>
  <button>Button #1</button>
  <button>Button #2</button>
  <div><span>0</span> button #1 clicks.</div>
  <div><span>0</span> button #2 clicks.</div>
</body>
</html>

  • Code
To submit the first form without using the submit() function, try:

$("form:first").trigger("submit")

  • Code
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"]);

  • Code
This would display a "Hello World!" alert box.

$("p").bind("myEvent", function (event, message1, message2) {
  alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);

Name Type

Retrieved from "http://docs.jquery.com/Events/trigger"

Categories: Events/trigger | API | Events/click | Attributes/text | Events/bind

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/triggerHandler - jQuery JavaScript Library

  • Blog

Events/triggerHandler

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

triggerHandler( type, [data] )

  • Overview
  • Options
  • Examples
  • Discuss

This particular method triggers all bound event handlers on an element (for a specific event type) WITHOUT executing the browsers default actions.
Arguments:
type | String
An event type to trigger.
data (Optional) | Array
Additional data to pass as arguments (after the event object) to the event handler.

Examples:
  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("#old").click(function(){
      $("input").trigger("focus");
    });
    $("#new").click(function(){
      $("input").triggerHandler("focus");
    });
    $("input").focus(function(){
      $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
    });

  });
  </script>

</head>
<body>
  <button id="old">.trigger("focus")</button>
  <button id="new">.triggerHandler("focus")</button><br/><br/>
  <input type="text" value="To Be Focused"/>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Events/triggerHandler"

Categories: Events/triggerHandler | API | Events/click | Events/trigger | Events/focus | Manipulation/appendTo | Effects/fadeOut

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/unbind - jQuery JavaScript Library

  • Blog

Events/unbind

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

unbind( [type], [data] )

  • Overview
  • Options
  • Examples
  • Discuss

This does the opposite of bind, it removes bound events from each of the matched elements.

Without any arguments, all bound events are removed.

You can also unbind custom events registered with bind.

If the type is provided, all bound events of that type are removed.

If the function that was passed to bind is provided as the second argument, only that specific event handler is removed.

Arguments:
type (Optional) | String
An event type to unbind.
data (Optional) | Function
A function to unbind from the event on each of the set of matched elements.

Examples:
  • Demo
  • View Source
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...");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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...");
    });

  });
  </script>
  <style>
  button { margin:5px; }
  button#theone { color:red; background:yellow; }
  </style>
</head>
<body>
  <button id="theone">Does nothing...</button>
  <button id="bind">Bind Click</button>
  <button id="unbind">Unbind Click</button>
  <div style="display:none;">Click!</div>
</body>
</html>

  • Code
To unbind all events from all paragraphs, write:

$("p").unbind()

  • Code
To unbind all click events from all paragraphs, write:

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

  • Code
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.

Name Type

Retrieved from "http://docs.jquery.com/Events/unbind"

Categories: Events/unbind | API | Effects/show | Effects/fadeOut | Events/click | Events/bind | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/hover - jQuery JavaScript Library

  • Blog

Events/hover

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

hover( over, out )

  • Overview
  • Options
  • Examples
  • Discuss

Simulates hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.
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).
Arguments:
over | Function
The function to fire when the mouse is moved over a matched element.
function callback(eventObject) {
  this; // dom element
}
out | Function
The function to fire when the mouse is moved off of a matched element.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Demo
  • View Source
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();
      }
    );

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("li").hover(
      function () {
        $(this).append($("<span> ***</span>"));
      },
      function () {
        $(this).find("span:last").remove();
      }
    );

  });
  </script>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
  </style>
</head>
<body>
  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Chips</li>
    <li>Socks</li>
  </ul>
</body>
</html>

  • Code
To add a special style to table cells that are being hovered over, try:

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

Name Type

Retrieved from "http://docs.jquery.com/Events/hover"

Categories: Events/hover | API | Manipulation/append | Traversing/find | Manipulation/remove | Attributes/addClass | Attributes/removeClass

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/toggle - jQuery JavaScript Library

  • Blog

Events/toggle

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

toggle( fn, fn )

  • Overview
  • Options
  • Examples
  • Discuss

Toggle between two function calls every other click.

Whenever a matched element is clicked, the first specified function is fired, when clicked again, the second is fired. All subsequent clicks continue to rotate through the two functions.

Use unbind("click") to remove.

Arguments:
fn | Function
The function to execute on every even click.
function callback(eventObject) {
  this; // dom element
}
fn | Function
The function to execute on every odd click.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Demo
  • View Source
Click to toggle highlight on the list item.

    $("li").toggle(
      function () {
        $(this).css("list-style-type", "disc")
               .css("color", "blue");
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("li").toggle(
      function () {
        $(this).css("list-style-type", "disc")
               .css("color", "blue");
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

  });
  </script>
  <style>
  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }
  </style>
</head>
<body>
  <ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>
    <li>Take a jog</li>
  </ul>
</body>
</html>

  • Code
To toggle a style on table cells:

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

Name Type

Retrieved from "http://docs.jquery.com/Events/toggle"

Categories: Events/toggle | API | CSS/css | Attributes/addClass | Attributes/removeClass

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/blur - jQuery JavaScript Library

  • Blog

Events/blur

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

blur( )

  • Overview
  • Options
  • Examples
  • Discuss

Triggers the blur event of each matched element.
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:
  • Code
To triggers the blur event on all paragraphs:

$("p").blur();

Name Type

[edit]

blur( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Bind a function to the blur event of each matched element.
The blur event fires when an element loses focus either via the pointing device or by tabbing navigation.
Arguments:
fn Function
A function to bind to the blur event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Code
To pop up an alert saying "Hello World!" every time any paragraph's blur event triggers:

$("p").blur( function () { alert("Hello World!"); } );

Name Type

Retrieved from "http://docs.jquery.com/Events/blur"

Categories: Events/blur | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/change - jQuery JavaScript Library

  • Blog

Events/change

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

change( )

  • Overview
  • Options
  • Examples
  • Discuss

Triggers the change event of each matched element.
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.

[edit]

change( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Binds a function to the change event of each matched element.
The change event fires when a control loses the input focus and its value has been modified since gaining focus.
Arguments:
fn Function
A function to bind to the change event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Demo
  • View Source
Attaches a change even 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();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();

  });
  </script>
  <style>
  div { color:red; }
  </style>
</head>
<body>
  <select name="sweets" multiple="multiple">
    <option>Chocolate</option>
    <option selected="selected">Candy</option>
    <option>Taffy</option>
    <option selected="selected">Carmel</option>
    <option>Fudge</option>
    <option>Cookie</option>
  </select>
  <div></div>
</body>
</html>

  • Code
To add a validity test to all text input elements:

$("input[@type='text']").change( function() {
  // check input for validity here
});

Name Type

Retrieved from "http://docs.jquery.com/Events/change"

Categories: Events/change | API | Core/each | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/click - jQuery JavaScript Library

  • Blog

Events/click

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

click( )

  • Overview
  • Options
  • Examples
  • Discuss

Triggers the click event of each matched element.
Causes all of the functions that have been bound to that click event to be executed.

Examples:
  • Code
To trigger the click event on all of the paragraphs on the page:

$("p").click();

Name Type

[edit]

click( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Binds a function to the click event of each matched element.
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:
  • mousedown
  • mouseup
  • click
Arguments:
fn Function
A function to bind to the click event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Demo
  • View Source
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");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").click(function () {
      $(this).slideUp();
    });
    $("p").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });

  });
  </script>
  <style>
  p { color:red; margin:5px; cursor:pointer; }
  p.hilite { background:yellow; }
  </style>
</head>
<body>
  <p>First Paragraph</p>
  <p>Second Paragraph</p>
  <p>Yet one more Paragraph</p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Events/click"

Categories: Events/click | API | Effects/slideUp | Events/hover | Attributes/addClass | Attributes/removeClass

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/dblclick - jQuery JavaScript Library

  • Blog

Events/dblclick

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

dblclick( )

  • Overview
  • Options
  • Examples
  • Discuss

Triggers the dblclick event of each matched element.
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.

[edit]

dblclick( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Binds a function to the dblclick event of each matched element.
The dblclick event fires when the pointing device button is double clicked over an element
Arguments:
fn Function
The function to bind to the dblclick event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Code
To bind a "Hello World!" alert box the dblclick event on every paragraph on the page:

$("p").dblclick( function () { alert("Hello World!"); });

Name Type

Retrieved from "http://docs.jquery.com/Events/dblclick"

Categories: Events/dblclick | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/error - jQuery JavaScript Library

  • Blog

Events/error

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

error( )

  • Overview
  • Options
  • Examples
  • Discuss

Triggers the error event of each matched element.
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.

[edit]

error( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Binds a function to the error event of each matched element.

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.

If the event is thrown by the window object, the event handler will be passed three parameters:

  1. A message describing the event ("varName is not defined", "missing operator in expression", etc.),
  2. the full URL of the document containing the error, and
  3. the line number on which the error occured.

If the event handler returns true, it signifies that the event was handled, and the browser raises no errors.

For more information, see:

  • msdn - onerror Event
  • Gecko DOM Reference - onerror Event
  • Gecko DOM Reference - Event object
  • Wikipedia: DOM Events

Arguments:
fn Function
An event handler function to bind to the error event.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Code
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 });
});

  • Code
To hide JavaScript errors from the user, you can try:

$(window).error(function(){
  return true;
});

  • Code
To hide the "broken image" icons for your IE users, you can try:

$("img").error(function(){
  $(this).hide();
});

Name Type

Retrieved from "http://docs.jquery.com/Events/error"

Categories: Events/error | API | Ajax/jQuery.post | Effects/hide

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/focus - jQuery JavaScript Library

  • Blog

Events/focus

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

focus( )

  • Overview
  • Options
  • Examples
  • Discuss

Triggers the focus event of each matched element.
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:
  • Code
To focus on a login input box with id 'login' on page startup, try:

$(document).ready(function(){
  $("#login").focus();
});

Name Type

[edit]

focus( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Binds a function to the focus event of each matched element.
The focus event fires when an element receives focus either via the pointing device or by tab navigation.
Arguments:
fn Function
A function to bind to the focus event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Code
To stop people from writing in text input boxes, try:

$("input[@type=text]").focus(function(){
  $(this).blur();
});

Name Type

Retrieved from "http://docs.jquery.com/Events/focus"

Categories: Events/focus | API | Events/ready | Events/blur

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/keydown - jQuery JavaScript Library

  • Blog

Events/keydown

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

keydown( )

  • Overview
  • Options
  • Examples
  • Discuss

Triggers the keydown event of each matched element.
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.

[edit]

keydown( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Bind a function to the keydown event of each matched element.
The keydown event fires when a key on the keyboard is pressed.
Arguments:
fn Function
A function to bind to the keydown event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Code
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
    // ...
  }
});

Name Type

Retrieved from "http://docs.jquery.com/Events/keydown"

Categories: Events/keydown | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/keypress - jQuery JavaScript Library

  • Blog

Events/keypress

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

keypress( )

  • Overview
  • Options
  • Examples
  • Discuss

Triggers the keypress event of each matched element.
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.

[edit]

keypress( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Binds a function to the keypress event of each matched element.
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:
  • keydown
  • keyup
  • keypress
Arguments:
fn Function
A function to bind to the keypress event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("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);
    });

  });
  </script>
  <style>
  input { margin:10px; }
  p { color:blue; margin:10px; font-size:18px; }
  p.hilite { background:yellow; }
  div { color:red; }
  </style>
</head>
<body>
  <input type="text" />
  <p>Add text - </p>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Events/keypress"

Categories: Events/keypress | API | Manipulation/append | Traversing/children | Manipulation/remove | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/keyup - jQuery JavaScript Library

  • Blog

Events/keyup

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

keyup( )

  • Overview
  • Options
  • Examples
  • Discuss

Triggers the keyup event of each matched element.
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.

[edit]

keyup( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Bind a function to the keyup event of each matched element.
The keyup event fires when a key on the keyboard is released.
Arguments:
fn Function
A function to bind to the keyup event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Code
To perform an action when the escape key has been released:

$(document).keyup(function(event){
    if (event.keyCode == 27) {
        alert('escaped!');
    }
});

Name Type

Retrieved from "http://docs.jquery.com/Events/keyup"

Categories: Events/keyup | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/load - jQuery JavaScript Library

  • Blog

Events/load

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

load( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Binds a function to the load event of each matched element.
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.
Arguments:
fn Function
A function to bind to the load event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

  • Code
Run a function when the page is fully loaded including graphics.

    $(window).load(function () {
      // run code
    });

Retrieved from "http://docs.jquery.com/Events/load"

Categories: Events/load | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/mousedown - jQuery JavaScript Library

  • Blog

Events/mousedown

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

mousedown( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Binds a function to the mousedown event of each matched element.
The mousedown event fires when the pointing device button is pressed over an element.
Arguments:
fn Function
A function to bind to the mousedown event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Retrieved from "http://docs.jquery.com/Events/mousedown"

Categories: Events/mousedown | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/mousemove - jQuery JavaScript Library

  • Blog

Events/mousemove

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

mousemove( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Bind a function to the mousemove event of each matched element.
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.
Arguments:
fn Function
A function to bind to the mousmove event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("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);
    });

  });
  </script>
  <style>
  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; }
  </style>
</head>
<body>
  <p>
    Try scrolling too.
    <span>Move the mouse over the div.</span>
    <span> </span>
  </p>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Events/mousemove"

Categories: Events/mousemove | API | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/mouseout - jQuery JavaScript Library

  • Blog

Events/mouseout

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

mouseout( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Bind a function to the mouseout event of each matched element.
The mouseout event fires when the pointing device is moved away from an element.
Arguments:
fn Function
A function to bind to the mouseout event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Retrieved from "http://docs.jquery.com/Events/mouseout"

Categories: Events/mouseout | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/mouseover - jQuery JavaScript Library

  • Blog

Events/mouseover

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

mouseover( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Bind a function to the mouseover event of each matched element.
The mouseout event fires when the pointing device is moved onto an element.
Arguments:
fn Function
A function to bind to the mouseover event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Retrieved from "http://docs.jquery.com/Events/mouseover"

Categories: Events/mouseover | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/mouseup - jQuery JavaScript Library

  • Blog

Events/mouseup

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

mouseup( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Bind a function to the mouseup event of each matched element.
The mouseup event fires when the pointing device button is released over an element.
Arguments:
fn Function
A function to bind to the mouseup event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Retrieved from "http://docs.jquery.com/Events/mouseup"

Categories: Events/mouseup | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/resize - jQuery JavaScript Library

  • Blog

Events/resize

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

resize( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Bind a function to the resize event of each matched element.
The resize event fires when a document view is resized
Arguments:
fn Function
A function to bind to the resize event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Code
To make resizing the web page window a pain in the neck, try:

$(window).resize(function(){
  alert("Stop it!");
});

Name Type

Retrieved from "http://docs.jquery.com/Events/resize"

Categories: Events/resize | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/scroll - jQuery JavaScript Library

  • Blog

Events/scroll

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

scroll( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Bind a function to the scroll event of each matched element.
The scroll event fires when a document view is scrolled.
Arguments:
fn Function
A function to bind to the scroll event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Demo
  • View Source
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");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $(window).scroll(function () {
      $("span").css("display", "inline").fadeOut("slow");
    });

  });
  </script>
  <style>
  div { color:blue; }
  p { color:green; }
  span { color:red; display:none; }
  </style>
</head>
<body>
  <div>Try scrolling the iframe.</div>
  <p>Paragraph - <span>Scroll happened!</span></p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Events/scroll"

Categories: Events/scroll | API | Manipulation/clone | Manipulation/appendTo | CSS/css | Effects/fadeOut

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/select - jQuery JavaScript Library

  • Blog

Events/select

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

select( )

  • Overview
  • Options
  • Examples
  • Discuss

Trigger the select event of each matched element.
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.

Examples:
  • Code
To trigger the select event on all input elements, try:

$("input").select();

Name Type

[edit]

select( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Bind a function to the select event of each matched element.
The select event fires when a user selects some text in a text field, including input and textarea.
Arguments:
fn Function
A function to bind to the select event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Demo
  • View Source
To do something when text in input boxes is selected:

    $(document).select( function () {
      $("div").text("Something was selected").show().fadeOut(1000);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $(document).select( function () {
      $("div").text("Something was selected").show().fadeOut(1000);
    });

  });
  </script>
  <style>
  p { color:blue; }
  div { color:red; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Events/select"

Categories: Events/select | API | Attributes/text | Effects/show | Effects/fadeOut

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/submit - jQuery JavaScript Library

  • Blog

Events/submit

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

submit( )

  • Overview
  • Options
  • Examples
  • Discuss

Trigger the submit event of each matched element.
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:
  • Code
To trigger the submit event on the first form on the page, try:

$("form:first").submit();

Name Type

[edit]

submit( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Bind a function to the submit event of each matched element.
The select event fires when a form is submitted
Arguments:
fn Function
A function to bind to the submit event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

Examples:
  • Demo
  • View Source
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;
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("form").submit(function() {
      if ($("input:first").val() == "correct") {
        $("span").text("Validated...").show();
        return true;
      }
      $("span").text("Not valid!").show().fadeOut(1000);
      return false;
    });

  });
  </script>
  <style>
  p { margin:0; color:blue; }
  div,p { margin-left:10px; }
  span { color:red; }
  </style>
</head>
<body>
  <p>Type 'correct' to validate.</p>
  <form action="javascript:alert('success!');">
    <div>
      <input type="text" />
      <input type="submit" />
    </div>
  </form>
  <span></span>
</body>
</html>

  • Code
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;
} );

Name Type

Retrieved from "http://docs.jquery.com/Events/submit"

Categories: Events/submit | API | Attributes/val | Attributes/text | Effects/show | Effects/fadeOut

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Events/unload - jQuery JavaScript Library

  • Blog

Events/unload

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

unload( fn )

  • Overview
  • Options
  • Examples
  • Discuss

Binds a function to the unload event of each matched element.
Arguments:
fn Function
function to bind to the unload event on each of the matched elements.
function callback(eventObject) {
  this; // dom element
}

  • Code
To display an alert when a page is unloaded:

$(window).unload( function () { alert("Bye now!"); } );

Retrieved from "http://docs.jquery.com/Events/unload"

Categories: Events/unload | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


API/1.2/Effects - jQuery JavaScript Library

  • Blog

API/1.2/Effects

From jQuery JavaScript Library

(Redirected from Effects)
Jump to: navigation, search

Name Type
Basics:

Name | Type
show( ) | Returns: jQuery
Displays each of the set of matched elements if they are hidden.
show( speed, callback ) | Returns: jQuery
Show all matched elements using a graceful animation and firing an optional callback after completion.
hide( ) | Returns: jQuery
Hides each of the set of matched elements if they are shown.
hide( speed, callback ) | Returns: jQuery
Hide all matched elements using a graceful animation and firing an optional callback after completion.
toggle( ) | Returns: jQuery
Toggles each of the set of matched elements.
Sliding:

Name | Type
slideDown( speed, callback ) | Returns: jQuery
Reveal all matched elements by adjusting their height and firing an optional callback after completion.
slideUp( speed, callback ) | Returns: jQuery
Hide all matched elements by adjusting their height and firing an optional callback after completion.
slideToggle( speed, callback ) | Returns: jQuery
Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.
Fading:

Name | Type
fadeIn( speed, callback ) | Returns: jQuery
Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.
fadeOut( speed, callback ) | Returns: jQuery
Fade out all matched elements by adjusting their opacity and firing an optional callback after completion.
fadeTo( speed, opacity, callback ) | Returns: jQuery
Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
Custom:

Name | Type
animate( params, duration, easing, callback ) | Returns: jQuery
A function for making your own, custom animations.
animate( params, options ) | Returns: jQuery
A function for making your own, custom animations.
stop( ) | Returns: jQuery
Stops all the currently running animations on all the specified elements.
queue( ) | Returns: Array<Function>
Returns a reference to the first element's queue (which is an array of functions).
queue( callback ) | Returns: jQuery
Adds a new function, to be executed, onto the end of the queue of all matched elements.
queue( queue ) | Returns: jQuery
Replaces the queue of all matched element with this new queue (the array of functions).
dequeue( ) | Returns: jQuery
Removes a queued function from the front of the queue and executes it.

Retrieved from "http://docs.jquery.com/API/1.2/Effects"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Effects/show - jQuery JavaScript Library

  • Blog

Effects/show

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[edit]

show( )

  • Overview
  • Options
  • Examples
  • Discuss

Displays each of the set of matched elements if they are hidden.
Same as show( speed, [callback] ) 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:
  • Demo
  • View Source
Shows all paragraphs.

$("p").show()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").show()
  });
  </script>

</head>
<body>
  <p style="display:none">Hello</p>
</body>
</html>

Name Type
[edit]

show( speed, [callback] )

  • Overview
  • Options
  • Examples
  • Discuss

Show all matched elements using a graceful animation and firing an optional callback after completion.
The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.
Arguments:
speed | String, Number
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).
callback (Optional) | Function
A function to be executed whenever the animation completes, executes once for each element animated against.
function callback() {
  this; // dom element
}

Examples:
  • Demo
  • View Source
Animates all hidden paragraphs to show slowly, completing the animation within 600 milliseconds.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

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

  });
  </script>
  <style>
  p { background:yellow; }
  </style>
</head>
<body>
  <button>Show it</button>
  <p style="display: none">Hello</p>
</body>
</html>

  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("#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);
    });

  });
  </script>
  <style>
  div { background:#def3ca; margin:3px; width:80px;
        display:none; float:left; text-align:center; }
  </style>
</head>
<body>
  <button id="showr">Show</button>
  <button id="hidr">Hide</button>
  <div>Hello,</div>
  <div>how</div>
  <div>are</div>
  <div>you?</div>
</body>
</html>

  • Demo
  • View Source
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
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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
    });

  });
  </script>
  <style>
  span { display:none; }
  div { display:none; }
  p { font-weight:bold; background-color:#fcd; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Effects/show"

Categories: Effects/show | API | Events/click | Traversing/next | Effects/hide | Events/submit | Attributes/val | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Effects/hide - jQuery JavaScript Library

  • Blog

Effects/hide

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[edit]

hide( )

  • Overview
  • Options
  • Examples
  • Discuss

Hides each of the set of matched elements if they are shown.
Same as hide( speed, [callback] ) without animations. Doesn't change anything if the selected elements are all hidden.

Examples:
  • Demo
  • View Source
Hides all paragraphs then the link on click.

    $("p").hide();
    $("a").click(function () {
      $(this).hide();
      return false;
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").hide();
    $("a").click(function () {
      $(this).hide();
      return false;
    });

  });
  </script>

</head>
<body>
  <p>Hello</p>
  <a href="#">Click to hide me too</a>
  <p>Here is another paragraph</p>
</body>
</html>

Name Type
[edit]

hide( speed, [callback] )

  • Overview
  • Options
  • Examples
  • Discuss

Hide all matched elements using a graceful animation and firing an optional callback after completion.
The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.
Arguments:
speed | String, Number
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).
callback (Optional) | Function
A function to be executed whenever the animation completes, executes once for each element animated against.
function callback() {
  this; // dom element
}

Examples:
  • Demo
  • View Source
Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

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

  });
  </script>
  <style>
  p { background:#dad; font-weight:bold; }
  </style>
</head>
<body>
  <button>Hide 'em</button>
  <p>Hiya</p>
  <p>Such interesting text, eh?</p>
</body>
</html>

  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("#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);
    });

  });
  </script>
  <style>
  span { background:#def3ca; padding:3px; float:left; }
  </style>
</head>
<body>
  <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>
</body>
</html>

  • Demo
  • View Source
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();
      });
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    for (var i = 0; i < 5; i++) {
      $("<div>").appendTo(document.body);
    }
    $("div").click(function () {
      $(this).hide(2000, function () {
        $(this).remove();
      });
    });

  });
  </script>
  <style>
  div { background:#ece0fb; width:30px;
        height:40px; margin:2px; float:left; }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Effects/hide"

Categories: Effects/hide | API | Events/click | Traversing/prev | Effects/show | Manipulation/appendTo | Manipulation/remove

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Effects/toggle - jQuery JavaScript Library

  • Blog

Effects/toggle

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[edit]

toggle( )

  • Overview
  • Options
  • Examples
  • Discuss

Toggles each of the set of matched elements.
If they are shown, toggle makes them hidden. If they are hidden, toggle makes them shown.

Examples:
  • Demo
  • View Source
Toggles all paragraphs.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

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

  });
  </script>

</head>
<body>
  <button>Toggle</button>
  <p>Hello</p>
  <p style="display: none">Good Bye</p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Effects/toggle"

Categories: Effects/toggle | API | Events/click

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Effects/slideDown - jQuery JavaScript Library

  • Blog

Effects/slideDown

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[edit]

slideDown( speed, [callback] )

  • Overview
  • Options
  • Examples
  • Discuss

Reveal all matched elements by adjusting their height and firing an optional callback after completion.
Only the height is adjusted for this animation, causing all matched elements to be revealed in a "sliding" manner.
Arguments:
speed | String, Number
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).
callback (Optional) | Function
A function to be executed whenever the animation completes, executes once for each element animated against.
function callback() {
  this; // dom element
}

Examples:
  • Demo
  • View Source
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();
      }
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").slideDown("slow");
      } else {
        $("div").hide();
      }
    });

  });
  </script>
  <style>
  div { background:#de9a44; margin:3px; width:80px;
        height:40px; display:none; float:left; }
  </style>
</head>
<body>
  Click me!
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

  • Demo
  • View Source
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");
      });
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("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");
      });
    });

  });
  </script>
  <style>
  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; }
  </style>
</head>
<body>
  <div>Push!</div>
  <input type="text" />
  <input type="text" class="middle" />
  <input type="text" />
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Effects/slideDown"

Categories: Effects/slideDown | API | Events/click | Traversing/is | Effects/hide | CSS/css | Traversing/filter | Events/focus

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Effects/slideUp - jQuery JavaScript Library

  • Blog

Effects/slideUp

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[edit]

slideUp( speed, [callback] )

  • Overview
  • Options
  • Examples
  • Discuss

Hide all matched elements by adjusting their height and firing an optional callback after completion.
Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner.
Arguments:
speed | String, Number
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).
callback (Optional) | Function
A function to be executed whenever the animation completes, executes once for each element animated against.
function callback() {
  this; // dom element
}

Examples:
  • Demo
  • View Source
Animates all divs to slide up, completing the animation within 400 milliseconds.

    $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").show("fast");
      } else {
        $("div").slideUp();
      }
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").show("fast");
      } else {
        $("div").slideUp();
      }
    });

  });
  </script>
  <style>
  div { background:#3d9a44; margin:3px; width:80px;
        height:40px; float:left; }
  </style>
</head>
<body>
  Click me!
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

  • Demo
  • View Source
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.");
      });
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("button").click(function () {
      $(this).parent().slideUp("slow", function () {
        $("#msg").text($("button", this).text() + " has completed.");
      });
    });

  });
  </script>
  <style>
  div { margin:2px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Effects/slideUp"

Categories: Effects/slideUp | API | Events/click | Traversing/is | Effects/show | Traversing/parent | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Effects/slideToggle - jQuery JavaScript Library

  • Blog

Effects/slideToggle

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[edit]

slideToggle( speed, [callback] )

  • Overview
  • Options
  • Examples
  • Discuss

Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.
Only the height is adjusted for this animation, causing all matched elements to be hidden or shown in a "sliding" manner.
Arguments:
speed | String, Number
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).
callback (Optional) | Function
A function to be executed whenever the animation completes, executes once for each element animated against.
function callback() {
  this; // dom element
}

Examples:
  • Demo
  • View Source
Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

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

  });
  </script>
  <style>
  p { width:400px; }
  </style>
</head>
<body>
  <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>
</body>
</html>

  • Demo
  • View Source
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);
      });
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("button").click(function () {
      $("div:not(.still)").slideToggle("slow", function () {
        var n = parseInt($("span").text(), 10);
        $("span").text(n + 1);
      });
    });

  });
  </script>
  <style>
  div { background:#b977d1; margin:3px; width:60px;
        height:60px; float:left; }
  div.still { background:#345; width:5px; }
  div.hider { display:none; }
  span { color:red; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Effects/slideToggle"

Categories: Effects/slideToggle | API | Events/click | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Effects/fadeIn - jQuery JavaScript Library

  • Blog

Effects/fadeIn

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[edit]

fadeIn( speed, [callback] )

  • Overview
  • Options
  • Examples
  • Discuss

Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.
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.
Arguments:
speed | String, Number
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).
callback (Optional) | Function
A function to be executed whenever the animation completes, executes once for each element animated against.
function callback() {
  this; // dom element
}

Examples:
  • Demo
  • View Source
Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

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

  });
  </script>
  <style>
  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; }
  </style>
</head>
<body>
  <span>Click here...</span>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</body>
</html>

  • Demo
  • View Source
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;
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("a").click(function () {
      $("div").fadeIn(3000, function () {
        $("span").fadeIn(100);
      });
      return false;
    });

  });
  </script>
  <style>
  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; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Effects/fadeIn"

Categories: Effects/fadeIn | API | Events/click

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Effects/fadeOut - jQuery JavaScript Library

  • Blog

Effects/fadeOut

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[edit]

fadeOut( speed, [callback] )

  • Overview
  • Options
  • Examples
  • Discuss

Fade out all matched elements by adjusting their opacity and firing an optional callback after completion.
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.
Arguments:
speed | String, Number
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).
callback (Optional) | Function
A function to be executed whenever the animation completes, executes once for each element animated against.
function callback() {
  this; // dom element
}

Examples:
  • Demo
  • View Source
Animates all paragraphs to fade out, completing the animation within 600 milliseconds.

    $("p").click(function () {
      $("p").fadeOut("slow");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").click(function () {
      $("p").fadeOut("slow");
    });

  });
  </script>
  <style>
  p { font-size:150%; cursor:pointer; }
  </style>
</head>
<body>
  <p>
    If you click on this paragraph
    you'll see it just fade away.
  </p>
</body>
</html>

  • Demo
  • View Source
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");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("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");
    });

  });
  </script>
  <style>
  span { cursor:pointer; }
  span.hilite { background:yellow; }
  div { display:inline; color:red; }
  </style>
</head>
<body>
  <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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Effects/fadeOut"

Categories: Effects/fadeOut | API | Events/click | Attributes/text | Manipulation/remove | Events/hover | Attributes/addClass | Attributes/removeClass

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Effects/fadeTo - jQuery JavaScript Library

  • Blog

Effects/fadeTo

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[edit]

fadeTo( speed, opacity, [callback] )

  • Overview
  • Options
  • Examples
  • Discuss

Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
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.
Arguments:

speed | String, Number
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).
opacity | Number
The opacity to fade to (a number from 0 to 1).
callback (Optional) | Function
A function to be executed whenever the animation completes, executed once for each element animated against.
function callback() {
  this; // dom element
}

Examples:
  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

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

  });
  </script>

</head>
<body>
  <p>
    Click this paragraph to see it fade.
  </p>
  <p>
    Compare to this one that won't fade.
  </p>
</body>
</html>

  • Demo
  • View Source
Fade div to a random opacity on each click, completing the animation within 200 milliseconds.

    $("div").click(function () {
      $(this).fadeTo("fast", Math.random());
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div").click(function () {
      $(this).fadeTo("fast", Math.random());
    });

  });
  </script>
  <style>
  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; }
  </style>
</head>
<body>
  <p>And this is the library that John built...</p>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</body>
</html>

  • Demo
  • View Source
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"});
                      });
                });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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"});
                      });
                });

  });
  </script>
  <style>
  div, p { width:80px; height:40px; top:0; margin:0;
           position:absolute; padding-top:8px; }
  p { background:#fcc; text-align:center; }
  div { background:blue; }
  </style>
</head>
<body>
  <p>Wrong</p>
  <div></div>
  <p>Wrong</p>
  <div></div>
  <p>Right!</p>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Effects/fadeTo"

Categories: Effects/fadeTo | API | Events/click | Core/each | Attributes/text | CSS/css | Traversing/prev

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Effects/animate - jQuery JavaScript Library

  • Blog

Effects/animate

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[edit]

animate( params, [duration], [easing], [callback] )

  • Overview
  • Options
  • Examples
  • Discuss

A function for making your own, custom animations.
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 eg. 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 by animate()).

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 to move the element positively, or negatively, relative to the current position.
Arguments:

params | Options
A set of style attributes that you wish to animate, and to what end.
duration (Optional) | String, Number
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).
easing (Optional) | String
The name of the easing effect that you want to use (Plugin Required). There are two built-in values, "linear" and "swing".
callback (Optional) | Function
A function to be executed whenever the animation completes, executes once for each element animated against.

Examples:
  • Demo
  • View Source
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 );
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    // 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 );
    });

  });
  </script>
  <style>
  div {
    background-color:#bca;
    width:100px;
    border:1px solid green;
  }
  </style>
</head>
<body>
  <button id="go">» Run</button>
  <div id="block">Hello!</div>
</body>
</html>

  • Demo
  • View Source
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");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

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

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

  });
  </script>
  <style>
  div {
    position:absolute;
    background-color:#abc;
    left:50px;
    width:90px;
    height:90px;
    margin:5px;
  }
  </style>
</head>
<body>
  <button id="left">«</button> <button id="right">»</button>
<div class="block"></div>

</body>
</html>

  • Code
Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

$("p").animate({
      "height": "toggle", "opacity": "toggle"
    }, "slow");

  • Code
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);

  • Code
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");

Name Type
[edit]

animate( params, options )

  • Overview
  • Options
  • Examples
  • Discuss

A function for making your own, custom animations.
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 eg. 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.
Arguments:
params | Options
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.

Options:
Name | Type
duration | String, Number | Default: "normal"
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).
easing | String | Default: "swing"
The name of the easing effect that you want to use (Plugin Required). There are two built-in values, "linear" and "swing".
complete | Function |
A function to be executed whenever the animation completes, executes once for each element animated against.
step | Callback |
Template:APICallback
queue | Boolean | Default: true
Setting this to false will make the animation skip the queue and will begin running immediately. (Added in jQuery 1.2)
Examples:
  • Demo
  • View Source
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:""});
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("#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:""});
    });

  });
  </script>
  <style>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;
  }
  </style>
</head>
<body>
  <button id="go1">» Animate Block1</button>
  <button id="go2">» Animate Block2</button>
  <button id="go3">» Animate Both</button>
  <button id="go4">» Reset</button>
  <div id="block1">Block1</div>
  <div id="block2">Block2</div>
</body>
</html>

  • Code
Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

$("p").animate({
      "height": "toggle", "opacity": "toggle"
    }, { duration: "slow" });

  • Code
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 });

  • Code
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" });

Name Type

Retrieved from "http://docs.jquery.com/Effects/animate"

Categories: Effects/animate | API | Events/click | Traversing/add | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Effects/stop - jQuery JavaScript Library

  • Blog

Effects/stop

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[edit]

stop( )

  • Overview
  • Options
  • Examples
  • Discuss

Stops all the currently running animations on all the specified elements.
If any animations are queued to run, then they will begin immediately.

Examples:
  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    // 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);
    });

  });
  </script>
  <style>div {
    position: absolute;
    background-color: #abc;
    left: 0px;
    top:30px;
    width: 60px;
    height: 60px;
    margin: 5px;
  }
  </style>
</head>
<body>
  <button id="go">Go</button>
  <button id="stop">STOP!</button>
  <button id="back">Back</button>
  <div class="block"></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Effects/stop"

Categories: Effects/stop | API | Events/click | Effects/animate

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Effects/queue - jQuery JavaScript Library

  • Blog

Effects/queue

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[edit]

queue( )

  • Overview
  • Options
  • Examples
  • Discuss

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

Examples:
  • Demo
  • View Source
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();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("#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();

  });
  </script>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <button id="show">Show Length of Queue</button>
  <span></span>
  <div></div>
</body>
</html>

Name Type
[edit]

queue( callback )

  • Overview
  • Options
  • Examples
  • Discuss

Adds a new function, to be executed, onto the end of the queue of all matched elements.
Arguments:
callback Function
The function to add to the queue.
function callback() {
  this; // dom element
  // to continue the queue you must call
  jQuery(this).dequeue();
}

Examples:
  • Demo
  • View Source
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();
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(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();
    });

  });
  </script>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
</head>
<body>
  Click here...
  <div></div>
</body>
</html>

Name Type

[edit]

queue( queue )

  • Overview
  • Options
  • Examples
  • Discuss

Replaces the queue of all matched element with this new queue (the array of functions).
Arguments:
queue Array<Function>
The queue to replace all the queues with. The functions have the same parameters and this value as queue(callback).

Examples:
  • Demo
  • View Source
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();
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("#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();
    });

  });
  </script>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
</head>
<body>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Effects/queue"

Categories: Effects/queue | API | Events/click | Attributes/text | Effects/show | Effects/animate | Effects/slideToggle | Effects/hide | Effects/slideUp | Attributes/addClass | Effects/dequeue | Attributes/removeClass | Effects/stop

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Effects/dequeue - jQuery JavaScript Library

  • Blog

Effects/dequeue

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[edit]

dequeue( )

  • Overview
  • Options
  • Examples
  • Discuss

Removes a queued function from the front of the queue and executes it.

Examples:
  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("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);
    });

  });
  </script>
  <style>
  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px;
        background-color:yellow; }
  div.red { background-color:red; }
  </style>
</head>
<body>
  <button>Start</button>
  <div></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Effects/dequeue"

Categories: Effects/dequeue | API | Events/click | Effects/animate | Effects/queue | Attributes/toggleClass

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


API/1.2/Ajax - jQuery JavaScript Library

  • Blog

API/1.2/Ajax

From jQuery JavaScript Library

(Redirected from Ajax)
Jump to: navigation, search

Name Type
Ajax Requests:

Name | Type
jQuery.ajax( options ) | Returns: XMLHttpRequest
Load a remote page using an HTTP request.
load( url, data, callback ) | Returns: jQuery
Load HTML from a remote file and inject it into the DOM.
jQuery.get( url, data, callback ) | Returns: XMLHttpRequest
Load a remote page using an HTTP GET request.
jQuery.getJSON( url, data, callback ) | Returns: XMLHttpRequest
Load JSON data using an HTTP GET request.
jQuery.getScript( url, callback ) | Returns: XMLHttpRequest
Loads, and executes, a local JavaScript file using an HTTP GET request.
jQuery.post( url, data, callback ) | Returns: XMLHttpRequest
Load a remote page using an HTTP POST request.
Ajax Events:

Name | Type
ajaxComplete( callback ) | Returns: jQuery
Attach a function to be executed whenever an AJAX request completes. This is an Ajax Event.
ajaxError( callback ) | Returns: jQuery
Attach a function to be executed whenever an AJAX request fails. This is an Ajax Event.
ajaxSend( callback ) | Returns: jQuery
Attach a function to be executed before an AJAX request is sent. This is an Ajax Event.
ajaxStart( callback ) | Returns: jQuery
Attach a function to be executed whenever an AJAX request begins and there is none already active. This is an Ajax Event.
ajaxStop( callback ) | Returns: jQuery
Attach a function to be executed whenever all AJAX requests have ended. This is an Ajax Event.
ajaxSuccess( callback ) | Returns: jQuery
Attach a function to be executed whenever an AJAX request completes successfully. This is an Ajax Event.
Misc:

Name | Type
jQuery.ajaxSetup( options ) |
Setup global settings for AJAX requests.
serialize( ) | Returns: jQuery
Serializes a set of input elements into a string of data. This will serialize all given elements.
serializeArray( ) | Returns: jQuery
Serializes all forms and form elements (like the .serialize() method) but returns a JSON data structure for you to work with.

Retrieved from "http://docs.jquery.com/API/1.2/Ajax"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/jQuery.ajax - jQuery JavaScript Library

  • Blog

Ajax/jQuery.ajax

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

jQuery.ajax( options )

  • Overview
  • Options
  • Examples
  • Discuss

Load a remote page using an HTTP request.
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).

Warning: All POST are converted to GET when 'script' is the dataType.(because it loads script as a dom script tag)

$.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.

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 Specifying the Data Type for AJAX Requests for more information.

$.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.

As of jQuery 1.2, you can load JSON data located on another domain if you specify a 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.
Arguments:
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 $.ajaxSetup().

Options:

Name | Type
async | Boolean | Default: true
By default, all requests are sent asynchronous (e.g. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
beforeSend | Function
A pre-callback to modify the XMLHttpRequest object before it is sent. Use this to set custom headers etc. The XMLHttpRequest is passed as the only argument. This is an Ajax Event.

function (XMLHttpRequest) {
  this; // the options for this ajax request
}

cache | Boolean | Default: true
Added in jQuery 1.2, if set to false it will force the pages that you request to not be cached by the browser.
complete | Function
A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The XMLHttpRequest object and a string describing the type of success of the request. This is an Ajax Event.

function (XMLHttpRequest, textStatus) {
  this; // the options for this ajax request
}

contentType | String | Default: "application/x-www-form-urlencoded"
When sending data to the server, use this content-type. Default is "application/x-www-form-urlencoded", which is fine for most cases.
data | Object, String
Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key i.e. {foo:["bar1", "bar2"]} becomes '&foo=bar1&foo=bar2'.
dataType | String | Default: Intelligent Guess (xml or html)
The type of data that you're expecting back from the server. If none is specified, jQuery will intelligently pass either responseXML or responseText to your success callback, based on the MIME type of the response. The available types (and the result passed as the first argument to your success callback) are:

  • "xml": Returns a XML document that can be processed via jQuery.
  • "html": Returns HTML as plain text; included script tags are evaluated.
  • warning "script" will turn posts into gets
  • "script": Evaluates the response as JavaScript and returns it as plain text. Disables caching unless option "cache" is used.
  • "json": Evaluates the response as JSON and returns a JavaScript Object.
  • "jsonp": Loads in a JSON block using JSONP. Will add an extra "?callback=?" to the end of your URL to specify the callback. (Added in jQuery 1.2)
  • "text": A plain text string.
error | Function
A function to be called if the request fails. The function gets passed three arguments: The XMLHttpRequest object, a string describing the type of error that occurred and an optional exception object, if one occurred. This is an Ajax Event.

function (XMLHttpRequest, textStatus, errorThrown) {
  // typically only one of textStatus or errorThrown
  // will have info
  this; // the options for this ajax request
}

global | Boolean | Default: true
Whether to trigger global AJAX event handlers for this request. The default is true. Set to false to prevent the global handlers like ajaxStart or ajaxStop from being triggered. This can be used to control various Ajax Events.
ifModified | Boolean | Default: false
Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header.
jsonp | String
Override the callback function name in a jsonp request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url for a GET or the data for a POST. So {jsonp:'onJsonPLoad'} would result in 'onJsonPLoad=?' passed to the server.
processData | Boolean | Default: true
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send DOMDocuments, or other non-processed data, set this option to false.
success | Function
A function to be called if the request succeeds. The function gets passed two arguments: The data returned from the server, formatted according to the 'dataType' parameter, and a string describing the status. This is an Ajax Event.

function (data, textStatus) {
  // data could be xmlDoc, jsonObj, html, text, etc...
  this; // the options for this ajax request
}

timeout | Number
Set a local timeout in ms for the request. This will override the global timeout, if one is set via $.ajaxSetup. For example, you could use this property to give a single request a longer timeout than all other requests that you've set to time out in one second. See $.ajaxSetup() for global timeouts.
type | String | Default: "GET"
The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.
url | String | Default: The current page
The URL to request.
Examples:
  • Code
Load and execute a JavaScript file.

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

  • Code
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 );
   }
 });

  • Code
Retrieve the latest version of an HTML page.

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

  • Code
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;

  • Code
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
 });

Name Type

Retrieved from "http://docs.jquery.com/Ajax/jQuery.ajax"

Categories: Ajax/jQuery.ajax | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/load - jQuery JavaScript Library

  • Blog

Ajax/load

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

load( url, [data], [callback] )

  • Overview
  • Options
  • Examples
  • Discuss

Load HTML from a remote file and inject it into the DOM.
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.
Arguments:

url | String
The URL of the HTML page to load.
data (Optional) | Map
Key/value pairs that will be sent to the server.
callback (Optional) | Callback
The function called when the ajax request is complete (not necessarily success).
function (responseText, textStatus, XMLHttpRequest) {
  this; // dom element
}

Template:APICallback

Examples:
  • Demo
  • View Source
Load a piece of the documentation sidebar navigation into a custom unordered list.

$("#links").load("/Main_Page #p-Getting-Started li");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#links").load("/Main_Page #p-Getting-Started li");
  });
  </script>
  <style>body{ font-size: 11px; font-family: Arial; }</style>
</head>
<body>
  <b>jQuery Links:</b>
<ul id="links"></ul>
</body>
</html>

  • Code
  • Results
Load the feeds.html file into the div with the ID of feeds.

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

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

  • Code
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");
 });

Name Type

Retrieved from "http://docs.jquery.com/Ajax/load"

Categories: Ajax/load | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/jQuery.get - jQuery JavaScript Library

  • Blog

Ajax/jQuery.get

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

jQuery.get( url, [data], [callback] )

  • Overview
  • Options
  • Examples
  • Discuss

Load a remote page using an HTTP GET request.
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.
Arguments:

url | String
The URL of the page to load.
data (Optional) | Map
Key/value pairs that will be sent to the server.
callback (Optional) | Function
A function to be executed whenever the data is loaded successfully.
function (data, textStatus) {
  // data could be xmlDoc, jsonObj, html, text, etc...
  this; // the options for this ajax request
}

Examples:
  • Code
Request the test.php page, but ignore the return results.

$.get("test.php");

  • Code
Request the test.php page and send some additional data along (while still ignoring the return results).

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

  • Code
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);
});

  • Code
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);
  });

Name Type

Retrieved from "http://docs.jquery.com/Ajax/jQuery.get"

Categories: Ajax/jQuery.get | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/jQuery.getJSON - jQuery JavaScript Library

  • Blog

Ajax/jQuery.getJSON

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

jQuery.getJSON( url, [data], [callback] )

  • Overview
  • Options
  • Examples
  • Discuss

Load JSON data using an HTTP GET request.
As of jQuery 1.2, you can load JSON data located on another domain if you specify a 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.
Arguments:

url | String
The URL of the page to load.
data (Optional) | Map
Key/value pairs that will be sent to the server.
callback (Optional) | Function
A function to be executed whenever the data is loaded successfully.
function (data, textStatus) {
  // data will be a jsonObj
  this; // the options for this ajax request
}

Examples:
  • Demo
  • View Source
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;
          });
        });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $.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;
          });
        });
  });
  </script>
  <style>img{ height: 100px; float: left; }</style>
</head>
<body>
  <div id="images"></div>
</body>
</html>

  • Code
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);
});

  • Code
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);
});

  • Code
Alert out the results from requesting test.php (HTML or XML, depending on what was returned).

$.getIfModified("test.php", function(data){
  alert("Data Loaded: " + data);
});

  • Code
Alert out the results from requesting test.php with an additional payload of data (HTML or XML, depending on what was returned).

$.getIfModified("test.cgi", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

  • Code
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);
}

Name Type

Retrieved from "http://docs.jquery.com/Ajax/jQuery.getJSON"

Categories: Ajax/jQuery.getJSON | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/jQuery.getScript - jQuery JavaScript Library

  • Blog

Ajax/jQuery.getScript

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

jQuery.getScript( url, [callback] )

  • Overview
  • Options
  • Examples
  • Discuss

Loads, and executes, a local JavaScript file using an HTTP GET request.
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.
Arguments:
url | String
The URL of the page to load.
callback (Optional) | Function
A function to be executed whenever the data is loaded successfully.
function (data, textStatus) {
  // data should be javascript
  this; // the options for this ajax request
}

Examples:
  • Demo
  • View Source
We load the new 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);
  });
});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $.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);
  });
});
  });
  </script>
  <style>.block {
   background-color: blue;
   width: 150px;
   height: 70px;
   margin: 10px;
}</style>
</head>
<body>
  <button id="go">» Run</button>
<div class="block"></div>

</body>
</html>

  • Code
Load the test.js JavaScript file and execute it.

$.getScript("test.js");

  • Code
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.");
});

Name Type

Retrieved from "http://docs.jquery.com/Ajax/jQuery.getScript"

Categories: Ajax/jQuery.getScript | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/jQuery.post - jQuery JavaScript Library

  • Blog

Ajax/jQuery.post

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

jQuery.post( url, [data], [callback] )

  • Overview
  • Options
  • Examples
  • Discuss

Load a remote page using an HTTP POST request.
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). If you need to have both error and success callbacks, you may want to use $.ajax.
Arguments:

url | String
The URL of the page to load.
data (Optional) | Map
Key/value pairs that will be sent to the server.
callback (Optional) | Function
A function to be executed whenever the data is loaded successfully.
function (data, textStatus) {
  // data could be xmlDoc, jsonObj, html, text, etc...
  this; // the options for this ajax request
}

Examples:{{{1}}}
Name Type

Retrieved from "http://docs.jquery.com/Ajax/jQuery.post"

Categories: Ajax/jQuery.post | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/ajaxComplete - jQuery JavaScript Library

  • Blog

Ajax/ajaxComplete

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

ajaxComplete( callback )

  • Overview
  • Options
  • Examples
  • Discuss

Attach a function to be executed whenever an AJAX request completes. This is an Ajax Event.
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
Arguments:
callback Function
The function to execute.
function (XMLHttpRequest, ajaxOptions) {
  this; // dom element listening
}

Examples:
  • Code
Show a message when an AJAX request completes.

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

Name Type

Retrieved from "http://docs.jquery.com/Ajax/ajaxComplete"

Categories: Ajax/ajaxComplete | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/ajaxError - jQuery JavaScript Library

  • Blog

Ajax/ajaxError

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

ajaxError( callback )

  • Overview
  • Options
  • Examples
  • Discuss

Attach a function to be executed whenever an AJAX request fails. This is an Ajax Event.
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.
Arguments:
callback Function
The function to execute.
function (XMLHttpRequest, ajaxOptions, thrownError) {
  // thrownError only passed if an error was caught
  this; // dom element listening
}

Examples:
  • Code
Show a message when an AJAX request fails.

 $("#msg").ajaxError(function(request, settings){
   $(this).append("<li>Error requesting page " + settings.url + "</li>");
 });

Name Type

Retrieved from "http://docs.jquery.com/Ajax/ajaxError"

Categories: Ajax/ajaxError | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/ajaxSend - jQuery JavaScript Library

  • Blog

Ajax/ajaxSend

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

ajaxSend( callback )

  • Overview
  • Options
  • Examples
  • Discuss

Attach a function to be executed before an AJAX request is sent. This is an Ajax Event.
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
Arguments:
callback Function
The function to execute.
function (XMLHttpRequest, ajaxOptions) {
  this; // dom element listening
}

Examples:
  • Code
Show a message before an AJAX request is sent.

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

Name Type

Retrieved from "http://docs.jquery.com/Ajax/ajaxSend"

Categories: Ajax/ajaxSend | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/ajaxStart - jQuery JavaScript Library

  • Blog

Ajax/ajaxStart

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

ajaxStart( callback )

  • Overview
  • Options
  • Examples
  • Discuss

Attach a function to be executed whenever an AJAX request begins and there is none already active. This is an Ajax Event.
Arguments:
callback Function
The function to execute.
function () {
  this; // dom element listening
}

Examples:
  • Code
Show a loading message whenever an AJAX request starts (and none is already active).

 $("#loading").ajaxStart(function(){
   $(this).show();
 });

Name Type

Retrieved from "http://docs.jquery.com/Ajax/ajaxStart"

Categories: Ajax/ajaxStart | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/ajaxStop - jQuery JavaScript Library

  • Blog

Ajax/ajaxStop

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

ajaxStop( callback )

  • Overview
  • Options
  • Examples
  • Discuss

Attach a function to be executed whenever all AJAX requests have ended. This is an Ajax Event.
Arguments:
callback Function
The function to execute.
function () {
  this; // dom element listening
}

Examples:
  • Code
Hide a loading message after all the AJAX requests have stopped.

 $("#loading").ajaxStop(function(){
   $(this).hide();
 });

Name Type

Retrieved from "http://docs.jquery.com/Ajax/ajaxStop"

Categories: Ajax/ajaxStop | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/ajaxSuccess - jQuery JavaScript Library

  • Blog

Ajax/ajaxSuccess

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

ajaxSuccess( callback )

  • Overview
  • Options
  • Examples
  • Discuss

Attach a function to be executed whenever an AJAX request completes successfully. This is an Ajax Event.
The event object, XMLHttpRequest, and settings used for that request are passed as arguments to the callback.
Arguments:
callback Function
The function to execute.
function (XMLHttpRequest, ajaxOptions) {
  this; // dom element listening
}

Examples:
  • Code
Show a message when an AJAX request completes successfully.

 $("#msg").ajaxSuccess(function(evt, request, settings){
   $(this).append("<li>Successful Request!</li>");
 });

Name Type

Retrieved from "http://docs.jquery.com/Ajax/ajaxSuccess"

Categories: Ajax/ajaxSuccess | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/jQuery.ajaxSetup - jQuery JavaScript Library

  • Blog

Ajax/jQuery.ajaxSetup

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

jQuery.ajaxSetup( options )

  • Overview
  • Options
  • Examples
  • Discuss

Setup global settings for AJAX requests.
See $.ajax for a description of all available options.
Arguments:
options Options
A set of key/value pairs that configure the default Ajax request. All options are optional.

Examples:
  • Code
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 });

Name Type

Retrieved from "http://docs.jquery.com/Ajax/jQuery.ajaxSetup"

Categories: Ajax/jQuery.ajaxSetup | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/serialize - jQuery JavaScript Library

  • Blog

Ajax/serialize

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

serialize( )

  • Overview
  • Options
  • Examples
  • Discuss

Serializes a set of input elements into a string of data. This will serialize all given elements.
As of jQuery 1.2 the serialize method correctly serializes forms. For older versions of jQuery, the Form Plugin's fieldSerialize method should be used.

Examples:
  • Demo
  • View Source
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();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    function showValues() {
      var str = $("form").serialize();
      $("#results").text(str);
    }

    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();

  });
  </script>
  <style>
  body, select { font-size:12px; }
  form { margin:5px; }
  p { color:red; margin:5px; font-size:14px; }
  b { color:blue; }
  </style>
</head>
<body>
  <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"/> check1
    <input type="checkbox" name="check" value="check2" checked="checked"/> check2
    <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
    <input type="radio" name="radio" value="radio2"/> radio2
  </form>
  <p><tt id="results"></tt></p>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Ajax/serialize"

Categories: Ajax/serialize | API | Attributes/text | Selectors/checkbox | Selectors/radio | Events/click | Events/change

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Ajax/serializeArray - jQuery JavaScript Library

  • Blog

Ajax/serializeArray

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

serializeArray( )

  • Overview
  • Options
  • Examples
  • Discuss

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

Examples:
  • Demo
  • View Source
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();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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();

  });
  </script>
  <style>
  body, select { font-size:14px; }
  form { margin:5px; }
  p { color:red; margin:5px; }
  b { color:blue; }
  </style>
</head>
<body>
  <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"/> check1
    <input type="checkbox" name="check" value="check2" checked="checked"/> check2
    <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
    <input type="radio" name="radio" value="radio2"/> radio2
  </form>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Ajax/serializeArray"

Categories: Ajax/serializeArray | API | Selectors/input | Manipulation/empty | Utilities/jQuery.each | Manipulation/append | Selectors/checkbox | Selectors/radio | Events/click | Events/change

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


API/1.2/Utilities - jQuery JavaScript Library

  • Blog

API/1.2/Utilities

From jQuery JavaScript Library

(Redirected from Utilities)
Jump to: navigation, search

Name Type
User Agent:

Name | Type
jQuery.browser | Returns: Map
Contains flags for the useragent, read from navigator.userAgent.
jQuery.browser.version | Returns: String
The version number of the rendering engine for the user's browser.
jQuery.boxModel | Returns: Boolean
States if the current page, in the user's browser, is being rendered using the W3C CSS Box Model.
Array and Object operations:

Name | Type
jQuery.each( object, callback ) | Returns: Object
A generic iterator function, which can be used to seamlessly iterate over both objects and arrays.
jQuery.extend( target, object1, objectN ) | Returns: Object
Extend one object with one or more others, returning the original, modified, object.
jQuery.grep( array, callback, invert ) | Returns: Array
Filter items out of an array, by using a filter function.
jQuery.makeArray( obj ) | Returns: Array
Turns an array-like object into a true array.
jQuery.map( array, callback ) | Returns: Array
Translate all items in an array to another array of items.
jQuery.inArray( value, array ) | Returns: Number
Determine the index of the first parameter in the Array (-1 if not found).
jQuery.unique( array ) | Returns: Array
Remove all duplicate elements from an array of elements.
Test operations:

Name | Type
jQuery.isFunction( obj ) | Returns: boolean
Determine if the parameter passed is a function.
String operations:

Name | Type
jQuery.trim( str ) | Returns: String
Remove the whitespace from the beginning and end of a string.

Retrieved from "http://docs.jquery.com/API/1.2/Utilities"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Utilities/jQuery.browser - jQuery JavaScript Library

  • Blog

Utilities/jQuery.browser

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Utilities

[edit]

jQuery.browser

  • Overview
  • Options
  • Examples
  • Discuss

Contains flags for the useragent, read from navigator.userAgent.
Available flags are:
  • safari
  • opera
  • msie
  • mozilla

This property is available before the DOM is ready, therefore you can use it to add ready events only for certain browsers.

There are situations where object detection is not reliable enough, in such cases it makes sense to use browser detection.

A combination of browser and object detection yields quite reliable results.

Examples:
  • Demo
  • View Source
Show the browser info.

    jQuery.each(jQuery.browser, function(i, val) {
      $("<div>" + i + " : <span>" + val + "</span>")
                .appendTo(document.body);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    jQuery.each(jQuery.browser, function(i, val) {
      $("<div>" + i + " : <span>" + val + "</span>")
                .appendTo(document.body);
    });

  });
  </script>
  <style>
  p { color:green; font-weight:bolder; margin:3px 0 0 10px; }
  div { color:blue; margin-left:20px; font-size:14px; }
  span { color:red; }
  </style>
</head>
<body>
  <p>Browser info:</p>
</body>
</html>

  • Code
Returns true if the current useragent is some version of Microsoft's Internet Explorer

$.browser.msie

  • Code
Alerts "this is safari!" only for safari browsers

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

Name Type

Retrieved from "http://docs.jquery.com/Utilities/jQuery.browser"

Categories: Utilities/jQuery.browser | API | Utilities/jQuery.each | Manipulation/appendTo

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Utilities/jQuery.browser.version - jQuery JavaScript Library

  • Blog

Utilities/jQuery.browser.version

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Utilities

[edit]

jQuery.browser.version

  • Overview
  • Options
  • Examples
  • Discuss

The version number of the rendering engine for the user's browser.
Here are some typical results:
  • Internet Explorer: 6.0, 7.0
  • Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3
  • Opera: 9.20
  • Safari/Webkit: 312.8, 418.9

Examples:
  • Demo
  • View Source
Returns the browser version.

    $("p").html("The browser version is: <span>" +
                jQuery.browser.version + "</span>");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").html("The browser version is: <span>" +
                jQuery.browser.version + "</span>");

  });
  </script>
  <style>
  p { color:blue; margin:20px; }
  span { color:red; }
  </style>
</head>
<body>
  <p>
  </p>
</body>
</html>

  • Code
Alerts the version of IE that is being used

if ( $.browser.msie )
 alert( $.browser.version );

}

  • Code
Often you only care about the "major number," the whole number. This can be accomplished with JavaScript's built-in parseInt() function:

if (jQuery.browser.msie) {
  alert(parseInt(jQuery.browser.version));
}

Name Type

Retrieved from "http://docs.jquery.com/Utilities/jQuery.browser.version"

Categories: Utilities/jQuery.browser.version | API | Attributes/html | Utilities/jQuery.browser

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Utilities/jQuery.boxModel - jQuery JavaScript Library

  • Blog

Utilities/jQuery.boxModel

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Utilities

[edit]

jQuery.boxModel

  • Overview
  • Options
  • Examples
  • Discuss

States if the current page, in the user's browser, is being rendered using the W3C CSS Box Model.

Examples:
  • Demo
  • View Source
Returns the box model for the iframe.

    $("p").html("The box model for this iframe is: <span>" +
                jQuery.boxModel + "</span>");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").html("The box model for this iframe is: <span>" +
                jQuery.boxModel + "</span>");

  });
  </script>
  <style>
  p { color:blue; margin:20px; }
  span { color:red; }
  </style>
</head>
<body>
  <p>
  </p>
</body>
</html>

  • Code
  • Results
Returns false if the page is in QuirksMode in Internet Explorer

$.boxModel

false

Name Type

Retrieved from "http://docs.jquery.com/Utilities/jQuery.boxModel"

Categories: Utilities/jQuery.boxModel | API | Attributes/html

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Utilities/jQuery.each - jQuery JavaScript Library

  • Blog

Utilities/jQuery.each

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Utilities

[edit]

jQuery.each( object, callback )

  • Overview
  • Options
  • Examples
  • Discuss

A generic iterator function, which can be used to seamlessly iterate over both objects and arrays.
This function is not the same as $().each() - 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.
Arguments:
object | Object
The object, or array, to iterate over.
callback | Function
The function that will be executed on every object.
function callback(indexInArray, valueOfElement) {
  var booleanKeepGoing;

  this; // == valueOfElement

  return booleanKeepGoing; // optional, unless false
                           // and want to stop looping
}

Examples:
  • Demo
  • View Source
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 = [ "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));
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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));
    });

  });
  </script>
  <style>
  div { color:blue; }
  div#five { color:red; }
  </style>
</head>
<body>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
  <div id="five"></div>
</body>
</html>

  • Code
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 );
});

  • Code
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 );
});

Name Type

Retrieved from "http://docs.jquery.com/Utilities/jQuery.each"

Categories: Utilities/jQuery.each | API | Attributes/text | Manipulation/append

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Utilities/jQuery.extend - jQuery JavaScript Library

  • Blog

Utilities/jQuery.extend

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Utilities

[edit]

jQuery.extend( target, object1, [objectN] )

  • Overview
  • Options
  • Examples
  • Discuss

Extend one object with one or more others, returning the original, modified, object.
This is a great utility for simple inheritance.
Arguments:

target | Object
The object to extend.
object1 | Object
The object that will be merged into the first.
objectN (Optional) | Object
More objects to merge into the first.

Examples:
  • Code
  • Results
Merge settings and options, modifying settings.

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

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

  • Code
  • Results
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);

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

Name Type

Retrieved from "http://docs.jquery.com/Utilities/jQuery.extend"

Categories: Utilities/jQuery.extend | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Utilities/jQuery.grep - jQuery JavaScript Library

  • Blog

Utilities/jQuery.grep

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Utilities

[edit]

jQuery.grep( array, callback, [invert] )

  • Overview
  • Options
  • Examples
  • Discuss

Filter items out of an array, by using a filter function.
The specified function will be passed two arguments: The current array item and the index of the item in the array. The function must return 'true' to keep the item in the array, false to remove it.
Arguments:

array | Array
The Array to find items in.
callback | Function
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. Optionally, this argument may be a string rather than a function. If the argument is a string, it is treated as a short "lambda-form" function, with "a" representing the list item and "i" representing the index. For example, "a > 0" may be passed instead of "function(a){ return a > 0; }".
function callback(elementOfArray, indexInArray) {
  var shouldKeepIt;

  this; // unmapped

  return shouldKeepIt;
}
invert (Optional) | Boolean
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:
  • Demo
  • View Source
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, "a != 9");
    $("span").text(arr.join(", "));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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, "a != 9");
    $("span").text(arr.join(", "));

  });
  </script>
  <style>
  div { color:blue; }
  p { color:green; margin:0; }
  span { color:red; }
  </style>
</head>
<body>
  <div></div>
  <p></p>
  <span></span>

</body>
</html>

  • Code
  • Results
Filter an array of numbers to include only numbers bigger then zero.

$.grep( [0,1,2], function(n,i){
  return n > 0;
});

[1, 2]

  • Code
  • Results
Filter an array of numbers to exclude numbers bigger then zero using the third parameter, invert.

$.grep( [0,1,2,3,4,5], "a > 1", true);

[0, 1]

Name Type

Retrieved from "http://docs.jquery.com/Utilities/jQuery.grep"

Categories: Utilities/jQuery.grep | API | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Utilities/jQuery.makeArray - jQuery JavaScript Library

  • Blog

Utilities/jQuery.makeArray

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Utilities

[edit]

jQuery.makeArray( obj )

  • Overview
  • Options
  • Examples
  • Discuss

Turns an array-like object into a true array.
Array-like objects have a length property and its properties are numbered from 0 to length - 1. Typically it will be unnecessary to use this function if you are using jQuery which uses this function internally.
Arguments:
obj Object
Array-like object to turn in to an actual Array.

Examples:
  • Demo
  • View Source
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);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var arr = jQuery.makeArray(document.getElementsByTagName("div"));
    arr.reverse(); // use an Array method on list of dom elements
    $(arr).appendTo(document.body);

  });
  </script>
  <style>
  div { color:red; }
  </style>
</head>
<body>
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
  <div>Fourth</div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Utilities/jQuery.makeArray"

Categories: Utilities/jQuery.makeArray | API | Manipulation/appendTo

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Utilities/jQuery.map - jQuery JavaScript Library

  • Blog

Utilities/jQuery.map

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Utilities

[edit]

jQuery.map( array, callback )

  • Overview
  • Options
  • Examples
  • Discuss

Translate all items in an array to another array of items.
The translation function that is provided to this method is called for each item in the array and is passed one argument: The item to be translated. 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.
Arguments:
array | Array
The Array to translate.
callback | Function
The function to process each item against. The argument to the function is the list item. The function can return any value. Optionally, this argument may be a string rather than a function. If the argument is a string, it is treated as a short "lambda-form" function, with "a" representing the list item. For example, "a * a" may be passed instead of "function(a){ return a * a; }".
function callback(elementOfArray, indexInArray) {
  var replacementValue;

  this; // unmapped

  return replacementValue;
}

Examples:
  • Demo
  • View Source
Maps the original array to a new one and adds 4 to each value.

    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, "a + a");
    $("span").text(arr.join(", "));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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, "a + a");
    $("span").text(arr.join(", "));

  });
  </script>
  <style>
  div { color:blue; }
  p { color:green; margin:0; }
  span { color:red; }
  </style>
</head>
<body>
  <div></div>
  <p></p>
  <span></span>

</body>
</html>

  • Code
  • Results
Maps the original array to a new one and adds 4 to each value.

$.map( [0,1,2], function(n){
  return n + 4;
});

[4, 5, 6]

  • Code
  • Results
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;
});

[2, 3]

  • Code
  • Results
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 ];
});

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

  • Code
  • Results
Maps the original array to a new one, each element is squared.

$.map( [0,1,2,3], "a * a" );

[0, 1, 4, 9]

Name Type

Retrieved from "http://docs.jquery.com/Utilities/jQuery.map"

Categories: Utilities/jQuery.map | API | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Utilities/jQuery.inArray - jQuery JavaScript Library

  • Blog

Utilities/jQuery.inArray

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Utilities

[edit]

jQuery.inArray( value, array )

  • Overview
  • Options
  • Examples
  • Discuss

Determine the index of the first parameter in the Array (-1 if not found).
Arguments:
value | Any
Value to see if it exists in the array.
array | Array
Array to look through for the value.

Examples:
  • Demo
  • View Source

    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));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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));

  });
  </script>
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <div>"John" found at <span></span></div>
  <div>4 found at <span></span></div>
  <div>"David" found at <span></span></div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Utilities/jQuery.inArray"

Categories: Utilities/jQuery.inArray | API | Selectors/eq | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Utilities/jQuery.unique - jQuery JavaScript Library

  • Blog

Utilities/jQuery.unique

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Utilities

[edit]

jQuery.unique( array )

  • Overview
  • Options
  • Examples
  • Discuss

Remove all duplicate elements from an array of elements.
Arguments:
array Array
The Array to translate.

Examples:
  • Demo
  • View Source
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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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");

  });
  </script>
  <style>
  div { color:blue; }
  </style>
</head>
<body>
  <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>
</body>
</html>

  • Code
  • Results
Removes any duplicate elements from the array of divs.

$.unique(document.getElementsByTagName("div"));

[<div>, <div>, ...]

Name Type

Retrieved from "http://docs.jquery.com/Utilities/jQuery.unique"

Categories: Utilities/jQuery.unique | API | Core/get | Attributes/text | CSS/css

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Utilities/jQuery.isFunction - jQuery JavaScript Library

  • Blog

Utilities/jQuery.isFunction

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Utilities

[edit]

jQuery.isFunction( obj )

  • Overview
  • Options
  • Examples
  • Discuss

Determine if the parameter passed is a function.
Arguments:
obj Object
Object to test whether or not it is a function.

Examples:
  • Demo
  • View Source
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);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    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);
    });

  });
  </script>
  <style>
  div { color:blue; margin:2px; font-size:14px; }
  span { color:red; }
  </style>
</head>
<body>

  <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>

</body>
</html>

  • Code
  • Results
Finds out if the parameter is a funcion.

$.isFunction(function(){});

true

Name Type

Retrieved from "http://docs.jquery.com/Utilities/jQuery.isFunction"

Categories: Utilities/jQuery.isFunction | API | Utilities/jQuery.each | Selectors/eq | Attributes/text

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Utilities/jQuery.trim - jQuery JavaScript Library

  • Blog

Utilities/jQuery.trim

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Utilities

[edit]

jQuery.trim( str )

  • Overview
  • Options
  • Examples
  • Discuss

Remove the whitespace from the beginning and end of a string.
Uses a regular expression to remove whitespace from the given string.
Arguments:
str String
The string to trim.

Examples:
  • Demo
  • View Source
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");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("button").click(function () {
      var str = "     lots of spaces before and after     ";
      alert("'" + str + "'");

      str = jQuery.trim(str);
      alert("'" + str + "' - no longer");
    });

  });
  </script>

</head>
<body>
  <button>Show Trim Example</button>
</body>
</html>

  • Code
  • Results
Removes the two whitespaces at the start and at the end of the string.

$.trim("  hello, how are you?  ");

"hello, how are you?"

Name Type

Retrieved from "http://docs.jquery.com/Utilities/jQuery.trim"

Categories: Utilities/jQuery.trim | API | Events/click

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Draggables - jQuery JavaScript Library

  • Blog

UI/Draggables

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery UI Docs

Make anything on your page mouse draggable.

Depends on: ui.mouse.js

Name Type
Example:
  • Demo
  • View Source
Makes the div draggable.

$(".block").draggable();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $(".block").draggable();
  });
  </script>
  <style>.block {
   border: 2px solid #0090DF;
   background-color: #68BFEF;
   width: 150px;
   height: 70px;
   margin: 10px;
}</style>
</head>
<body>
  <script src="../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
  <script src="../view/trunk/ui/current/ui.mouse.js"></script>
  <script src="../view/trunk/ui/current/ui.draggable.js"></script>
  <script src="../view/trunk/ui/current/ui.draggable.ext.js"></script>
<div class="block"></div>

</body>
</html>

Name Type
Documentation:

Name | Type
draggable( options ) | Returns: Dragset
Creates new draggables on the nodeset supplied by the query.
draggableInstance( ) | Returns: Instance
Returns the OO instance of the current draggable.
draggableDestroy( ) | Returns: jQuery
Destroys all draggable functionality in the current jQuery.
draggableEnable( ) | Returns: jQuery
Enables draggables.
draggableDisable( ) | Returns: jQuery
Disables draggables.
Demos:

  • A series of Draggable demos

Name Type

Retrieved from "http://docs.jquery.com/UI/Draggables"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Draggables/draggable - jQuery JavaScript Library

  • Blog

UI/Draggables/draggable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Draggables

[edit]

draggable( options )

  • Overview
  • Options
  • Examples
  • Discuss

Creates new draggables on the nodeset supplied by the query.
This jQuery plugin makes DOM nodes draggable by mouse. You can additionally supply a great range of options to make them fit your needs.
Arguments:
options Options
A set of key/value pairs that configure the draggable. All options are optional.

Options:

Name | Type
appendTo | Selector
The string should be a jQuery selector. The matched element will be used as the helper's container. If not specified, the helper is appended to the same container as the draggable.
axis | String
Constrains dragging to either the horizontal (x) or vertical (y) axis. Cannot be used with cursorAt. Possible values: 'x', 'y'.
containment | Element, Selector
Constrains dragging to within the bounds of the specified element - can be a DOM element, 'parent', 'document' or a jQuery selector.
cursor | String
The css cursor for the helper during the drag operation.
cursorAt | {top, left, bottom, right}
Moves the dragging element/helper so the cursor always appears to drag from the same position.
dragPrevention | Array<String>
Prevents dragging if you start on elements of the specified type(s). Default: ['input', 'textarea', 'button', 'select', 'option'].
effect | [String, String]
The effects for the drag start and stop. Possible values [Start, Stop]: 'fade' (Start - fade in, Stop - fade out)
grid | [Integer x, Integer y]
Snaps the dragging element/helper to a grid, every x and y pixels. Cannot be used with cursorAt.
handle | Element, Selector
Restricts drag start click to the specified element. Default value: draggable element.
helper | Element function()
Allows for a helper element to be used for dragging display. The supplied function should return a valid DOM node to be used as a custom proxy helper.
helper | String
Allows for a helper element to be used for dragging display. The 'clone' option will produce the 'ghosting' effect. Possible values: 'original', 'clone', Function. Default value: 'original'.
opacity | Float
Opacity for element/helper while being dragged.
preventionDistance | Integer
Tolerance for when dragging should start. If specified, dragging will not start until after mouse is dragged beyond distance.
preventionTimeout | Integer
Time in milliseconds to define when the dragging should start. It helps preventing unwanted drags when clicking on an element. Default value: false
revert | Boolean
If true, the element will return to its start position when dragging stops.
scroll | Boolean
If true, container auto-scrolls while dragging. Default value: true.
scrollSensitivity | Integer
Default value: 20.
scrollSpeed | Integer
Default value: 20.
zIndex | Integer
z-index for element/helper while being dragged.
start | function(e, ui)
Function to call when dragging starts.
drag | function(e, ui)
Function to call when the mouse is moved during the dragging. ui.position.left and ui.position.top give the position.
stop | function(e, ui)
Function to call when dragging stops. ui.position.left and ui.position.top give the position.
Examples:
  • Demo
  • View Source
Makes the div draggable.

$(".block").draggable();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $(".block").draggable();
  });
  </script>
  <style>.block {
   border: 2px solid #0090DF;
   background-color: #68BFEF;
   width: 150px;
   height: 70px;
   margin: 10px;
}</style>
</head>
<body>
  <script src="../../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
  <script src="../../view/trunk/ui/current/ui.mouse.js"></script>
  <script src="../../view/trunk/ui/current/ui.draggable.js"></script>
  <script src="../../view/trunk/ui/current/ui.draggable.ext.js"></script>
<div class="block"></div>

</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/UI/Draggables/draggable"

Categories: UI/Draggables/draggable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Draggables/draggableInstance - jQuery JavaScript Library

  • Blog

UI/Draggables/draggableInstance

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Draggables

[edit]

draggableInstance( )

  • Overview
  • Options
  • Examples
  • Discuss

Returns the OO instance of the current draggable.
For the advanced, this function is very useful to modify internals of the draggables after initializing it. It returns a javascript function instance.

Retrieved from "http://docs.jquery.com/UI/Draggables/draggableInstance"

Categories: UI/Draggables/draggableInstance | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Draggables/draggableDestroy - jQuery JavaScript Library

  • Blog

UI/Draggables/draggableDestroy

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Draggables

[edit]

draggableDestroy( )

  • Overview
  • Options
  • Examples
  • Discuss

Destroys all draggable functionality in the current jQuery.
Destroys all draggable functionality in the current jQuery.

Retrieved from "http://docs.jquery.com/UI/Draggables/draggableDestroy"

Categories: UI/Draggables/draggableDestroy | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Draggables/draggableEnable - jQuery JavaScript Library

  • Blog

UI/Draggables/draggableEnable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Draggables

[edit]

draggableEnable( )

  • Overview
  • Options
  • Examples
  • Discuss

Enables draggables.
Re-enables draggable functionality on the jQuery supplied that has been disabled before.

Retrieved from "http://docs.jquery.com/UI/Draggables/draggableEnable"

Categories: UI/Draggables/draggableEnable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Draggables/draggableDisable - jQuery JavaScript Library

  • Blog

UI/Draggables/draggableDisable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Draggables

[edit]

draggableDisable( )

  • Overview
  • Options
  • Examples
  • Discuss

Disables draggables.
Temporarily disables draggables on the current jQuery. Can be re-enabled again later on.

Retrieved from "http://docs.jquery.com/UI/Draggables/draggableDisable"

Categories: UI/Draggables/draggableDisable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Droppables - jQuery JavaScript Library

  • Blog

UI/Droppables

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery UI Docs

Give your draggables a place to drop.

Depends on: ui.mouse.js, ui.draggable.js

Name Type
Example:
  • Demo
  • View Source
Makes the div drag and droppable.

$(".block").draggable({helper: 'clone'});
$(".drop").droppable({
    accept: ".block",
    activeClass: 'droppable-active',
    hoverClass: 'droppable-hover',
    drop: function(ev, ui) {
        $(this).append("<br>Dropped!");
    }
});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $(".block").draggable({helper: 'clone'});
$(".drop").droppable({
    accept: ".block",
    activeClass: 'droppable-active',
    hoverClass: 'droppable-hover',
    drop: function(ev, ui) {
        $(this).append("<br>Dropped!");
    }
});
  });
  </script>
  <style>.block {
   position: absolute;
   top: 5px;
   left: 5px;
   border: 2px solid #0090DF;
   background-color: #68BFEF;
   width: 75px;
   height: 75px;
   margin: 10px;
   z-index: 100;
}
.drop {
    background-color: #e9b96e;
    border: 3px double #c17d11;
   width: 150px;
   height: 70px;
   margin: 10px;
  position: absolute;
  top: 5px;
  right: 5px;
  opacity: 0.7;
}
.droppable-active {
    opacity: 1.0;
}
.droppable-hover {
    outline: 1px dotted black;
}</style>
</head>
<body>
<script src="../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script src="../view/trunk/ui/current/ui.mouse.js"></script>
<script src="../view/trunk/ui/current/ui.draggable.js"></script>
<script src="../view/trunk/ui/current/ui.draggable.ext.js"></script>
<script src="../view/trunk/ui/current/ui.droppable.js"></script>
<script src="../view/trunk/ui/current/ui.droppable.ext.js"></script>
<div class="block">drag me!</div>
<div class="drop">drop on me!</div>

</body>
</html>

Name Type
Documentation:

Name | Type
droppable( options ) | Returns: Dropset
Creates new droppables on the nodeset supplied by the query.
droppableInstance( ) | Returns: Instance
Returns the OO instance of the current droppable.
droppableDestroy( ) | Returns: jQuery
Destroys all droppable functionality in the current jQuery.
droppableEnable( ) | Returns: jQuery
Enables droppables.
droppableDisable( ) | Returns: jQuery
Disables droppables.
Demos:

  • A series of Drag and Drop demos

Name Type

Retrieved from "http://docs.jquery.com/UI/Droppables"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Droppables/droppable - jQuery JavaScript Library

  • Blog

UI/Droppables/droppable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Droppables

[edit]

droppable( options )

  • Overview
  • Options
  • Examples
  • Discuss

Creates new droppables on the nodeset supplied by the query.
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.
Arguments:
options Options
A set of key/value pairs that configure the droppable. All options are optional.

Options:

Name | Type
accept | Boolean function(draggable)
This function is called for each draggable on the page, to provide a custom filter. Return true if draggable should be accepted.
accept | String
The string should be a jQuery selector. All draggables that match the selector will be accepted.
activeClass | String
The class that should be added to the droppable while an acceptable draggable is being dragged.
greedy | Boolean
If true, will prevent event propagation on nested droppables. Default value: false.
hoverClass | String
The class that should be added to the droppable while being hovered by an acceptable draggable.
tolerance | String
Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'. Default value: 'intersect'.
activate | function(e, ui)
This function is called any time an accepted draggable starts dragging.
deactivate | function(e, ui)
This function is called any time an accepted draggable stops dragging.
over | function(e, ui)
This function is called as an accepted draggable is dragged 'over' (within the tolerance of) this droppable.
out | function(e, ui)
This function is called when an accepted draggable is dragged out (within the tolerance of) this droppable.
drop | function(e, ui)
This function is called when an accepted draggable is dropped 'over' (within the tolerance of) this droppable.
Examples:
  • Demo
  • View Source
Makes the div drag and droppable.

$(".block").draggable({helper: 'clone'});
$(".drop").droppable({
    accept: ".block",
    activeClass: 'droppable-active',
    hoverClass: 'droppable-hover',
    drop: function(ev, ui) {
        $(this).append("<br>Dropped!");
    }
});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $(".block").draggable({helper: 'clone'});
$(".drop").droppable({
    accept: ".block",
    activeClass: 'droppable-active',
    hoverClass: 'droppable-hover',
    drop: function(ev, ui) {
        $(this).append("<br>Dropped!");
    }
});
  });
  </script>
  <style>.block {
   position: absolute;
   top: 5px;
   left: 5px;
   border: 2px solid #0090DF;
   background-color: #68BFEF;
   width: 75px;
   height: 75px;
   margin: 10px;
   z-index: 100;
}
.drop {
    background-color: #e9b96e;
    border: 3px double #c17d11;
   width: 150px;
   height: 70px;
   margin: 10px;
  position: absolute;
  top: 5px;
  right: 5px;
  opacity: 0.7;
}
.droppable-active {
    opacity: 1.0;
}
.droppable-hover {
    outline: 1px dotted black;
}</style>
</head>
<body>
  <script src="../../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
  <script src="../../view/trunk/plugins/ui/ui.mouse.js"></script>
<script src="../../view/trunk/plugins/ui/ui.draggable.js"></script>
<script src="../../view/trunk/plugins/ui/ui.draggable.ext.js"></script>
<script src="../../view/trunk/plugins/ui/ui.droppable.js"></script>
<script src="../../view/trunk/plugins/ui/ui.droppable.ext.js"></script>
<div class="block">drag me!</div>
<div class="drop">drop on me!</div>

</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/UI/Droppables/droppable"

Categories: UI/Droppables/droppable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Droppables/droppableInstance - jQuery JavaScript Library

  • Blog

UI/Droppables/droppableInstance

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Droppables

[edit]

droppableInstance( )

  • Overview
  • Options
  • Examples
  • Discuss

Returns the OO instance of the current droppable.
For the advanced, this function is very useful to modify internals of the droppables after initializing it. It returns a javascript function instance.

Retrieved from "http://docs.jquery.com/UI/Droppables/droppableInstance"

Categories: UI/Droppables/droppableInstance | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Droppables/droppableDestroy - jQuery JavaScript Library

  • Blog

UI/Droppables/droppableDestroy

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Droppables

[edit]

droppableDestroy( )

  • Overview
  • Options
  • Examples
  • Discuss

Destroys all droppable functionality in the current jQuery.
Destroys all droppable functionality in the current jQuery.

Retrieved from "http://docs.jquery.com/UI/Droppables/droppableDestroy"

Categories: UI/Droppables/droppableDestroy | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Droppables/droppableEnable - jQuery JavaScript Library

  • Blog

UI/Droppables/droppableEnable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Droppables

[edit]

droppableEnable( )

  • Overview
  • Options
  • Examples
  • Discuss

Enables droppables.
Re-enables droppable functionality on the jQuery supplied that has been disabled before.

Retrieved from "http://docs.jquery.com/UI/Droppables/droppableEnable"

Categories: UI/Droppables/droppableEnable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Droppables/droppableDisable - jQuery JavaScript Library

  • Blog

UI/Droppables/droppableDisable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Droppables

[edit]

droppableDisable( )

  • Overview
  • Options
  • Examples
  • Discuss

Disables droppables.
Temporarily disables droppables on the current jQuery. Can be re-enabled again later on.

Retrieved from "http://docs.jquery.com/UI/Droppables/droppableDisable"

Categories: UI/Droppables/droppableDisable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Sortables - jQuery JavaScript Library

  • Blog

UI/Sortables

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery UI Docs

Make your lists drag-and-drop sortable.

Depends on: jquery.dimensions.js, ui.mouse.js, ui.draggable.js, ui.droppable.js

Name Type
Example:
  • Demo
  • View Source
Basic Example of a sortable.

$("#myList").sortable({});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#myList").sortable({});
  });
  </script>
  <style>ul { list-style: none; }
li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; }</style>
</head>
<body>
  <script  src="../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script src="../view/trunk/ui/current/ui.mouse.js"></script>
<script src="../view/trunk/ui/current/ui.draggable.js"></script>
<script src="../view/trunk/ui/current/ui.droppable.js"></script>
<script src="../view/trunk/ui/current/ui.sortable.js"></script>
<ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
</ul>

</body>
</html>

Name Type
Documentation:

Name | Type
sortable( options ) |
Creates new sortable on the nodeset supplied by the query.
sortableDestroy( ) | Returns: jQuery
Destroys all sortable functionality in the current jQuery.
Demos:

  • A few demos

Name Type

Retrieved from "http://docs.jquery.com/UI/Sortables"

Categories: Core/$ | UI/Sortables/sortable

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Sortables/sortable - jQuery JavaScript Library

  • Blog

UI/Sortables/sortable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Sortables

[edit]

sortable( options )

  • Overview
  • Options
  • Examples
  • Discuss

Creates new sortable on the nodeset supplied by the query.
This jQuery plugin makes DOM nodes sortable by mouse. You can additionally supply a great range of options to make them fit your needs.
Arguments:
options Options
A set of key/value pairs that configure the sortable. All options are optional.

Options:

Name | Type
items | Selector
Items to apply sorting to.
helper | Element function()
Allows for a helper element to be used for dragging display. The supplied function should return a valid DOM node to be used as a custom proxy helper.
containment | String
Constrains dragging to within the bounds of the specified element. Possible values: 'parent', 'document', jQuery String.
zIndex | int
z-index for element/helper while being sorted.
hoverClass | String
Class that gets applied to the otherwise white space.
start | function(e, ui)
Function to call when sorting starts.
stop | function(e, ui)
Function to call when sorting stops.
update | function(e, ui)
Function to call when the user stopped sorting and something has changed.
sort | function(e, ui)
Function to call during sorting.
change | function(e, ui)
Function to call during sorting, when something changed.
Examples:
  • Demo
  • View Source
Basic Example of a sortable.

$("#myList").sortable({});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#myList").sortable({});
  });
  </script>
  <style>ul { list-style: none; }
li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; }</style>
</head>
<body>
  <script  src="../../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script src="../../view/trunk/plugins/ui/ui.mouse.js"></script>
<script src="../../view/trunk/plugins/ui/ui.draggable.js"></script>
<script src="../../view/trunk/plugins/ui/ui.droppable.js"></script>
<script src="../../view/trunk/plugins/ui/ui.sortable.js"></script>
<ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
</ul>

</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/UI/Sortables/sortable"

Categories: UI/Sortables/sortable | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Sortables/sortableDestroy - jQuery JavaScript Library

  • Blog

UI/Sortables/sortableDestroy

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Sortables

[edit]

sortableDestroy( )

  • Overview
  • Options
  • Examples
  • Discuss

Destroys all sortable functionality in the current jQuery.

Retrieved from "http://docs.jquery.com/UI/Sortables/sortableDestroy"

Categories: UI/Sortables/sortableDestroy | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Selectables - jQuery JavaScript Library

  • Blog

UI/Selectables

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery UI Docs

Allow your users to select groups of items.

Depends on: jquery.dimensions.js, ui.mouse.js, ui.draggable.js, ui.droppable.js

Name Type
Example:
  • Demo
  • View Source
Basic Example of a selectable. (Draw a box with your mouse to select items.)

$("#myList").selectable();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#myList").selectable();
  });
  </script>
  <style>ul { list-style: none; }
.ui-selected { background: #727EA3; color: #FFF; }
.ui-selecting { border: 1px solid #AAA; }
li { background: #CFD4E6; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; }</style>
</head>
<body>
  <script  src="../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script src="../view/trunk/ui/current/ui.mouse.js"></script>
<script src="../view/trunk/ui/current/ui.draggable.js"></script>
<script src="../view/trunk/ui/current/ui.droppable.js"></script>
<script src="../view/trunk/ui/current/ui.selectable.js"></script>
<ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
</ul>

</body>
</html>

Name Type
Documentation:

Name | Type
selectable( options ) |
Creates new selectable on the nodeset supplied by the query.
Demos:

  • A few demos

Name Type

Retrieved from "http://docs.jquery.com/UI/Selectables"

Categories: Core/$ | UI/Selectables/selectable

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Selectables/selectable - jQuery JavaScript Library

  • Blog

UI/Selectables/selectable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Selectables

[edit]

selectable( options )

  • Overview
  • Options
  • Examples
  • Discuss

Creates new selectable on the nodeset supplied by the query.
Arguments:
options Options
A set of key/value pairs that configure the selectable. All options are optional.

Options:
Name | Type
filter | Selector
The matching child elements will be made selectees (able to be selected). Default value: '*'
selected | Function
This callback is fired at the end of the select operation, on each element added to the selection.
selecting | Function
This callback is fired during the select operation, on each element added to the selection.
unselected | Function
This callback is fired at the end of the select operation, on each element removed from the selection.
unselecting | Function
This callback is fired during the select operation, on each element removed from the selection.

Examples:
  • Demo
  • View Source
Basic Example of a selectable. (Draw a box with your mouse to select items.)

$("#myList").selectable();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#myList").selectable();
  });
  </script>
  <style>ul { list-style: none; }
.ui-selected { background: #727EA3; color: #FFF; }
.ui-selecting { border: 1px solid #AAA; }
li { background: #CFD4E6; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; }</style>
</head>
<body>
  <script  src="../../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script src="../../view/trunk/plugins/ui/ui.mouse.js"></script>
<script src="../../view/trunk/plugins/ui/ui.draggable.js"></script>
<script src="../../view/trunk/plugins/ui/ui.droppable.js"></script>
<script src="../../view/trunk/plugins/ui/ui.selectable.js"></script>
<ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
</ul>

</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/UI/Selectables/selectable"

Categories: UI/Selectables/selectable | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Resizables - jQuery JavaScript Library

  • Blog

UI/Resizables

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery UI Docs

Add grabbable resize controls to your elements.

Depends on: jquery.dimensions.js, ui.mouse.js

Name Type
Example:
  • Demo
  • View Source
A simple jQuery UI Resizable.

$("#example").resizable();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#example").resizable();
  });
  </script>
  <style>div { width: 150px; height: 100px; }</style>
</head>
<body>
  <link rel="stylesheet" href="../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script  src="../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script  src="../view/trunk/ui/current/ui.mouse.js"></script>
<script  src="../view/trunk/ui/current/ui.resizable.js"></script>
<div id='example' class="ui-wrapper example">
<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>Resize me</div>
</div>

</body>
</html>

Name Type
Documentation:

Name | Type
resizable( options ) |
Creates new resizables on the nodeset supplied by the query.
resizableInstance( ) | Returns: Instance
Returns the OO instance of the current resizable.
resizableDestroy( ) | Returns: jQuery
Destroys all resizing functionality in the current jQuery.
resizableEnable( ) | Returns: jQuery
Enables resizing.
resizableDisable( ) | Returns: jQuery
Disables resizing.
Demos:

  • UI-themed demos

Name Type

Retrieved from "http://docs.jquery.com/UI/Resizables"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Resizables/resizable - jQuery JavaScript Library

  • Blog

UI/Resizables/resizable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Resizables

[edit]

resizable( options )

  • Overview
  • Options
  • Examples
  • Discuss

Creates new resizables on the nodeset supplied by the query.
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.
Arguments:
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.

Options:

Name | Type
handles | {n, e, s, w, ne, se, sw, nw}
Each handle string (if specified) should be a jquery selector matching the child element of the resizable to use as the handle. If the handle is not a child of the resizable, you can pass in the DOM node or a valid jQuery object directly.
containment | Element, Selector
Constrains resizing to within the bounds of the specified element - can be a DOM element, 'parent', 'document' or a jQuery selector.
maxHeight | Int
This is the maximum height the resizable should be allowed to resize to.
maxWidth | Int
This is the maximum width the resizable should be allowed to resize to.
minHeight | Int
This is the minimum height the resizable should be allowed to resize to.
minWidth | Int
This is the minimum width the resizable should be allowed to resize to.
proxy | String
This is the css class that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the element is sized.
destructive | Boolean
Largely internal option. For elements that cannot have childnodes, it creates a wrapper div and all handles by itself, allowing to still control them via css. Try doing $('textarea').resizable() for an example.
proportionallyResize | Array
Advanced option that allows other elements to get proportionally resized together with the original one. Just specify jquery string in this array or directly insert DOM nodes.
start | function(e, ui)
This function is called at the start of a resize operation.
resize | function(e, ui)
This function is called during the resize, on the drag of the resize handler.
stop | function(e, ui)
This function is called at the end of a resize operation.
Examples:
  • Demo
  • View Source
A simple jQuery UI Resizable.

$("#example").resizable();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#example").resizable();
  });
  </script>
  <style>div { width: 150px; height: 100px; }</style>
</head>
<body>
  <link rel="stylesheet" href="../../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script  src="../../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script src="../../view/trunk/ui/current/ui.mouse.js"></script>
<script src="../../view/trunk/ui/current/ui.resizable.js"></script>
<div id='example' class="ui-wrapper example">
<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>Resize me</div>
</div>

</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/UI/Resizables/resizable"

Categories: UI/Resizables/resizable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Resizables/resizableInstance - jQuery JavaScript Library

  • Blog

UI/Resizables/resizableInstance

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Resizables

[edit]

resizableInstance( )

  • Overview
  • Options
  • Examples
  • Discuss

Returns the OO instance of the current resizable.
For the advanced, this function is very useful to modify internals of the resizable after initializing it. It returns a javascript function instance.

Retrieved from "http://docs.jquery.com/UI/Resizables/resizableInstance"

Categories: UI/Resizables/resizableInstance | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Resizables/resizableDestroy - jQuery JavaScript Library

  • Blog

UI/Resizables/resizableDestroy

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Resizables

[edit]

resizableDestroy( )

  • Overview
  • Options
  • Examples
  • Discuss

Destroys all resizing functionality in the current jQuery.
Destroys all resizing functionality in the current jQuery.

Retrieved from "http://docs.jquery.com/UI/Resizables/resizableDestroy"

Categories: UI/Resizables/resizableDestroy | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Resizables/resizableEnable - jQuery JavaScript Library

  • Blog

UI/Resizables/resizableEnable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Resizables

[edit]

resizableEnable( )

  • Overview
  • Options
  • Examples
  • Discuss

Enables resizing.
Re-enables resizing functionality on the jQuery supplied that has been disabled before.

Retrieved from "http://docs.jquery.com/UI/Resizables/resizableEnable"

Categories: UI/Resizables/resizableEnable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Resizables/resizableDisable - jQuery JavaScript Library

  • Blog

UI/Resizables/resizableDisable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Resizables

[edit]

resizableDisable( )

  • Overview
  • Options
  • Examples
  • Discuss

Disables resizing.
Temporarily disables resizing on the current jQuery. Can be re-enabled again later on.

Retrieved from "http://docs.jquery.com/UI/Resizables/resizableDisable"

Categories: UI/Resizables/resizableDisable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Accordion - jQuery JavaScript Library

  • Blog

UI/Accordion

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery UI Docs

An expandable/collapsible content pane.

Depends on: jquery.dimensions.js

Name Type
Example:
  • Demo
  • View Source
A simple jQuery UI Accordion.

$("#example").accordion();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  <link rel="stylesheet" href="../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
  <script type="text/javascript" src="../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
  <script type="text/javascript" src="../view/trunk/plugins/ui/ui.accordion.js"></script>
  <script>
  $(document).ready(function(){
    $("#example").accordion();
  });
  </script>

</head>
<body>
      <ul id="example" class="ui-accordion-container" style="width: 200px;">
        <li>
            <div class="ui-accordion-left"></div>
            <a href='#' class="ui-accordion-link">
                Test 1
                <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 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>
</body>
</html>

Name Type
Documentation:

Name | Type
accordion( options ) | Returns: jQuery
Make the selected elements Accordion widgets.
activate( index ) | Returns: jQuery
Activate a content part of the Accordion programmatically.
Demos:

  • A few demos
  • A UI-themed demo

Name Type

Retrieved from "http://docs.jquery.com/UI/Accordion"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Accordion/accordion - jQuery JavaScript Library

  • Blog

UI/Accordion/accordion

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Accordion

[edit]

accordion( options )

  • Overview
  • Options
  • Examples
  • Discuss

Make the selected elements Accordion widgets.
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 change event is triggered everytime the accordion changes. Apart from the event object, all arguments are jQuery objects.

Arguments: event, newHeader, oldHeader, newContent, oldContent
Arguments:
options Options
A set of key/value pairs that configure the accordion. All options are optional.

Options:

Name | Type
header | String, Element, jQuery | Default: first child's tagname
Selector for the header element.
  • Code
Selects all anchors with class "head" as headers for the accordion.

$(".selector").accordion({
   header: "a.head"
})

active | String, Element, jQuery, Boolean, Number | Default: first child
Selector for the active element. Set to false to display none at start.
  • Code
Selects the header with class "current" as active on startup.

$(".selector").accordion({
   active: ".current"
})

selectedClass | String | Default: 'selected'
Class for active header elements.
  • Code
Sets the class for active header elements to "active".

$(".selector").accordion({
   selectedClass: "active"
})

alwaysOpen | Boolean | Default: true
Whether there must be one content element open.
  • Code
Allows the accordion to be fully closed

$(".selector").accordion({
   alwaysOpen: false
})

animated | Boolean, String | Default: 'slide'
Choose your favorite animation, or disable them (set to false). In addition to the default, "bounceslide" and "easeslide" are supported (both require the easing plugin).
  • Code
Disables animations for this accordion

$(".selector").accordion({
   animated: false
})

  • Code
Animates the accordion with a bouncy bounceslide - requires easing plugin

$(".selector").accordion({
   animated: "bounceslide"
})

  • Code
Animates the accordion with a smooth easeslide - requires easing plugin

$(".selector").accordion({
   animated: "easeslide"
})

event | String | Default: "click"
The event on which to trigger the accordion.
  • Code
Trigger the accordion on mouseover.

$(".selector").accordion({
   event: "mouseover"
})

navigation | Boolean | Default: false
If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving.
  • Code
Enables the navigation option for this accordion, matching the active accordion element to location.href

$(".selector").accordion({
   navigation: true
})

autoheight | Boolean | Default: false
If set, the highest content part is used as height reference for all other parts. Provides more consistent animations.
  • Code
Enables the autoheight option, setting the height of the biggest element in the accordion to all its other elements.

$(".selector").accordion({
   autoheight: true
})

Examples:
  • Demo
  • View Source
A simple jQuery UI Accordion.

$("#example").accordion();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#example").accordion();
  });
  </script>

</head>
<body>
  <link rel="stylesheet" href="../../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="../../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script type="text/javascript" src="../../view/trunk/plugins/ui/ui.accordion.js"></script>

    <ul id="example" class="ui-accordion-container" style="width: 200px;">
        <li>
            <div class="ui-accordion-left"></div>
            <a href='#' class="ui-accordion-link">
                Test 1
                <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 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>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/UI/Accordion/accordion"

Categories: UI/Accordion/accordion | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Accordion/activate - jQuery JavaScript Library

  • Blog

UI/Accordion/activate

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Accordion

[edit]

activate( index )

  • Overview
  • Options
  • Examples
  • Discuss

Activate a content part of the Accordion programmatically.
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).
Arguments:
index String, Element, jQuery, Boolean, Number
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:
  • Code
Activate the second content of the Accordion contained in <div id="accordion">.

$(".selector").activate(1)

  • Code
Close all content parts of the accordion.

$(".selector").activate(false)

  • Code
Activate the first element matching the given expression.

$(".selector").activate("a:first")

Name Type

Retrieved from "http://docs.jquery.com/UI/Accordion/activate"

Categories: UI/Accordion/activate | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker - jQuery JavaScript Library

  • Blog

UI/Datepicker

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery UI Docs

[edit]

UI Datepicker v3.1

[edit]

Authors Marc Grabanski and Keith Wood

An easy-to-use datepicker.

Name Type
Example:
  • Demo
  • View Source
A simple jQuery UI Datepicker. Just add a text input field to your page and then attach the datepicker to it.

$('#example').datepicker();
$('#exampleRange').datepicker({rangeSelect: true, firstDay: 1});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $('#example').datepicker();
    $('#exampleRange').datepicker({rangeSelect: true, firstDay: 1});
  });
  </script>

</head>
<body>
  <link rel="stylesheet" href="../view/trunk/themes/flora/flora.datepicker.css" type="text/css" media="screen" title="Flora (Default)">
<script  src="../view/trunk/ui/current/datepicker/core/ui.datepicker.js"></script>
<input class="hasDatepicker" type="text" id="example" value="Click inside me to see a datepicker" style="width:300px;"/>
<input type="text" id="exampleRange" value="Range datepicker starting on Monday." style="width:300px;"/>
</body>
</html>

Name Type
Documentation:

Name | Type
datepicker( options ) | Returns: jQuery
The method that you use to create a new date picker. Customize with plenty of options.
dialogDatepicker( dateText, onSelect, settings, pos ) | Returns: Datepicker
Open a datepicker in a "dialog" box.
disableFor( target ) | Returns: Datepicker
Disable an input field and its attached date picker.
enableFor( target ) | Returns: Datepicker
Enable an input field and its attached date picker.
getDateFor( control ) | Returns: Date or Date[2]
Retrieve the current date from the date picker attached to an input field.
hideDatepicker( speed ) | Returns: Datepicker
Close a previously opened date picker.
isDisabled( input ) | Returns: Boolean
Determine whether or not an input field has been disabled for the date picker.
reconfigureFor( control, settings ) | Returns: Datepicker
Change the settings for a previously attached date picker.
setDateFor( control, date, endDate ) | Returns: Datepicker
Set the current date for the date picker attached to an input field.
setDefaults( settings ) | Returns: Datepicker
Change the default settings for all date pickers
showFor( target ) | Returns: Datepicker
Call up a previously attached date picker.
parseDate( format, value, shortYearCutoff, dayNamesShort ) | Returns: Date
Extract a date from a string value with a specified format.
formatDate( format, date, dayNamesShort, dayNames ) | Returns: String
Format a date into a string value with a specified format.
iso8601Week( date ) | Returns: Number
Determine the week of the year for a given date: 1 to 53.
Demos:

  • Demos and examples
  • UI-themed demo

Name Type
Localization:

  • Datepicker Localization

Name Type
Theming:

  • Datepicker Theming

Name Type
ChangeLog:

  • Datepicker Updates

Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker/datepicker - jQuery JavaScript Library

  • Blog

UI/Datepicker/datepicker

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Datepicker

[edit]

datepicker( options )

  • Overview
  • Options
  • Examples
  • Discuss

The method that you use to create a new date picker. Customize with plenty of options.
Attach the date picker to an input or for an inline view attach the date picker to a div or span.
Arguments:
options Options
A set of key/value pairs that configure the date picker. All options are optional.

Options:

Name | Type
clearText | String | Default: 'Clear'
The text to display for the clear link. This attribute is one of the regionalisation attributes.
  • Code
Sets clear text to 'Erase'.

$(".selector").datepicker({ clearText: 'Erase' })

closeText | String | Default: 'Close'
The text to display for the close link. This attribute is one of the regionalisation attributes.
  • Code
Sets close text to 'X'.

$(".selector").datepicker({ closeText: 'X' })

closeAtTop | Boolean | Default: true
Position the Clear/Close links at the top (true) or bottom (false).
  • Code
Place the Close/Clear links at the bottom.

$(".selector").datepicker({ closeAtTop: false })

prevText | String | Default: '<Prev'
The text to display for the previous month link. This attribute is one of the regionalisation attributes.
  • Code
Sets previous month link to 'Earlier'.

$(".selector").datepicker({ prevText: 'Earlier' })

nextText | String | Default: 'Next>'
The text to display for the next month link. This attribute is one of the regionalisation attributes.
  • Code
Sets next month link to 'Later'.

$(".selector").datepicker({ nextText: 'Later' })

hideIfNoPrevNext | Boolean | Default: false
Normally the previous and next links are disabled when not applicable (see minDate/maxDate). You can hide them altogether by setting this attribute to true.
  • Code
Remove previous/next links instead of disabling them.

$(".selector").datepicker({ hideIfNoPrevNext: true })

currentText | String | Default: 'Today'
The text to display for the current day link. This attribute is one of the regionalisation attributes.
  • Code
Sets current day link to 'Now'.

$(".selector").datepicker({ currentText: 'Now' })

monthNames | String[] | Default: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
The list of full month names, as used in the month header on each datepicker and as requested via the dateFormat setting. This attribute is one of the regionalisation attributes.
  • Code
Sets month drop-down names to French.

$(".selector").datepicker({ monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] })

monthNamesShort | String[] | Default: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
The list of abbreviated month names, for use as requested via the dateFormat setting. This attribute is one of the regionalisation attributes.
Since v3.1.
  • Code
Sets short month names to French.

$(".selector").datepicker({ monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun','Jul','Aoû','Sep','Oct','Nov','Déc'] })

changeMonth | Boolean | Default: true
Allows you to change the month by selecting from a drop-down list. You can disable this feature by setting the attribute to false.
  • Code
Disable the month selection feature.

$(".selector").datepicker({ changeMonth: false })

yearRange | String | Default: '-10:+10'
Control the range of years displayed in the year drop-down: either relative to current year (-nn:+nn) or absolute (nnnn:nnnn).
  • Code
Show the years from 2000 to 2010.

$(".selector").datepicker({ yearRange: '2000:2010' })

changeYear | Boolean | Default: true
Allows you to change the year by selecting from a drop-down list. You can disable this feature by setting the attribute to false.
  • Code
Disable the year selection feature.

$(".selector").datepicker({ changeYear: false })

weekHeader | String | Default: 'Wk'
The column header for the week of the year (see showWeeks). This attribute is one of the regionalisation attributes.
Since v3.1.
  • Code
Sets the week of the year column header to French.

$(".selector").datepicker({ weekHeader: 'Sm', showWeeks: true })

dayNames | String[] | Default: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
The list of long day names, starting from Sunday, for use as requested via the dateFormat setting. They also appear as popup hints when hovering over the corresponding column headings. This attribute is one of the regionalisation attributes.
In v3.0, this setting held the column headings.
  • Code
Sets long day names to French.

$(".selector").datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] })

dayNamesShort | String[] | Default: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
The list of abbreviated day names, starting from Sunday, for use as requested via the dateFormat setting. This attribute is one of the regionalisation attributes.
Since v3.1.
  • Code
Sets short day names to French

$(".selector").datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] })

dayNamesMin | String[] | Default: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
The list of minimised day names, starting from Sunday, for use as column headers within the datepicker. This attribute is one of the regionalisation attributes.
Since v3.1.
  • Code
Sets day column headings to French.

$(".selector").datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] })

firstDay | Number | Default: 0
Set the first day of the week: Sunday is 0, Monday is 1, ... This attribute is one of the regionalisation attributes.
  • Code
Start each week on Monday.

$(".selector").datepicker({ firstDay: 1 })

changeFirstDay | Boolean | Default: true
Allows you to click on the day names to have the week start on that day. You can disable this feature by setting the attribute to false.
  • Code
Disable the change first day feature.

$(".selector").datepicker({ changeFirstDay: false })

showOtherMonths | Boolean | Default: false
Display dates in other months (non-selectable) at the start or end of the current month.
  • Code
Show the other month's days on the datepicker.

$(".selector").datepicker({ showOtherMonths: true })

showWeeks | Boolean | Default: false
Display the week of the year alongside each month. The column header is specified by the weekHeader setting. The week number is calculated based on the first date shown in each row in the datepicker, and so may not apply to all days in that row. The calculateWeek setting allows you to change the week of the year calculation from the default ISO 8601 implementation.
Since v3.1.
  • Code
Show the week of the year on the datepicker.

$(".selector").datepicker({ showWeeks: true, firstDay: 1, changeFirstDay: false })

calculateWeek | Function | Default: $.datepicker.iso8601Week
Perform the week of the year calculation. This function accepts a Date as a parameter and returns the number of the corresponding week of the year. The default implementation 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.
Since v3.1.
  • Code
Show the week of the year on the datepicker, but with a custom calculation.

$(".selector").datepicker({ showWeeks: true, calculateWeek: MyWeeks })

numberOfMonths | Number, Number[2] | Default: 1
Set how many months to show at once. The value can be a straight integer, or can be a two-element array to define the number of rows and columns to display.
  • Code
Show two months at a time.

$("selector").datepicker({ numberOfMonths: 2 })

stepMonths | Number | Default: 1
Set how many months to move when clicking the Previous/Next links.
  • Code
Show six months (two rows and three columns) and step back or forward three months at a time.

$("selector").datepicker({ numberOfMonths: [2, 3], stepMonths: 3 })

rangeSelect | Boolean | Default: false
Set to true to allow the selection of a date range on the one date picker, or false to just select a single date. For a date range, the first click sets the start date and a second click sets the end date.
  • Code
Allow selection of a date range.

$("selector").datepicker({ rangeSelect: true })

rangeSeparator | String | Default: ' - '
Set the text to use to separate the two dates in a date range via the onSelect function.
  • Code
Change the date range separator.

$("selector").datepicker({ rangeSelect: true, rangeSeparator: ' to ' })

defaultDate | Date(yyyy, mm - 1, dd), Number | Default: null
Set the date to display on first opening if the field is blank. Specify either an actual date via a Date object, or relative to today with a number, or null for today.
  • Code
Set the initial date displayed to one week in the future.

$(".selector").datepicker({ defaultDate: +7 })

minDate | Date(yyyy, mm - 1, dd) | Default: null
Set a minimum selectable date, or null for no limit.
  • Code
Set the minimum selectable date to January 1st, 2007.

$(".selector").datepicker({ minDate: new Date(2007, 1 - 1, 1) })

maxDate | Date(yyyy, mm - 1, dd) | Default: null
Set a maximum selectable date, or null for no limit.
  • Code
Set the maximum selectable date to December 31st, 2007.

$(".selector").datepicker({ maxDate: new Date(2007, 12 - 1, 31) })

dateFormat | String | Default: 'mm/dd/yy'
The format for parsed and displayed dates. This attribute is one of the regionalisation attributes.
In v3.0, the first three characters are 'D' (day), 'M' (month), and 'Y' (year) in the required order, and the fourth is the separator, e.g. ISO would be 'YMD-', default was 'MDY/'.
From v3.1, the format is combinations of the following:

  • d - day of month (no leading zero)
  • dd - day of month (two digits)
  • m - month (no leading zero)
  • mm - month (two digits)
  • y - year (two digits)
  • yy - year (four digits)
  • D - name of day (short)
  • DD - name of day (long)
  • M - name of month (short)
  • MM - name of month (long)
  • '...' - literal text
  • '' - single quote
  • anything else - literal text
  • Code
Format dates for ISO standard.

$(".selector").datepicker({ dateFormat: 'yy-mm-dd' })

useShortYear | Boolean | Default: false
Set to true to display the year as two digits only, or false to show all four digits.
Removed in v3.1. Use expanded dateFormat instead.
  • Code
Set the input field to show only a two-digit year.

$(".selector").datepicker({ useShortYear: true })

shortYearCutoff | String, Number | Default: '+10'
Set the cutoff year for determining the century for a date (used in conjunction with dateFormat 'y'). If a numeric value (0-99) is provided then this value is used directly. If a string value is provided then it is converted to a number and added to the current year. Once the cutoff year is calculated, any dates entered with a year value less than or equal to it are considered to be in the current century, while those greater than it are deemed to be in the previous century.
  • Code
Set years greater than 50 to be in the previous century.

$(".selector").datepicker({ dateFormat: 'mm/dd/y', shortYearCutoff: 50 })

appendText | String | Default: ''
The text to display after each date field, e.g. to show the required format.
  • Code
Show the required format after each field.

$(".selector").datepicker({ appendText: '(yyyy-mm-dd)' })

speed | String, Number | Default: 'medium'
Control the speed at which the datepicker appears, it may be a time in milliseconds, a descriptive name ('slow', 'medium', 'fast'), or '' for immediately.
  • Code
Slows down the opening animation.

$(".selector").datepicker({ speed: 'slow' })

showOn | String | Default: 'focus'
Have the datepicker appear automatically when the field receives focus ('focus'), appear only when a button is clicked ('button'), or appear when either event takes place ('both').
  • Code
Set the datepicker to open with both the click of a button and when the input field is in focus.

$(".selector").datepicker({ showOn: 'both' })

buttonText | String | Default: '...'
The text to display on the trigger button. Use in conjunction with showOn equal to 'button' or 'both'.
  • Code
Set the button text to 'Choose'.

$(".selector").datepicker({ buttonText: 'Choose' })

buttonImage | String | Default: ''
The URL for the popup button image. If set, button text becomes the alt value and is not directly displayed.
  • Code
Set the button image path to '/images/datepicker.gif'.

$(".selector").datepicker({ buttonImage: '/images/datepicker.gif' })

buttonImageOnly | Boolean | Default: false
Set to true to place an image after the field to use as the trigger without it appearing on a button.
  • Code
Show an image trigger without any button.

$(".selector").datepicker({ buttonImageOnly: true })

beforeShow | Function | Default: null
Can be a function that takes an input field and current datepicker instance and returns a settings (anonymous) object to update the date picker with. It is called just before the datepicker is displayed.
  • Code

$(".selector").datepicker({ beforeShow: customRange})

function customRange(input) {
  return {minDate: (input.id == 'dTo' ? getDate($('#dFrom').val()) : null),
      maxDate: (input.id == 'dFrom' ? getDate($('#dTo').val()) : null)};
}

beforeShowDay | Function | Default: null
The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable and [1] equal to a CSS class name(s) or '' for the default presentation. It is called for each day in the datepicker before is it displayed.
  • Code
Display some national holidays in the datepicker.

$(".selector").datepicker({ beforeShowDay: nationalDays})

natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'], [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']];

function nationalDays(date) {
    for (i = 0; i < natDays.length; i++) {
      if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
        return [false, natDays[i][2] + '_day'];
      }
    }
  return [true, ''];
}

  • Code
One built in function exists, called noWeekends, that prevents the selection of weekend days.

$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })

onSelect | Function | Default: null
Allows you to define your own event when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters.
  • Code
Alert the text returned from the datepicker selection.

$("div.selector").datepicker({
  onSelect: function(dateText) {
    alert(dateText);
  }
})

Examples:
  • Demo
  • View Source
A simple jQuery UI Datepicker.

$('#example').datepicker();
$('#exampleRange').datepicker({rangeSelect: true, firstDay: 1 });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $('#example').datepicker();
$('#exampleRange').datepicker({rangeSelect: true, firstDay: 1 });
  });
  </script>

</head>
<body>
  <link rel="stylesheet" href="../../view/trunk/themes/flora/flora.datepicker.css" type="text/css" media="screen" title="Flora (Default)">
<script  src="../../view/trunk/ui/current/datepicker/core/ui.datepicker.js"></script>
<input type="text" id="example" value="Click inside me to see a datepicker" style="width:300px;"/>
<input type="text" id="exampleRange" value="A range datepicker starting on Monday" style="width:300px;"/>
</body>
</html>

  • Code
Add a datepicker that appears on focus or a click on an icon.

$('.invokeBoth').datepicker({ showOn: 'both', buttonImageOnly: true, buttonImage: 'datepicker.gif', buttonText: 'datepicker' });

  • Code
Add a datepicker that doesn't allow selection of days on weekends.

$('#noWeekends').datepicker({ beforeShowDay: $.datepicker.noWeekends });

  • Code
Add a datepicker that defaults to 7 days in the future.

$('#openDatePlus7').datepicker({ defaultDate: +7 });

  • Code
Add a datepicker in French. Requires loading of the French localization package.

$('#frenchdatepicker').datepicker( $.datepicker.regional['fr'] );

Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker/datepicker"

Categories: UI/Datepicker/datepicker | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker/dialogDatepicker - jQuery JavaScript Library

  • Blog

UI/Datepicker/dialogDatepicker

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Datepicker

[edit]

dialogDatepicker( dateText, onSelect, settings, pos )

  • Overview
  • Options
  • Examples
  • Discuss

Open a datepicker in a "dialog" box.
Arguments:

dateText | String
The initial date for the date picker.
onSelect | Function
A callback function when a date is selected. The function receives the date text and date picker instance as parameters.
settings | Options
The new settings for the date picker.
pos | Number[2] or MouseEvent
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.

Examples:
  • Code
Open a datepicker in a "dialog" box.

$.datepicker.dialogDatepicker($('#invokeDialog').val(), setDateFromDialog, {prompt: 'Choose a date', speed: ''});

Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker/dialogDatepicker"

Categories: UI/Datepicker/dialogDatepicker | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker/disableFor - jQuery JavaScript Library

  • Blog

UI/Datepicker/disableFor

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Datepicker

[edit]

disableFor( target )

  • Overview
  • Options
  • Examples
  • Discuss

Disable an input field and its attached date picker.
Arguments:
target Element,Selector,jQuery collection
The input field to which the date picker is attached, or a selector for the input fields, or an existing jQuery collection.

Examples:
  • Code
Disable the date picker for an input field.

$.datepicker.disableFor('#invokeFocus');

Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker/disableFor"

Categories: UI/Datepicker/disableFor | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker/enableFor - jQuery JavaScript Library

  • Blog

UI/Datepicker/enableFor

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Datepicker

[edit]

enableFor( target )

  • Overview
  • Options
  • Examples
  • Discuss

Enable an input field and its attached date picker.
Arguments:
target Element,Selector,jQuery collection
The input field to which the date picker is attached, or a selector for the input fields, or an existing jQuery collection.

Examples:
  • Code
Enable the date picker for an input field.

$.datepicker.enableFor('#invokeFocus');

Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker/enableFor"

Categories: UI/Datepicker/enableFor | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker/getDateFor - jQuery JavaScript Library

  • Blog

UI/Datepicker/getDateFor

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Datepicker

[edit]

getDateFor( control )

  • Overview
  • Options
  • Examples
  • Discuss

Retrieve the current date from the date picker attached to an input field.
If the date picker has rangeSelect set to true, then a two-element array of dates is returned denoting the start and end of the range.
Arguments:
control Element,Selector,jQuery collection
The input field, division or span to which the date picker is attached, or a selector for the input field, or an existing jQuery collection. In the latter two cases only the first element in the collection is used.

Examples:{{{1}}}
Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker/getDateFor"

Categories: UI/Datepicker/getDateFor | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker/hideDatepicker - jQuery JavaScript Library

  • Blog

UI/Datepicker/hideDatepicker

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Datepicker

[edit]

hideDatepicker( speed )

  • Overview
  • Options
  • Examples
  • Discuss

Close a previously opened date picker.
Arguments:
speed String
The speed at which to close the date picker (optional).

Examples:
  • Code
Close the opened date picker.

$.datepicker.hideDatepicker();

Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker/hideDatepicker"

Categories: UI/Datepicker/hideDatepicker | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker/isDisabled - jQuery JavaScript Library

  • Blog

UI/Datepicker/isDisabled

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Datepicker

[edit]

isDisabled( input )

  • Overview
  • Options
  • Examples
  • Discuss

Determine whether or not an input field has been disabled for the date picker.
Arguments:
input Element,Selector,jQuery collection
The input field to which the date picker is attached, or a selector for the input field, or an existing jQuery collection. In the latter two cases only the first element in the collection is used.

Examples:
  • Code
Retrieve the date for an input field.

if ($.datepicker.isDisabled('#invokeFocus')) ...

Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker/isDisabled"

Categories: UI/Datepicker/isDisabled | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker/reconfigureFor - jQuery JavaScript Library

  • Blog

UI/Datepicker/reconfigureFor

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Datepicker

[edit]

reconfigureFor( control, settings )

  • Overview
  • Options
  • Examples
  • Discuss

Change the settings for a previously attached date picker.
Arguments:
control | Element,Selector,jQuery collection
The input field, division or span to which the date picker is attached, or a jQuery selector for these fields, or an existing jQuery collection.
settings | Options
The new settings for these date pickers.

Examples:
  • Code
Reconfigure the date picker for an input field - changing its opening speed.

$.datepicker.reconfigureFor('#reconfigureCal', {speed: select.options[select.selectedIndex].value});

Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker/reconfigureFor"

Categories: UI/Datepicker/reconfigureFor | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker/setDateFor - jQuery JavaScript Library

  • Blog

UI/Datepicker/setDateFor

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Datepicker

[edit]

setDateFor( control, date, endDate )

  • Overview
  • Options
  • Examples
  • Discuss

Set the current date for the date picker attached to an input field.
Arguments:

control | Element,Selector,jQuery collection
The input field, division or span to which the date picker is attached, or a selector for the input field, or an existing jQuery collection. In the latter two cases only the first element in the collection is used.
date | Date
The new date value (starting date for a date range).
endDate | Date
The new end date value for a date range (optional).

Examples:
  • Code
Set the date for an input field.

$.datepicker.setDateFor('#invokeFocus', new Date(2007, 1 - 1, 26));

  • Code
Set the date for a date range input field.

$.datepicker.setDateFor('#dateRange', new Date(2007, 1 - 1, 26), new Date(2007, 1 - 1, 30));

Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker/setDateFor"

Categories: UI/Datepicker/setDateFor | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker/setDefaults - jQuery JavaScript Library

  • Blog

UI/Datepicker/setDefaults

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Datepicker

[edit]

setDefaults( settings )

  • Overview
  • Options
  • Examples
  • Discuss

Change the default settings for all date pickers
Arguments:
settings Options
The new settings for all date pickers. See the datepicker options.

Examples:
  • Code
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'});

  • Code
Set all date pickers to have French text.

$.datepicker.setDefaults($.datepicker.regional['fr']);

Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker/setDefaults"

Categories: UI/Datepicker/setDefaults | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker/showFor - jQuery JavaScript Library

  • Blog

UI/Datepicker/showFor

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Datepicker

[edit]

showFor( target )

  • Overview
  • Options
  • Examples
  • Discuss

Call up a previously attached date picker.
Arguments:
target Element
The input field to which the date picker is attached, or a selector for the input field, or an existing jQuery collection. In the latter two cases only the first element in the collection is used.

Examples:
  • Code
Bring up the date picker for an input field.

$.datepicker.showFor('#invokeFocus');

Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker/showFor"

Categories: UI/Datepicker/showFor | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker/parseDate - jQuery JavaScript Library

  • Blog

UI/Datepicker/parseDate

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Datepicker

[edit]

parseDate( format, value, shortYearCutoff, dayNamesShort )

  • Overview
  • Options
  • Examples
  • Discuss

Extract a date from a string value with a specified format.
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)
  • '...' - literal text
  • '' - single quote
  • anything else - literal text

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'
Since v3.1.
Arguments:

format | String
The format to use in extracting the date.
value | String
The date value to be examined.
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.
dayNamesShort | String[7]
The short names for the days of the week, starting at Sunday (optional). Defaults to the datepicker default which is usually standard English.

Examples:
  • Code
Extract a date in ISO format.

$.datepicker.parseDate('yy-mm-dd', '2007-01-26');

  • Code
Extract a date in expanded French format.

$.datepicker.parseDate('DD, MM d, yy', 'Samedi, Juillet 14, 2007', 20, $.datepicker.regional['fr'].dayNamesShort, $.datepicker.regional['fr'].dayNames, $.datepicker.regional['fr'].monthNamesShort, $.datepicker.regional['fr'].monthNames);

Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker/parseDate"

Categories: UI/Datepicker/parseDate | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker/formatDate - jQuery JavaScript Library

  • Blog

UI/Datepicker/formatDate

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Datepicker

[edit]

formatDate( format, date, dayNamesShort, dayNames )

  • Overview
  • Options
  • Examples
  • Discuss

Format a date into a string value with a specified format.
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)
  • '...' - literal text
  • '' - single quote
  • anything else - literal text
Since v3.1.
Arguments:

format | String
The format to use in presenting the date.
date | Date
The date value to be displayed.
dayNamesShort | String[7]
The short names for the days of the week, starting at Sunday (optional). Defaults to the datepicker default which is usually standard English.
dayNames | String[7]
The long names for the days of the week, starting at Sunday (optional). Defaults to the datepicker default which is usually standard English.

Examples:
  • Code
Display the date in ISO format. Produces '2007-01-26'.

$.datepicker.formatDate('yy-mm-dd', new Date(2007, 1 - 1, 26));

  • Code
Display the date in expanded French format. Produces 'Samedi, Juillet 14, 2007'.

$.datepicker.formatDate('DD, MM d, yy', new Date(2007, 7 - 1, 14), $.datepicker.regional['fr'].dayNamesShort, $.datepicker.regional['fr'].dayNames, $.datepicker.regional['fr'].monthNamesShort, $.datepicker.regional['fr'].monthNames);

Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker/formatDate"

Categories: UI/Datepicker/formatDate | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Datepicker/iso8601Week - jQuery JavaScript Library

  • Blog

UI/Datepicker/iso8601Week

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Datepicker

[edit]

iso8601Week( date )

  • Overview
  • Options
  • Examples
  • Discuss

Determine the week of the year for a given date: 1 to 53.
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.
Since v3.1.
Arguments:
date Date
The date to find the week for.

Examples:
  • Code
Find the week of the year for a date.

$.datepicker.iso8601Week(new Date(2007, 1 - 1, 26));

Name Type

Retrieved from "http://docs.jquery.com/UI/Datepicker/iso8601Week"

Categories: UI/Datepicker/iso8601Week | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Dialog - jQuery JavaScript Library

  • Blog

UI/Dialog

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery UI Docs

Open your content in a resizable, draggable, box.

Depends on: jquery.dimensions.js, ui.mouse.js, ui.draggable.js, ui.resizable.js

Name Type
Example:
  • Demo
  • View Source
A simple jQuery UI Modal Dialog.

$("#example").dialog();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#example").dialog();
  });
  </script>

</head>
<body>
  <link rel="stylesheet" href="../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script type="text/javascript" src="../view/trunk/ui/current/ui.dialog.js"></script>
<script type="text/javascript" src="../view/trunk/ui/current/ui.resizable.js"></script>
<script type="text/javascript" src="../view/trunk/ui/current/ui.mouse.js"></script>
<script type="text/javascript" src="../view/trunk/ui/current/ui.draggable.js"></script>

<div id="example" class="flora" title="This is my title">I'm in a dialog!</div>
</body>
</html>

Name Type
Documentation:
Name | Type
dialog( options ) | Returns: jQuery
Make the selected elements Dialog boxes.
dialogOpen( ) | Returns: jQuery
Opens the specified dialog boxes.
dialogClose( ) | Returns: jQuery
Closes the specified dialog boxes.
Demos:

  • Demos and examples

Name Type

Retrieved from "http://docs.jquery.com/UI/Dialog"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Dialog/dialog - jQuery JavaScript Library

  • Blog

UI/Dialog/dialog

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Dialog

[edit]

dialog( options )

  • Overview
  • Options
  • Examples
  • Discuss

Make the selected elements Dialog boxes.
Arguments:
options Options
A set of key/value pairs that configure the dialog. All options are optional.

Options:

Name | Type
buttons | Object
Specifies which buttons should be displayed on the dialog. The property key is the text of the button. The value is the callback function for when the button is clicked.
height | Number
The height of the dialog, in pixels. Default value: 200.
position | String
Specifies where the dialog should be displayed. Possible values: 'center'. Default value: 'center'.
title | String
Specifies the title of the dialog. The title can also be specified by the title attribute on the dialog source element.
width | Number
The width of the dialog, in pixels. Default value: 300.

Examples:
  • Demo
  • View Source
A simple jQuery UI Modal Dialog.

$("#example").dialog();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#example").dialog();
  });
  </script>

</head>
<body>
  <link rel="stylesheet" href="../../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">

<script type="text/javascript" src="../../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script type="text/javascript" src="../../view/trunk/ui/current/ui.dialog.js"></script>
<script type="text/javascript" src="../../view/trunk/ui/current/ui.resizable.js"></script>
<script type="text/javascript" src="../../view/trunk/ui/current/ui.mouse.js"></script>
<script type="text/javascript" src="../../view/trunk/ui/current/ui.draggable.js"></script>
<div id="example" class="flora" title="This is my title">I'm in a dialog!</div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/UI/Dialog/dialog"

Categories: UI/Dialog/dialog | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Dialog/dialogOpen - jQuery JavaScript Library

  • Blog

UI/Dialog/dialogOpen

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Dialog

[edit]

dialogOpen( )

  • Overview
  • Options
  • Examples
  • Discuss

Opens the specified dialog boxes.

Retrieved from "http://docs.jquery.com/UI/Dialog/dialogOpen"

Categories: UI/Dialog/dialogOpen | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Dialog/dialogClose - jQuery JavaScript Library

  • Blog

UI/Dialog/dialogClose

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Dialog

[edit]

dialogClose( )

  • Overview
  • Options
  • Examples
  • Discuss

Closes the specified dialog boxes.

Retrieved from "http://docs.jquery.com/UI/Dialog/dialogClose"

Categories: UI/Dialog/dialogClose | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Slider - jQuery JavaScript Library

  • Blog

UI/Slider

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery UI Docs

A draggable number picker.

Depends on: jquery.dimensions.js, ui.mouse.js

Name Type
Example:
  • Demo
  • View Source
A simple jQuery UI Slider.

$("#example").slider();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#example").slider();
  });
  </script>

</head>
<body>
  <link rel="stylesheet" href="../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script type="text/javascript" src="../view/trunk/plugins/ui/ui.mouse.js"></script>
<script type="text/javascript" src="../view/trunk/plugins/ui/ui.slider.js"></script>

<div id='example' class='ui-slider-1' style="margin:10px;">
<div class='ui-slider-handle'></div>
</div>
</body>
</html>

Name Type
Documentation:

Name | Type
slider( options ) |
Makes a slider from the nodeset supplied by the query.
Demos:

  • A UI-themed demo

Name Type

Retrieved from "http://docs.jquery.com/UI/Slider"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Slider/slider - jQuery JavaScript Library

  • Blog

UI/Slider/slider

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Slider

[edit]

slider( options )

  • Overview
  • Options
  • Examples
  • Discuss

Makes a slider from the nodeset supplied by the query.
With this plugin, you can generate sliders with a wide range of options, including multiple handles, callbacks and more.
Arguments:
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.

Options:

Name | Type
handle | String
The jquery selector to use for the handle of the slider (defaults to ".ui-slider-handle").
minValue | Int
The minimum value of the slider. Useful for tracking values via callback, and to set steps.
maxValue | Int
The maximum value of the slider. Useful for tracking values via callback, and to set steps.
startValue | Int
The value the handle will have first.
stepping | Int
If defined, the new value has to be dividable through this number, so the slider jumps from step to step.
steps | Int
Alternative to stepping, this defines how many steps a slider will have, instead of how many values to jump, as in stepping.
axis | String
Usually you don't have to set that option, because the slider finds out automatically if you want a horizontal or a vertical slider. In case it's not correctly detected, insert 'horizontal'/'vertical'.
stop | Function
Function that gets called when the user stops sliding. Takes arguments e and ui, for event and user-interface respectively. Use ui.value (single-handled sliders) or ui.values (multi-handled sliders) to obtain the value of the slider.
start | Function
Function that gets called when the user starts sliding. Takes arguments e and ui, for event and user-interface respectively. Use ui.value (single-handled sliders) or ui.values (multi-handled sliders) to obtain the value of the slider.
slide | Function
Function that gets called on every mouse move during slide. Takes arguments e and ui, for event and user-interface respectively. Use ui.value (single-handled sliders) or ui.values (multi-handled sliders) to obtain the value of the slider. For example:

$(window).bind("load",function(){
    $('#sliderId').slider({
              steps: 10,
          minValue: 0,
          maxValue: 10,
          slide: function(e,ui) {
             $("#slider-min").text( ui.values[0] );
             $("#slider-max").text( ui.values[1] );
          }
           });

This example creates a double slider from 0-10 with "10" steps (actually eleven positions) and prints the values in spans/divs with the id tags slider-min and slider-max.For a single slider, all that is needed is ui.value.

change | Function
Function that gets called on slide stop, but only if the slider position has changed. Takes arguments e and ui, for event and user-interface respectively. Use ui.value (single-handled sliders) or ui.values (multi-handled sliders) to obtain the value of the slider.
Examples:
  • Demo
  • View Source
A simple jQuery UI Accordion.

$("#example").slider();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#example").slider();
  });
  </script>

</head>
<body>
  <link rel="stylesheet" href="../../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="../../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script type="text/javascript" src="../../view/trunk/plugins/ui/ui.mouse.js"></script>
<script type="text/javascript" src="../../view/trunk/plugins/ui/ui.slider.js"></script>

<div id='example' class='ui-slider-1' style="margin:10px;">
<div class='ui-slider-handle'></div>
</div>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/UI/Slider/slider"

Categories: UI/Slider/slider | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Plugins/Tablesorter - jQuery JavaScript Library

  • Blog

Plugins/Tablesorter

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery UI Docs

Add sorting and pagination to your tables.

Name Type
Example:
  • Demo
  • View Source
A simple Table Sorter.

$("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
  });
  </script>

</head>
<body>
  <link rel="stylesheet" href="../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script  src="../view/trunk/plugins/tablesorter/2.0/jquery.tablesorter.js"></script>

    <table id="example" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>

                <th>Age</th>
                <th>Total</th>
                <th>Discount</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td>Peter</td>
                <td>Parker</td>
                <td>28</td>
                <td>$9.99</td>
                <td>20%</td>

                <td>Jul 6, 2006 8:14 AM</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Hood</td>
                <td>33</td>
                <td>$19.99</td>

                <td>25%</td>
                <td>Dec 10, 2002 5:14 AM</td>
            </tr>
            <tr>
                <td>Clark</td>
                <td>Kent</td>
                <td>18</td>

                <td>$15.89</td>
                <td>44%</td>
                <td>Jan 12, 2003 11:14 AM</td>
            </tr>
            <tr>
                <td>Bruce</td>
                <td>Almighty</td>

                <td>45</td>
                <td>$153.19</td>
                <td>44%</td>

                <td>Jan 18, 2001 9:12 AM</td>
            </tr>
            <tr>
                <td>Bruce</td>

                <td>Evans</td>
                <td>22</td>
                <td>$13.19</td>
                <td>11%</td>
                <td>Jan 18, 2007 9:12 AM</td>
            </tr>

        </tbody>
    </table>
</body>
</html>

Name Type
Documentation:

Name | Type
tablesorter( options ) | Returns: jQuery
Create a sortable table with multi-column sorting capabilities.
Demos:

  • Tablesorter.com - Demos and examples

Name Type

Retrieved from "http://docs.jquery.com/Plugins/Tablesorter"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Plugins/Tablesorter/tablesorter - jQuery JavaScript Library

  • Blog

Plugins/Tablesorter/tablesorter

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Plugins/Tablesorter

[edit]

tablesorter( options )

  • Overview
  • Options
  • Examples
  • Discuss

Create a sortable table with multi-column sorting capabilities.
Arguments:
options Options
A set of key/value pairs that configure tablesorter. All options are optional.

Options:

Name | Type
cssHeader | String
A string of the class name to be appended to sortable tr elements in the thead of the table.
  • Code
Sets cssHeader to className "sort-header".

$(".selector").tablesorter({ cssHeader: "sort-header" })

cssAsc | String
A string of the class name to be appended to sortable tr elements in the thead on a ascending sort.
  • Code
Sets cssAsc to className "sort-header-asc".

$(".selector").tablesorter({ cssAsc: "sort-header-asc" })

cssDesc | String
A string of the class name to be appended to sortable tr elements in the thead on a descending sort.
  • Code
Sets cssDesc to className "sort-header-desc".

$(".selector").tablesorter({ cssDesc: "sort-header-desc" })

sortMultisortKey | String
A string of the multi-column sort key.
  • Code
Sets sortMultisortKey to key event control.

$(".selector").tablesorter({ sortMultisortKey: "ctrlKey" })

textExtraction | String
A string of the text-extraction method to use. For complex HTML structures inside td cell set this option to "complex", on large tables the complex option can be slow.
  • Code
Sets textExtraction to key "complex".

$(".selector").tablesorter({ textExtraction: "complex" })

headers | Object
An object of instructions for per-column controls.
  • Code
Disable sorting on the first two columns of a table:.

$(".selector").tablesorter({ headers: { 0: { sorter: false}, 1: {sorter: false} })

sortList | Array
An array of instructions for per-column sorting and direction in the format: [columnIndex, sortDirection] where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending.
  • Code
Sorting the table by column 1 and column 2 in ascending order.

$(".selector").tablesorter({ sortList: [[0,0],[1,0]] })

sortForce | Array
Use to add an additional forced sort that will be appended to the dynamic selections by the user. For example, can be used to sort people alphabetically after some other user-selected sort that results in rows with the same value like dates or money due. It can help prevent data from appearing as though it has a random secondary sort.
  • Code
Force sorting by column 1 and column 2 in ascending order.

$(".selector").tablesorter({ sortForce: [[0,0],[1,0]] })

widthFixed | Boolean
Indicates if tablesorter should apply fixed widths to the table columns. This is useful for the Pager companion. Requires the jQuery dimension plugin to work.
  • Code
Sets widthFixed to true.

$(".selector").tablesorter({ widthFixed: true })

cancelSelection | Boolean
Indicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.
  • Code
Sets cancelSelection to false.

$(".selector").tablesorter({ cancelSelection: false })

debug | Boolean
Enables debugging mode, useful for development.
  • Code
Enable debugging mode.

$(".selector").tablesorter({ debug: true })

Examples:
  • Demo
  • View Source
A simple Table Sorter.

$("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
  });
  </script>

</head>
<body>
  <link rel="stylesheet" href="../../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script  src="../../view/trunk/plugins/tablesorter/2.0/jquery.tablesorter.js"></script>

    <table id="example" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>

                <th>Age</th>
                <th>Total</th>
                <th>Discount</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td>Peter</td>
                <td>Parker</td>
                <td>28</td>
                <td>$9.99</td>
                <td>20%</td>

                <td>Jul 6, 2006 8:14 AM</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Hood</td>
                <td>33</td>
                <td>$19.99</td>

                <td>25%</td>
                <td>Dec 10, 2002 5:14 AM</td>
            </tr>
            <tr>
                <td>Clark</td>
                <td>Kent</td>
                <td>18</td>

                <td>$15.89</td>
                <td>44%</td>
                <td>Jan 12, 2003 11:14 AM</td>
            </tr>
            <tr>
                <td>Bruce</td>
                <td>Almighty</td>

                <td>45</td>
                <td>$153.19</td>
                <td>44%</td>

                <td>Jan 18, 2001 9:12 AM</td>
            </tr>
            <tr>
                <td>Bruce</td>

                <td>Evans</td>
                <td>22</td>
                <td>$13.19</td>
                <td>11%</td>
                <td>Jan 18, 2007 9:12 AM</td>
            </tr>

        </tbody>
    </table>
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/Plugins/Tablesorter/tablesorter"

Categories: Plugins/Tablesorter/tablesorter | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Tabs - jQuery JavaScript Library

  • Blog

UI/Tabs

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery UI Docs

Organize your content into navigable tabs.

Name Type
Example:
  • Demo
  • View Source
A simple jQuery UI Tabbed pane.

$("#example > ul").tabs();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  <link rel="stylesheet" href="../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
  <script type="text/javascript" src="../view/trunk/ui/current/ui.tabs.js"></script>
  <script>
  $(document).ready(function(){
    $("#example > ul").tabs();
  });
  </script>

</head>
<body>

        <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 active by default:</p>
                <pre><code>$('#example > ul').tabs();</code></pre>

            </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>
</body>
</html>

Name Type
Documentation:

Name | Type
tabs( initial, options ) | Returns: jQuery
The method that you use to create a new tabs interface.
tabsAdd( url, title, position ) | Returns: jQuery
The method that you use to add a new tab to a tabs interface.
tabsRemove( position ) | Returns: jQuery
The method that you use to remove a tab from a tabs interface.
tabsEnable( position ) | Returns: jQuery
The method that you use to enable a tab in a tabs interface.
tabsDisable( position ) | Returns: jQuery
The method that you use to disable a tab in a tabs interface.
tabsClick( position ) | Returns: jQuery
The method that you use to simulate a click on tab in a tabs interface.
tabsLoad( position, url ) | Returns: jQuery
The method that you use to reload a remote (Ajax) tab in a tabs interface.
tabsHref( position, url ) | Returns: jQuery
The method that you use to set a new URL for a remote (Ajax) tab in a tabs interface.
tabsSelected( ) | Returns: Number
Retrieve the position of the currently selected tab of the first matched tabs interface (no zero-based index).
Demos:

  • Demos and examples
  • UI-themed demos

Name Type
Theming:

  • Tabs Theming

Name Type

Retrieved from "http://docs.jquery.com/UI/Tabs"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Tabs/tabs - jQuery JavaScript Library

  • Blog

UI/Tabs/tabs

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Tabs

[edit]

tabs( [initial], [options] )

  • Overview
  • Options
  • Examples
  • Discuss

The method that you use to create a new tabs interface.
Arguments:
initial (Optional) | Number
An integer specifying the position of the tab (no zero-based index) that is selected on initialization.
options (Optional) | Options
A set of key/value pairs that configures the tabs interface. All options are optional.

Options:

Name | Type
event | String | Default: click
The type of event to be used for selecting a tab.
  • Code
Sets event to mouseover.

$('.selector').tabs({ event: 'mouseover' });

disabled | Array<Number> | Default: []
An array containing the position of the tabs (no zero-based index) that should be disabled on initialization.
  • Code
Disables second and third tab on initialization.

$('.selector').tabs({ disabled: [2, 3] });

cookie | Object
Retrieve the active tab to start with from a cookie. Requires cookie plugin. The object needs to have key/value pairs of the form the cookie plugin expects as options. Available options: { expires: 7, path: '/', domain: 'jquery.com', secure: true }
  • Code
Store active tab in a cookie that expires after 30 days.

$('.selector').tabs({ cookie: { expires: 30 } });

unselected | Boolean | Default: false
Wether or not to start with all tabs unselected.
  • Code
Sets all tabs unselected on initialization.

$('.selector').tabs({ unselected: true });

unselect | Boolean | Default: false, as the case may be unselected is enabled true
Wether or not to hide an already selected tab on click.
  • Code
Enables toggling visibility of selected tabs on click.

$('.selector').tabs({ unselect: true });

spinner | String | Default: Loading&#8230;
The HTML content of this string is shown in a tab title while remote content is loading. Pass in empty string to deactivate that behavior.
  • Code
Disables tab title changing while loading tab content.

$('.selector').tabs({ spinner: '' });

cache | Boolean | Default: false
Wether or not to cache remote tabs content, e.g. load only once or with every click. Cached content is being lazy loaded, e.g once on the first click. Note that to prevent the actual Ajax requests from being cached by the browser you need to provide an extra cache: false flag to ajaxOptions.
  • Code
Enables cache.

$('.selector').tabs({ cache: true });

ajaxOptions | Options
Additional Ajax options to consider when loading tab content (see $.ajax).
  • Code
Make synchronous requests when loading tab content.

$('.selector').tabs({ ajaxOptions: { async: false } });

idPrefix | String | Default: ui-tabs-
If the remote tab, its anchor element that is, has no title attribute to generate an id from, an id/fragment identifier is created from this prefix and a unique id returned by $.data(el), for example "ui-tabs-54".
fxFade | Boolean | Default: false
Wether or not to use fade in/out animations for tabs showing/hiding. Can be combined with fxSlide. Will overrule fxShow/fxHide.
  • Code
Enables fade in/out animations.

$('.selector').tabs({ fxFade: true });

fxSlide | Boolean | Default: false
Wether or not to use slide down/up animations for tabs showing/hiding. Can be combined with fxFade. Will overrule fxShow/fxHide.
  • Code
Enables slide down/up animations.

$('.selector').tabs({ fxSlide: true });

fxShow | Options
Key/value pairs of the form jQuery's animate function expects for creating a custom animation to show a tab. Unlike fxFade or fxSlide this animation is independent from optional fxHide.
fxHide | Options
Key/value pairs of the form jQuery's animate function expects for creating a custom animation to hide a tab. Unlike fxFade or fxSlide this animation is independent from optional fxShow.
fxSpeed | String,Number | Default: normal
A string representing one of the three predefined speeds ("slow", "normal", "fast") or the duration in milliseconds to run an animation.
  • Code
Enables slide down/up animations with a symmetric duration of 500ms.

$('.selector').tabs({ fxSlide: true, fxSpeed: 500 });

fxShowSpeed | String,Number | Default: fxSpeed
A string representing one of the three predefined speeds ("slow", "normal", "fast") or the duration in milliseconds to run a show animation (fxFade, fxSlide, fxShow).
fxHideSpeed | String,Number | Default: fxSpeed
A string representing one of the three predefined speeds ("slow", "normal", "fast") or the duration in milliseconds to run a hide animation (fxFade, fxSlide, fxHide).
add | Function
Tab added callback, called with two arguments: added tab, added tab container (in this order).
remove | Function
Tab removed callback, called with two arguments: removed tab, removed tab container (in this order).
enable | Function
Tab enabled callback, called with two arguments: enabled tab, enabled tab container (in this order).
disable | Function
Tab disabled callback, called with two arguments: disabled tab, disabled tab container (in this order).
click | Function
Tab clicked callback, called with three arguments: clicked tab, tab container to show, tab container to hide (in this order). If callback returns false the tab click is aborted.
  • Code
Defines click callback.

$('.selector').tabs({ click: function(clicked, show, hide) { … } });

show | Function
Tab shown callback, called with three arguments: clicked tab, tab container to show, tab container to hide (in this order).
hide | Function
Tab hidden callback, called with three arguments: clicked tab, tab container to hide, tab container to show (in this order).
load | Function
Remote tab content loaded callback, called with two arguments: clicked, e.g. loading tab, loaded tab content container (in this order).
tabTemplate | String | Default: <li><a href="#{href}"><span>#{text}</span></a></li>
HTML template from which a new tab is created and added with the tabsAdd method. The placeholders #{href} and #{text} are replaced with the url and tab title that are passed as arguments to the tabsAdd method.
panelTemplate | String | Default: <div></div>
HTML template from which a new tab panel is created in case of adding a tab with the tabsAdd method or when creating a panel for a remote tab on the fly.
Examples:
  • Demo
  • View Source
A simple jQuery UI Tabbed pane.

$("#example > ul").tabs();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#example > ul").tabs();
  });
  </script>

</head>
<body>
  <link rel="stylesheet" href="../../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="../../view/trunk/ui/current/ui.tabs.js"></script>

        <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 active by default:</p>
                <pre><code>$('#example > ul').tabs();</code></pre>

            </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>
</body>
</html>

  • Code
Builds a tabs interface with second tab selected on initialization.

$('.selector').tabs(2);

  • Code
Builds a tabs interface with some additional options.

$('.selector').tabs({ cache: true });

  • Code
Builds a tabs interface with second tab selected on initialization and some additional options.

$('.selector').tabs(2, { cache: true });

Name Type

Retrieved from "http://docs.jquery.com/UI/Tabs/tabs"

Categories: UI/Tabs/tabs | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Tabs/tabsAdd - jQuery JavaScript Library

  • Blog

UI/Tabs/tabsAdd

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Tabs

[edit]

tabsAdd( url, title, [position] )

  • Overview
  • Options
  • Examples
  • Discuss

The method that you use to add a new tab to a tabs interface.
The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element.
Arguments:

url | String
A fragment identifier (hash) or full URL (same domain) for the new tab. The identifier may refer to an already existing element, otherwise a new div is going to be created.
title | String
The title of the new tab.
position (Optional) | Number
The position where the new tab is created (no zero-based index). By default a new tab is appended as last tab.

Examples:
  • Code
Adds a new inline tab at the end.

$(".selector").tabsAdd('#new-tab', 'New Tab');

  • Code
Inserts a new inline tab at the second position.

$(".selector").tabsAdd('#new-tab', 'New Tab', 2);

  • Code
Adds a new remote tab at the end.

$(".selector").tabsAdd('/path/to/foo.php', 'New Tab');

Name Type

Retrieved from "http://docs.jquery.com/UI/Tabs/tabsAdd"

Categories: UI/Tabs/tabsAdd | API | Core/$

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Tabs/tabsRemove - jQuery JavaScript Library

  • Blog

UI/Tabs/tabsRemove

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Tabs

[edit]

tabsRemove( position )

  • Overview
  • Options
  • Examples
  • Discuss

The method that you use to remove a tab from a tabs interface.
The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element.
Arguments:
position Number
The position of the tab that is going to be removed (no zero-based index).

Retrieved from "http://docs.jquery.com/UI/Tabs/tabsRemove"

Categories: UI/Tabs/tabsRemove | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Tabs/tabsEnable - jQuery JavaScript Library

  • Blog

UI/Tabs/tabsEnable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Tabs

[edit]

tabsEnable( position )

  • Overview
  • Options
  • Examples
  • Discuss

The method that you use to enable a tab in a tabs interface.
The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element.
Arguments:
position Number
The position of the tab that is going to be enabled (no zero-based index).

Retrieved from "http://docs.jquery.com/UI/Tabs/tabsEnable"

Categories: UI/Tabs/tabsEnable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Tabs/tabsDisable - jQuery JavaScript Library

  • Blog

UI/Tabs/tabsDisable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Tabs

[edit]

tabsDisable( position )

  • Overview
  • Options
  • Examples
  • Discuss

The method that you use to disable a tab in a tabs interface.
The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element.
Arguments:
position Number
The position of the tab that is going to be disabled (no zero-based index).

Retrieved from "http://docs.jquery.com/UI/Tabs/tabsDisable"

Categories: UI/Tabs/tabsDisable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Tabs/tabsClick - jQuery JavaScript Library

  • Blog

UI/Tabs/tabsClick

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Tabs

[edit]

tabsClick( position )

  • Overview
  • Options
  • Examples
  • Discuss

The method that you use to simulate a click on tab in a tabs interface.
The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element.
Arguments:
position Number
The position of the tab that is going to be clicked (no zero-based index).

Retrieved from "http://docs.jquery.com/UI/Tabs/tabsClick"

Categories: UI/Tabs/tabsClick | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Tabs/tabsLoad - jQuery JavaScript Library

  • Blog

UI/Tabs/tabsLoad

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Tabs

[edit]

tabsLoad( position, [url] )

  • Overview
  • Options
  • Examples
  • Discuss

The method that you use to reload a remote (Ajax) tab in a tabs interface.
The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element.
Arguments:
position | Number
The position of the tab that is going to be reloaded (no zero-based index).
url (Optional) | String
A URL the content of the tab is loaded from. The given URL is also set for subsequent loads, until a new URL is specified that is.

Retrieved from "http://docs.jquery.com/UI/Tabs/tabsLoad"

Categories: UI/Tabs/tabsLoad | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Tabs/tabsHref - jQuery JavaScript Library

  • Blog

UI/Tabs/tabsHref

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Tabs

[edit]

tabsHref( position, url )

  • Overview
  • Options
  • Examples
  • Discuss

The method that you use to set a new URL for a remote (Ajax) tab in a tabs interface.
The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element.
Arguments:
position | Number
The position of the tab which remote URL, e.g. href, is going to be updated (no zero-based index).
url | String
A URL the content of the tab is loaded from.

Retrieved from "http://docs.jquery.com/UI/Tabs/tabsHref"

Categories: UI/Tabs/tabsHref | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Tabs/tabsSelected - jQuery JavaScript Library

  • Blog

UI/Tabs/tabsSelected

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Tabs

[edit]

tabsSelected( )

  • Overview
  • Options
  • Examples
  • Discuss

Retrieve the position of the currently selected tab of the first matched tabs interface (no zero-based index).
The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element. Returns -1 if no tab is currently selected.

Retrieved from "http://docs.jquery.com/UI/Tabs/tabsSelected"

Categories: UI/Tabs/tabsSelected | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Shadow - jQuery JavaScript Library

  • Blog

UI/Shadow

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery UI Docs

Adds a themable drop shadow to your elements.

Depends on: jquery.dimensions.js

Name Type
Example:
  • Demo
  • View Source
Adds a drop shadow to the example element.

$("#example").shadow();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#example").shadow();
  });
  </script>

</head>
<body>
  <link rel="stylesheet" href="../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script src="../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script src="../view/trunk/plugins/ui/ui.shadow.js"></script>
<img id="example" style="height: 100px;" src="../view/trunk/plugins/ui/demos/images/resizable.jpg" />
</body>
</html>

Name Type
Documentation:

Name | Type
shadow( options ) | Returns: jQuery
Add a drop shadow to the matched elements.
shadowDestroy( ) | Returns: jQuery
Destroys all shadows attached to the current jQuery elements.
shadowEnable( ) | Returns: jQuery
Enables shadows.
shadowDisable( ) | Returns: jQuery
Disables shadows.
Demos:

  • A series of Shadow demos

Name Type

Retrieved from "http://docs.jquery.com/UI/Shadow"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Shadow/shadow - jQuery JavaScript Library

  • Blog

UI/Shadow/shadow

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Shadow

[edit]

shadow( options )

  • Overview
  • Options
  • Examples
  • Discuss

Add a drop shadow to the matched elements.
Arguments:
options Options
A set of key/value pairs that configure the shadow. All options are optional.

Options:
Name | Type
color | String |
The color of the drop shadow.
offset | Number | Default: 0
How far away the drop shadow is positioned from the element, in pixels.
opacity | Number | Default: 0.2
How transparent to make the drop shadow.

Examples:
  • Demo
  • View Source
Adds a drop shadow to the example element.

$("#example").shadow();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#example").shadow();
  });
  </script>

</head>
<body>
  <link rel="stylesheet" href="../../view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script src="../../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script src="../../view/trunk/plugins/ui/ui.shadow.js"></script>
<img id="example" style="height: 100px;" src="../../view/trunk/plugins/ui/demos/images/resizable.jpg" />
</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/UI/Shadow/shadow"

Categories: UI/Shadow/shadow | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Shadow/shadowDestroy - jQuery JavaScript Library

  • Blog

UI/Shadow/shadowDestroy

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Shadow

[edit]

shadowDestroy( )

  • Overview
  • Options
  • Examples
  • Discuss

Destroys all shadows attached to the current jQuery elements.
Destroys all shadows on the current elements. Cannot be reverted.

Retrieved from "http://docs.jquery.com/UI/Shadow/shadowDestroy"

Categories: UI/Shadow/shadowDestroy | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Shadow/shadowEnable - jQuery JavaScript Library

  • Blog

UI/Shadow/shadowEnable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Shadow

[edit]

shadowEnable( )

  • Overview
  • Options
  • Examples
  • Discuss

Enables shadows.
Re-enables shadows on the jQuery supplied that has been disabled before.

Retrieved from "http://docs.jquery.com/UI/Shadow/shadowEnable"

Categories: UI/Shadow/shadowEnable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Shadow/shadowDisable - jQuery JavaScript Library

  • Blog

UI/Shadow/shadowDisable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Shadow

[edit]

shadowDisable( )

  • Overview
  • Options
  • Examples
  • Discuss

Disables shadows.
Temporarily disables shadows on the current jQuery. Can be re-enabled again later on.

Retrieved from "http://docs.jquery.com/UI/Shadow/shadowDisable"

Categories: UI/Shadow/shadowDisable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Magnifier - jQuery JavaScript Library

  • Blog

UI/Magnifier

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery UI Docs

Magnify elements based upon your proximity to them.

To make the images clickable, use:

<img src="../view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" onClick="parent.location='http://www.jquery.com'" onmouseover="document.body.style.cursor = 'pointer';" onmouseout="document.body.style.cursor = 'default';" />

Depends on: jquery.dimensions.js, ui.mouse.js

Name Type
Example:
  • Demo
  • View Source
Makes the images in the block magnify on mouse move.

$("#example").magnifier();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#example").magnifier();
  });
  </script>

</head>
<body>
  <script src="../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script src="../view/trunk/plugins/ui/ui.mouse.js"></script>
  <script src="../view/trunk/plugins/ui/ui.magnifier.js"></script>
<div id='example' class="ui-wrapper example" style="width: 600px; padding: 20px;">
    <img src="../view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" />
    <img src="../view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" />
    <img src="../view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" />
    <img src="../view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" />
    <img src="../view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" />
    <img src="../view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" />
</div>

</body>
</html>

Name Type
Documentation:

Name | Type
magnifier( options ) | Returns: jQuery
Make the contents of the selected elements magnify upon mouse proximity.
magnifierInstance( ) | Returns: Instance
Returns the OO instance of the current magnifier.
magnifierDestroy( ) | Returns: jQuery
Destroys all magnifier functionality in the current jQuery.
magnifierReset( ) | Returns: jQuery
Resets the magnifying on a magnified set of elements.
magnifierEnable( ) | Returns: jQuery
Enables magnifying.
magnifierDisable( ) | Returns: jQuery
Disables magnification.
Demos:

  • A series of Magnifier demos

Name Type

Retrieved from "http://docs.jquery.com/UI/Magnifier"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Magnifier/magnifier - jQuery JavaScript Library

  • Blog

UI/Magnifier/magnifier

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Magnifier

[edit]

magnifier( options )

  • Overview
  • Options
  • Examples
  • Discuss

Make the contents of the selected elements magnify upon mouse proximity.
Arguments:
options Options
A set of key/value pairs that configure the magnifier. All options are optional.

Options:
Name | Type
baseline | Number | Default: 0
The direction in which the element will rise. Set to -1 to make the element rise up.
distance | Number | Default: 150
How far away the mouse needs to be, in pixels, before it begins having an effect on the element.
magnification | Number | Default: 2
The factor by which the element will be magnified when the mouse is completely over it.
opacity | Object{min:Number, max:Number} | Default: {min: 1, max: 1}
The minimum and maximum opacity that an element transitions inbetween (the maximum opacity will be set when the mouse is completely over the element).
overlap | Boolean | Default: false
Allow the magnified elements to overlap each other, as opposed to pushing each other out of the way.
zIndex | Number
The index that the active element takes.
click | function(e, ui)
This function is called when the user clicks on one of the magnified items.
The argument e is the (click) event.
The argument ui is an object with three properties:

  • options (ui.options)
    A copy of the options set for this magnifier
  • current (ui.current)
    The DOM element clicked
  • currentOffset (ui.currentOffset)
    • The offset object of the clicked DOM element. (This saves the overhead of reprocessing the element's .offset() .) Offset object has two properties, top and left, which give the offset relative to the body.

Examples:
  • Demo
  • View Source
Makes the images in the block magnify on mouse move.

$("#example").magnifier();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#example").magnifier();
  });
  </script>

</head>
<body>
  <script src="../../view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script src="../../view/trunk/plugins/ui/ui.mouse.js"></script>
  <script src="../../view/trunk/plugins/ui/ui.magnifier.js"></script>
<div id='example' class="ui-wrapper example" style="padding: 20px;">
    <img src="http://dev.jquery.com/view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" />
    <img src="http://dev.jquery.com/view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" />
    <img src="http://dev.jquery.com/view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" />
    <img src="http://dev.jquery.com/view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" />
    <img src="http://dev.jquery.com/view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" />
    <img src="http://dev.jquery.com/view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" />
</div>

</body>
</html>

Name Type

Retrieved from "http://docs.jquery.com/UI/Magnifier/magnifier"

Categories: UI/Magnifier/magnifier | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Magnifier/magnifierInstance - jQuery JavaScript Library

  • Blog

UI/Magnifier/magnifierInstance

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Magnifier

[edit]

magnifierInstance( )

  • Overview
  • Options
  • Examples
  • Discuss

Returns the OO instance of the current magnifier.
For the advanced, this function is very useful to modify internals of the magnifier after initializing it. It returns a javascript function instance.

Retrieved from "http://docs.jquery.com/UI/Magnifier/magnifierInstance"

Categories: UI/Magnifier/magnifierInstance | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Magnifier/magnifierDestroy - jQuery JavaScript Library

  • Blog

UI/Magnifier/magnifierDestroy

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Magnifier

[edit]

magnifierDestroy( )

  • Overview
  • Options
  • Examples
  • Discuss

Destroys all magnifier functionality in the current jQuery.
Destroys all magnifier functionality in the current jQuery.

Retrieved from "http://docs.jquery.com/UI/Magnifier/magnifierDestroy"

Categories: UI/Magnifier/magnifierDestroy | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Magnifier/magnifierReset - jQuery JavaScript Library

  • Blog

UI/Magnifier/magnifierReset

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Magnifier

[edit]

magnifierReset( )

  • Overview
  • Options
  • Examples
  • Discuss

Resets the magnifying on a magnified set of elements.
This option resets the magnification to zero on the current set. It's very useful if you want to have another effect on click, for example.

Retrieved from "http://docs.jquery.com/UI/Magnifier/magnifierReset"

Categories: UI/Magnifier/magnifierReset | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Magnifier/magnifierEnable - jQuery JavaScript Library

  • Blog

UI/Magnifier/magnifierEnable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Magnifier

[edit]

magnifierEnable( )

  • Overview
  • Options
  • Examples
  • Discuss

Enables magnifying.
Re-enables magnifying on the jQuery supplied that has been disabled before.

Retrieved from "http://docs.jquery.com/UI/Magnifier/magnifierEnable"

Categories: UI/Magnifier/magnifierEnable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI/Magnifier/magnifierDisable - jQuery JavaScript Library

  • Blog

UI/Magnifier/magnifierDisable

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Magnifier

[edit]

magnifierDisable( )

  • Overview
  • Options
  • Examples
  • Discuss

Disables magnification.
Temporarily disables magnification on the current jQuery. Can be re-enabled again later on.

Retrieved from "http://docs.jquery.com/UI/Magnifier/magnifierDisable"

Categories: UI/Magnifier/magnifierDisable | API

Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


Main Page - jQuery JavaScript Library

  • Blog

Main Page

From jQuery JavaScript Library

Jump to: navigation, search

Getting Started

  • Downloading jQuery
  • How jQuery Works
  • Frequently Asked Questions
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types

Plugins

  • Plugin Repository
  • Plugin Authoring

Support

  • Frequently Asked Questions
  • Mailing List and Chat
  • Submit a Bug Report

About jQuery

  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • License
  • Donate

jQuery API Reference

  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • Internals

There are a number of alternative resources for browsing the API.

jQuery UI Reference

  • Mouse Interaction
    • Draggables
    • Droppables
    • Sortables
    • Selectables
    • Resizables
  • User Interface Extensions
    • Accordion
    • Datepicker
    • Dialog
    • Slider
    • Table
    • Tabs
  • Effects
    • Shadow
    • Magnifier

Retrieved from "http://docs.jquery.com/Main_Page"
Views
  • Article
  • Discussion
  • View source
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link


UI - jQuery JavaScript Library

  • Blog

UI

From jQuery JavaScript Library

Jump to: navigation, search

This is the wiki overview for jQuery UI, jQuery's visual controls. jQuery UI features a wide range of core interaction plugins as well as many UI widgets.

The project homepage is located at ui.jquery.com. Please visit these pages for downloading UI and many demos.

Contents

  • 1 The Documentation
    • 1.1 Mouse Interaction
    • 1.2 User Interface Extensions
    • 1.3 Effects
  • 2 Work in progress
  • 3 Participate
    • 3.1 Discussion
    • 3.2 Finding bugs
    • 3.3 Joining the project
[edit]

The Documentation

It's possible to use components individually. Just look at the dependencies listed for each item and include the appropriate files, or use the download builder available on the jQuery UI site.

[edit]

Mouse Interaction

  • Draggables - Makes items draggable by the mouse
  • Droppables - Makes drop targets for draggables
  • Sortables - Makes a list of items mouse sortable
  • Selectables - Makes a list of items mouse and keyboard selectable
  • Resizables - Makes an element resizable
[edit]

User Interface Extensions

  • Accordion - A collapsible content pane
  • Datepicker - A dynamic date picker
  • Dialog - Modal floating windows and confirmation dialogs
  • Slider - A sliding input element
  • Table - A sortable table
  • Tabs - A tabbed content pane
  • Tabs Extensions - Official extensions for tabs
[edit]

Effects

  • Shadow - Generates dynamic drop shadows on any element.
  • Magnifier - Increase and decrease the size of an element, based upon proximity
[edit]

Work in progress

Many modules are not ready to use yet. If you feel confident, you can try to look at the trunk/ui folder in jQuery's SVN to see if there are undocumented plugins you could need.

A couple that are in the works, but aren't quite ready yet for general consumption, are: Menu, Toolbars, Form Controls, Tree, Splitter, Rich Text Editor, and Uploader

[edit]

Participate

[edit]

Discussion

If you'd like to discuss the jQuery UI library, feel free to join us in the jQuery UI Google Group:

  • http://groups.google.com/group/jquery-ui

Or join us in the jQuery UI IRC channel:

 irc.freenode.net #jquery-ui
[edit]

Finding bugs

If you find any bugs or if you need enhancements, please leave us a new ticket in jQuery's Bug Tracker. Be sure to set the bug's Component type to 'ui'.

[edit]

Joining the project

We are always looking for creative, talented people who would like to invest time into the jQuery UI project. If you are thinking about it, leave us a message in the jQuery UI group at http://groups.google.com/group/jquery-ui.

The jQuery UI developer guidlines are located here: UI Developer Guide

Retrieved from "http://docs.jquery.com/UI"
Views
  • Article
  • Discussion
  • Edit
  • History
Personal tools
  • Log in / create account
Getting Started
  • Main Page
  • Downloading jQuery
  • How jQuery Works
  • FAQ
  • Tutorials
  • Using jQuery with Other Libraries
  • Variable Types
API Reference
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI
Plugins
  • Plugin Repository
  • Authoring
Support
  • Mailing List and Chat
  • Submit New Bug
About jQuery
  • Contributors
  • History of jQuery
  • Sites Using jQuery
  • Browser Compatibility
  • Licensing
  • Donate
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
  • Permanent link