This is jQuery tutorials and resources for beginners. More Tutorials

 

AJAX
$.ajax(property)

$.ajax(property)

$.ajax(property) is same as jQuery.ajax(property), both are produce the same results.

It loads a remote page using an HTTP request. This function is the primary means of making AJAX requests using jQuery.

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

Please note: Make sure the server sends the right mimetype (eg. xml as "text/xml"). Sending the wrong mimetype will get you into serious trouble that jQuery can't solve.

Supported datatypes (see dataType option) are:

"xml": Returns a XML document that can be processed via jQuery.

"html": Returns HTML as plain text, included script tags are evaluated.

"script": Evaluates the response as Javascript and returns it as plain text.

"json": Evaluates the response as JSON and returns a Javascript Object

$.ajax() takes one property, an object of key/value pairs, that are used to initalize the request. These are all the key/values that can be passed in to 'property':

(String) url - The URL of the page to request.

(String) type - The type of request to make (e.g. "POST" or "GET"), default is "GET".

(String) dataType - The type of data that you're expecting back from the server. No default: If the server sends xml, the responseXML, otherwise the responseText is is passed to the success callback.

(Boolean) ifModified - Allow the request to be successful only if the response has changed since the last request, default is false, ignoring the Last-Modified header

(Number) timeout - Local timeout to override global timeout, eg. to give a single request a longer timeout while all others timeout after 1 seconds, see $.ajaxTimeout()

(Boolean) global - Wheather to trigger global AJAX event handlers for this request, default is true. Set to false to prevent that global handlers like ajaxStart or ajaxStop are triggered.

(Function) error - A function to be called if the request fails. The function gets passed two arguments: The XMLHttpRequest object and a string describing the type of error that occurred.

(Function) success - A function to be called if the request succeeds. The function gets passed one argument: The data returned from the server, formatted according to the 'dataType' parameter.

(Function) complete - A function to be called when the request finishes. The function gets passed two arguments: The XMLHttpRequest object and a string describing the type the success of the request.

(Object|String) data - Data to be sent to the server. Converted to a query string, if not already a string. Is appended to the url for GET-requests. Override processData option to prevent processing.

(String) contentType - When sending data to the server, use this content-type, default is "application/x-www-form-urlencoded", which is fine for most cases.

(Boolean) processData - By default, data passed in as an object other as 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, set this option to false.

(Boolean) async - By default, all requests are send asynchronous (set to true). If you need synchronous requests, set this option to false.

(Function) beforeSend - A pre-callback to set custom headers etc., the XMLHttpRequest is passed as the only argument.

Returns

XMLHttpRequest

Parameters

  • property (Hash): A set of properties to initialize the request with.

Example

It loads and execute a JavaScript file.

The jQuery Code

$.ajax({
	  type: "GET",
	  url: "jquerycode.js",
	  dataType: "script"
	})

Example

Save some data to the server and notify the user once its complete.

The jQuery Code

$.ajax({
	  type: "POST",
	  url: "some.php",
	  data: "name=John&location=Boston",
	  success: function(msg){
		alert( "Data Saved: " + msg );
	  }
	});
$.ajaxTimeout(time)

$.ajaxTimeout(time)

Set the timeout of all AJAX requests to a specific amount of time. This will make all future AJAX requests timeout after a specified amount of time (the default is no timeout).

Returns

undefined

Parameters

  • time (Number): How long before an AJAX request times out.

Example

Make all AJAX requests timeout after 5 seconds.

The jQuery Code

$.ajaxTimeout( 5000 );
$.get(url, params, callback)

$.get(url, params, callback)

It loads a remote page using an HTTP GET request. All of the arguments to the method (except URL) are optional.

Returns

undefined

Parameters

  • url (String): The URL of the page to load.
  • params (Hash): A set of key/value pairs that will be sent to the server.
  • callback (Function): A function to be executed whenever the data is loaded.

Example

The jQuery Code

$.get("jquerycode.cgi")

Example

The jQuery Code

$.get("jquerycode.cgi", { name: "John", time: "2pm" } )

Example

The jQuery Code

$.get("jquerycode.cgi", function(data){
	  alert("Data Loaded: " + data);
	})

Example

The jQuery Code

$.get("jquerycode.cgi",
	  { name: "John", time: "2pm" },
	  function(data){
		alert("Data Loaded: " + data);
	  }
	)
$.getIfModified(url, params, callback)

$.getIfModified(url, params, callback)

It loads a remote page using an HTTP GET request, only if it hasn't been modified since it was last retrieved. All of the arguments to the method (except URL) are optional.

Returns

undefined

Parameters

  • url (String): The URL of the page to load.
  • params (Hash): A set of key/value pairs that will be sent to the server.
  • callback (Function): A function to be executed whenever the data is loaded.

Example

The jQuery Code

$.getIfModified("jquerycode.html")

Example

The jQuery Code

$.getIfModified("jquerycode.html", { name: "John", time: "2pm" } )

Example

The jQuery Code

$.getIfModified("jquerycode.cgi", function(data){
	  alert("Data Loaded: " + data);
	})

Example

The jQuery Code

$.getifModified("jquerycode.cgi",
	  { name: "John", time: "2pm" },
	  function(data){
		alert("Data Loaded: " + data);
	  }
	)
$.getJSON(url, params, callback)

$.getJSON(url, params, callback)

It loads a remote JSON object using an HTTP GET request. All of the arguments to the method (except URL) are optional.

Returns

undefined

Parameters

  • url (String): The URL of the page to load.
  • params (Hash): A set of key/value pairs that will be sent to the server.
  • callback (Function): A function to be executed whenever the data is loaded.

Example

The jQuery Code

$.getJSON("jquerycode.js", function(json){
	  alert("JSON Data: " + json.users[3].name);
	})

Example

The jQuery Code

$.getJSON("jquerycode.js",
	  { name: "John", time: "2pm" },
	  function(json){
		alert("JSON Data: " + json.users[3].name);
	  }
	)
$.getScript(url, callback)

$.getScript(url, callback)

It loads, and executes, a remote JavaScript file using an HTTP GET request. All of the arguments to the method (except URL) are optional.

Warning: Safari <= 2.0.x is unable to evalulate scripts in a global context sychronously. If you load functions via getScript, make sure to call them after a delay.

Returns

undefined

Parameters

  • url (String): The URL of the page to load.
  • callback (Function): A function to be executed whenever the data is loaded.

Example

The jQuery Code

$.getScript("jquerycode.js")

Example

The jQuery Code

$.getScript("jquerycode.js", function(){
	  alert("Script loaded and executed.");
	})
$.post(url, params, callback)

$.post(url, params, callback)

It loads a remote page using an HTTP POST request. All of the arguments to the method (except URL) are optional.

Returns

undefined

Parameters

  • url (String): The URL of the page to load.
  • params (Hash): A set of key/value pairs that will be sent to the server.
  • callback (Function): A function to be executed whenever the data is loaded.

Example

The jQuery Code

$.post("jquerycode.cgi")

Example

The jQuery Code

$.post("jquerycode.cgi", { name: "John", time: "2pm" } )

Example

The jQuery Code

$.post("jquerycode.cgi", function(data){
	  alert("Data Loaded: " + data);
	})

Example

The jQuery Code

$.post("jquerycode.cgi",
	  { name: "John", time: "2pm" },
	  function(data){
		alert("Data Loaded: " + data);
	  }
	)
ajaxComplete(callback)

ajaxComplete(callback)

Attach a function to be executed whenever an AJAX request completes.

The XMLHttpRequest and settings used for that request are passed as arguments to the callback.

Returns

jQuery

Parameters

  • callback (Function): The function to execute.

Example

Show a message when an AJAX request completes.

The jQuery Code

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

ajaxError(callback)

Attach a function to be executed whenever an AJAX request fails.

The XMLHttpRequest and settings used for that request are passed as arguments to the callback.

Returns

jQuery

Parameters

  • callback (Function): The function to execute.

Example

Show a message when an AJAX request fails.

The jQuery Code

$("#msg").ajaxError(function(request, settings){
	  $(this).append("<li>Error requesting page " + settings.url + "</li>");
	});
ajaxSend(callback)

ajaxSend(callback)

Attach a function to be executed before an AJAX request is send.

The XMLHttpRequest and settings used for that request are passed as arguments to the callback.

Returns

jQuery

Parameters

  • callback (Function): The function to execute.

Example

Show a message before an AJAX request is send.

The jQuery Code

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

ajaxStart(callback)

Attach a function to be executed whenever an AJAX request begins.

Returns

jQuery

Parameters

  • callback (Function): The function to execute.

Example

Show a loading message whenever an AJAX request starts.

The jQuery Code

$("#loading").ajaxStart(function(){
	  $(this).show();
	});
ajaxStop(callback)

ajaxStop(callback)

Attach a function to be executed whenever all AJAX requests have ended.

Returns

jQuery

Parameters

  • callback (Function): The function to execute.

Example

Hide a loading message after all the AJAX requests have stopped.

The jQuery Code

$("#loading").ajaxStop(function(){
	  $(this).hide();
	});
ajaxSuccess(callback)

ajaxSuccess(callback)

Attach a function to be executed whenever an AJAX request completes successfully.

The XMLHttpRequest and settings used for that request are passed as arguments to the callback.

Returns

jQuery

Parameters

  • callback (Function): The function to execute.

Example

Show a message when an AJAX request completes successfully.

The jQuery Code

$("#msg").ajaxSuccess(function(request, settings){
	  $(this).append("<li>Successful Request!</li>");
	});
load(url, params, callback)

load(url, params, callback)

It loads HTML from a remote file and inject it into the DOM.

Returns

jQuery

Parameters

  • url (String): The URL of the HTML file to load.
  • params (Object): A set of key/value pairs that will be sent as data to the server.
  • callback (Function): A function to be executed whenever the data is loaded (parameters: responseText, status and reponse itself).

Example

The jQuery Code

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

Before

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

Result:

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

Example

Same as above, but with an additional parameter and a callback that is executed when the data was loaded.

The jQuery Code

$("#feeds").load("feeds.html",
	  {jquerycode: true},
	  function() { alert("load is done"); }
	);
loadIfModified(url, params, callback)

loadIfModified(url, params, callback)

It loads HTML from a remote file and inject it into the DOM, only if it's been modified by the server.

Returns

jQuery

Parameters

  • url (String): The URL of the HTML file to load.
  • params (Hash): A set of key/value pairs that will be sent to the server.
  • callback (Function): A function to be executed whenever the data is loaded.

Example

The jQuery Code

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

Before

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

Result:

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

serialize()

Serializes a set of input elements into a string of data. This will serialize all given elements. If you need serialization similar to the form submit of a browser, you should use the form plugin. This is also true for selects with multiple attribute set, only a single option is serialized.

Returns

String

Example

Serialize a selection of input elements to a string

The jQuery Code

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

Before

<input type='text' name='name' value='John'/>
	<input type='text' name='location' value='Boston'/>
Core
$(html)

$(html)

This function accepts a string of raw HTML.

The HTML string is different from the traditional selectors in that it creates the DOM elements representing that HTML string, on the fly, to be (assumedly) inserted into the document later.

Returns

jQuery

Parameters

  • html (String): A string of HTML to create on the fly.

Example

Creates a div element (and all of its contents) dynamically, and appends it to the element with the ID of body. Internally, an element is created and it's innerHTML property set to the given markup. It is therefore both quite flexible and limited.

The jQuery Code

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

$(elem)

Wrap jQuery functionality around a specific DOM Element. This function also accepts XML Documents and Window objects as valid arguments (even though they are not DOM Elements).

Returns

jQuery

Parameters

  • elem (Element): A DOM element to be encapsulated by a jQuery object.

Example

The jQuery Code

$(document).find("div > p")

Before

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

Result:

[ <p>two</p> ]

Example

Sets the background color of the page to black.

The jQuery Code

$(document.body).background( "black" );
$(elems)

$(elems)

Wrap jQuery functionality around a set of DOM Elements.

Returns

jQuery

Parameters

  • elems (Array<Element>): An array of DOM elements to be encapsulated by a jQuery object.

Example

Hides all the input elements within a form

The jQuery Code

$( myForm.elements ).hide()
$(fn)

$(fn)

A shorthand for $(document).ready(), allowing 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 all of the other $() operations on your page. 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.

Returns

jQuery

Parameters

  • fn (Function): The function to execute when the DOM is ready.

Example

Executes the function when the DOM is ready to be used.

The jQuery Code

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

$(obj)

A means of creating a cloned copy of a jQuery object. This function copies the set of matched elements from one jQuery object and creates another, new, jQuery object containing the same elements.

Returns

jQuery

Parameters

  • obj (jQuery): The jQuery object to be cloned.

Example

Locates all p elements with all div elements, without disrupting the original jQuery object contained in 'div' (as would normally be the case if a simple div.find("p") was done).

The jQuery Code

var div = $("div");
	$( div ).find("p");
$(expr, context)

$(expr, context)

This function accepts a string containing a CSS or basic XPath 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 or XPath), which then finds all matching elements.

By default, $() looks for DOM elements within the context of the current HTML document.

Returns

jQuery

Parameters

  • expr (String): An expression to search with
  • context (Element): (optional) A DOM Element, or Document, representing the base context.

Example

This finds all p elements that are children of a div element.

The jQuery Code

$("div > p")

Before

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

Result:

[ <p>two</p> ]

Example

Searches for all inputs of type radio within the first form in the document

The jQuery Code

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

Example

This finds all div elements within the specified XML document.

The jQuery Code

$("div", xml.responseXML)
$.extend(property)

$.extend(property)

Extends the jQuery object itself. Can be used to add functions into the jQuery namespace and to add plugin methods (plugins).

Returns

Object

Parameters

  • property (Object): The object that will be merged into the jQuery object

Example

Adds two plugin methods.

The jQuery Code

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

Example

Adds two functions into the jQuery namespace

The jQuery Code

jQuery.extend({
	  min: function(a, b) { return a < b ? a : b; },
	  max: function(a, b) { return a > b ? a : b; }
	});
each(fn)

each(fn)

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

Additionally, the function, when executed, is passed a single argument representing the position of the element in the matched set.

Returns

jQuery

Parameters

  • fn (Function): A function to execute

Example

Iterates over two images and sets their src property

The jQuery Code

$("img").each(function(i){
	  this.src = "jquerycode" + i + ".jpg";
	});

Before

<img/> <img/>

Result:

<img src="jquerycode0.jpg"/> <img src="jquerycode1.jpg"/>
eq(pos)

eq(pos)

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.

Returns

jQuery

Parameters

  • pos (Number): The index of the element that you wish to limit to.

Example

The jQuery Code

$("p").eq(1)

Before

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

Result:

[ <p>So is this</p> ]
get()

get()

Access all matched 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).

Returns

Array<Element>

Example

The jQuery Code

$("img").get();

Before

<img src="jquerycode1.jpg"/> <img src="jquerycode2.jpg"/>

Result:

[ <img src="jquerycode1.jpg"/> <img src="jquerycode2.jpg"/> ]
get(num)

get(num)

Access a single matched element. num is used to access the Nth element matched.

Returns

Element

Parameters

  • num (Number): Access the element in the Nth position.

Example

The jQuery Code

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

Before

<img src="jquerycode1.jpg"/> <img src="jquerycode2.jpg"/>

Result:

[ <img src="jquerycode1.jpg"/> ]
gt(pos)

gt(pos)

Reduce the set of matched elements to all elements after a given position. The position of the element in the set of matched elements starts at 0 and goes to length - 1.

Returns

jQuery

Parameters

  • pos (Number): Reduce the set to all elements after this position.

Example

The jQuery Code

$("p").gt(0)

Before

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

Result:

[ <p>So is this</p> ]
index(obj)

index(obj)

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.

Returns

Number

Parameters

  • obj (Object): Object to search for

Example

The jQuery Code

$("*").index(document.getElementById('foobar'))

Before

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

Result:

0

Example

The jQuery Code

$("*").index(document.getElementById('foo'))

Before

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

Result:

2

Example

The jQuery Code

$("*").index(document.getElementById('bar'))

Before

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

Result:

-1
length

length

The number of elements currently matched.

Returns

Number

Example

The jQuery Code

$("img").length;

Before

<img src="jquerycode1.jpg"/> <img src="jquerycode2.jpg"/>

Result:

2
lt(pos)

lt(pos)

Reduce the set of matched elements to all elements before a given position. The position of the element in the set of matched elements starts at 0 and goes to length - 1.

Returns

jQuery

Parameters

  • pos (Number): Reduce the set to all elements below this position.

Example

The jQuery Code

$("p").lt(1)

Before

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

Result:

[ <p>This is just a test.</p> ]
size()

size()

The number of elements currently matched.

Returns

Number

Example

The jQuery Code

$("img").size();

Before

<img src="jquerycode1.jpg"/> <img src="jquerycode2.jpg"/>

Result:

2
CSS
background()

background()

Get the current CSS background of the first matched element.

Returns

String

Example

The jQuery Code

$("p").background();

Before

<p style="background:blue;">This is just a test.</p>

Result:

"blue"
background(val)

background(val)

Set the CSS background of every matched element.

Returns

jQuery

Parameters

  • val (String): Set the CSS property to the specified value.

Example

The jQuery Code

$("p").background("blue");

Before

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

Result:

<p style="background:blue;">This is just a test.</p>
color()

color()

Get the current CSS color of the first matched element.

Returns

String

Example

The jQuery Code

$("p").color();

Before

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

Result:

"black"
color(val)

color(val)

Set the CSS color of every matched element.

Returns

jQuery

Parameters

  • val (String): Set the CSS property to the specified value.

Example

The jQuery Code

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

Before

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

Result:

<p style="color:blue;">This is just a test.</p>
css(name)

css(name)

Access a style property on the first matched element. This method makes it easy to retrieve a style property value from the first matched element.

Returns

Object

Parameters

  • name (String): The name of the property to access.

Example

Retrieves the color style of the first paragraph

The jQuery Code

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

Before

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

Result:

red

Example

Retrieves the font-weight style of the first paragraph. Note that for all style properties with a dash (like 'font-weight'), you have to write it in camelCase. In other words: Every time you have a '-' in a property, remove it and replace the next character with an uppercase representation of itself. Eg. fontWeight, fontSize, fontFamily, borderWidth, borderStyle, borderBottomWidth etc.

The jQuery Code

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

Before

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

Result:

bold
css(property)

css(property)

Set a hash of key/value style properties to all matched elements. This serves as the best way to set a large number of style properties on all matched elements.

Returns

jQuery

Parameters

  • property (Hash): A set of key/value pairs to set as style properties.

Example

The jQuery Code

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

Before

<p>Test Paragraph.</p>

Result:

<p style="color:red; background:blue;">Test Paragraph.</p>
css(key, value)

css(key, value)

Set a single style property to a value, on all matched elements.

Returns

jQuery

Parameters

  • key (String): The name of the property to set.
  • value (Object): The value to set the property to.

Example

Changes the color of all paragraphs to red

The jQuery Code

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

Before

<p>Test Paragraph.</p>

Result:

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

float()

Get the current CSS float of the first matched element.

Returns

String

Example

The jQuery Code

$("p").float();

Before

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

Result:

"none"
float(val)

float(val)

Set the CSS float of every matched element.

Returns

jQuery

Parameters

  • val (String): Set the CSS property to the specified value.

Example

The jQuery Code

$("p").float("left");

Before

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

Result:

<p style="float:left;">This is just a test.</p>
height()

height()

Get the current CSS height of the first matched element.

Returns

String

Example

The jQuery Code

$("p").height();

Before

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

Result:

"14px"
height(val)

height(val)

Set the CSS height of every matched element. Be sure to include the "px" (or other unit of measurement) after the number that you specify, otherwise you might get strange results.

Returns

jQuery

Parameters

  • val (String): Set the CSS property to the specified value.

Example

The jQuery Code

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

Before

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

Result:

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

left()

Get the current CSS left of the first matched element.

Returns

String

Example

The jQuery Code

$("p").left();

Before

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

Result:

"0px"
left(val)

left(val)

Set the CSS left of every matched element. Be sure to include the "px" (or other unit of measurement) after the number that you specify, otherwise you might get strange results.

Returns

jQuery

Parameters

  • val (String): Set the CSS property to the specified value.

Example

The jQuery Code

$("p").left("20px");

Before

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

Result:

<p style="left:20px;">This is just a test.</p>
overflow()

overflow()

Get the current CSS overflow of the first matched element.

Returns

String

Example

The jQuery Code

$("p").overflow();

Before

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

Result:

"none"
overflow(val)

overflow(val)

Set the CSS overflow of every matched element.

Returns

jQuery

Parameters

  • val (String): Set the CSS property to the specified value.

Example

The jQuery Code

$("p").overflow("auto");

Before

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

Result:

<p style="overflow:auto;">This is just a test.</p>
position()

position()

Get the current CSS position of the first matched element.

Returns

String

Example

The jQuery Code

$("p").position();

Before

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

Result:

"static"
position(val)

position(val)

Set the CSS position of every matched element.

Returns

jQuery

Parameters

  • val (String): Set the CSS property to the specified value.

Example

The jQuery Code

$("p").position("relative");

Before

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

Result:

<p style="position:relative;">This is just a test.</p>
top()

top()

Get the current CSS top of the first matched element.

Returns

String

Example

The jQuery Code

$("p").top();

Before

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

Result:

"0px"
top(val)

top(val)

Set the CSS top of every matched element. Be sure to include the "px" (or other unit of measurement) after the number that you specify, otherwise you might get strange results.

Returns

jQuery

Parameters

  • val (String): Set the CSS property to the specified value.

Example

The jQuery Code

$("p").top("20px");

Before

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

Result:

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

width()

Get the current CSS width of the first matched element.

Returns

String

Example

The jQuery Code

$("p").width();

Before

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

Result:

"300px"
width(val)

width(val)

Set the CSS width of every matched element. Be sure to include the "px" (or other unit of measurement) after the number that you specify, otherwise you might get strange results.

Returns

jQuery

Parameters

  • val (String): Set the CSS property to the specified value.

Example

The jQuery Code

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

Before

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

Result:

<p style="width:20px;">This is just a test.</p>
DOM
Attributes
href()

href()

Get the current href of the first matched element.

Returns

String

Example

The jQuery Code

$("a").href();

Before

<a href="jquerycode.html">my link</a>

Result:

"jquerycode.html"
href(val)

href(val)

Set the href of every matched element.

Returns

jQuery

Parameters

  • val (String): Set the property to the specified value.

Example

The jQuery Code

$("a").href("jquerycode2.html");

Before

<a href="jquerycode.html">my link</a>

Result:

<a href="jquerycode2.html">my link</a>
html()

html()

Get the html contents of the first matched element.

Returns

String

Example

The jQuery Code

$("div").html();

Before

<div><input/></div>

Result:

<input/>
html(val)

html(val)

Set the html contents of every matched element.

Returns

jQuery

Parameters

  • val (String): Set the html contents to the specified value.

Example

The jQuery Code

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

Before

<div><input/></div>

Result:

<div><b>new stuff</b></div>
id()

id()

Get the current id of the first matched element.

Returns

String

Example

The jQuery Code

$("input").id();

Before

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

Result:

"jquerycode"
id(val)

id(val)

Set the id of every matched element.

Returns

jQuery

Parameters

  • val (String): Set the property to the specified value.

Example

The jQuery Code

$("input").id("newid");

Before

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

Result:

<input type="text" id="newid" value="some text"/>
name()

name()

Get the current name of the first matched element.

Returns

String

Example

The jQuery Code

$("input").name();

Before

<input type="text" name="username"/>

Result:

"username"
name(val)

name(val)

Set the name of every matched element.

Returns

jQuery

Parameters

  • val (String): Set the property to the specified value.

Example

The jQuery Code

$("input").name("user");

Before

<input type="text" name="username"/>

Result:

<input type="text" name="user"/>
rel()

rel()

Get the current rel of the first matched element.

Returns

String

Example

The jQuery Code

$("a").rel();

Before

<a href="jquerycode.html" rel="nofollow">my link</a>

Result:

"nofollow"
rel(val)

rel(val)

Set the rel of every matched element.

Returns

jQuery

Parameters

  • val (String): Set the property to the specified value.

Example

The jQuery Code

$("a").rel("nofollow");

Before

<a href="jquerycode.html">my link</a>

Result:

<a href="jquerycode.html" rel="nofollow">my link</a>
src()

src()

Get the current src of the first matched element.

Returns

String

Example

The jQuery Code

$("img").src();

Before

<img src="jquerycode.jpg" title="my image"/>

Result:

"jquerycode.jpg"
src(val)

src(val)

Set the src of every matched element.

Returns

jQuery

Parameters

  • val (String): Set the property to the specified value.

Example

The jQuery Code

$("img").src("jquerycode2.jpg");

Before

<img src="jquerycode.jpg" title="my image"/>

Result:

<img src="jquerycode2.jpg" title="my image"/>
title()

title()

Get the current title of the first matched element.

Returns

String

Example

The jQuery Code

$("img").title();

Before

<img src="jquerycode.jpg" title="my image"/>

Result:

"my image"
title(val)

title(val)

Set the title of every matched element.

Returns

jQuery

Parameters

  • val (String): Set the property to the specified value.

Example

The jQuery Code

$("img").title("new title");

Before

<img src="jquerycode.jpg" title="my image"/>

Result:

<img src="jquerycode.jpg" title="new image"/>
val()

val()

Get the current value of the first matched element.

Returns

String

Example

The jQuery Code

$("input").val();

Before

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

Result:

"some text"
val(val)

val(val)

Set the value of every matched element.

Returns

jQuery

Parameters

  • val (String): Set the property to the specified value.

Example

The jQuery Code

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

Before

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

Result:

<input type="text" value="jquerycode"/>
Manipulation
after(html)

after(html)

Insert any number of dynamically generated elements after each of the matched elements.

Returns

jQuery

Parameters

  • html (String): A string of HTML, that will be created on the fly and appended to the target.

Example

The jQuery Code

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

Before

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

Result:

<p>I would like to say: </p><b>Hello</b>
after(elem)

after(elem)

Insert an element after each of the matched elements.

Returns

jQuery

Parameters

  • elem (Element): A DOM element that will be appended.

Example

The jQuery Code

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

Before

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

Result:

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

after(elems)

Insert any number of elements after each of the matched elements.

Returns

jQuery

Parameters

  • elems (Array<Element>): An array of elements, all of which will be appended.

Example

The jQuery Code

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

Before

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

Result:

<p>I would like to say: </p><b>Hello</b>
append(html)

append(html)

Append any number of elements to the inside of every matched elements, generated from the provided HTML. This operation is similar to doing an appendChild to all the specified elements, adding them into the document.

Returns

jQuery

Parameters

  • html (String): A string of HTML, that will be created on the fly and appended to the target.

Example

The jQuery Code

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

Before

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

Result:

<p>I would like to say: <b>Hello</b></p>
append(elem)

append(elem)

Append an element to the inside of all matched elements. This operation is similar to doing an appendChild to all the specified elements, adding them into the document.

Returns

jQuery

Parameters

  • elem (Element): A DOM element that will be appended.

Example

The jQuery Code

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

Before

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

Result:

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

append(elems)

Append any number of elements to the inside of all matched elements. This operation is similar to doing an appendChild to all the specified elements, adding them into the document.

Returns

jQuery

Parameters

  • elems (Array<Element>): An array of elements, all of which will be appended.

Example

The jQuery Code

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

Before

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

Result:

<p>I would like to say: <b>Hello</b></p>
appendTo(expr)

appendTo(expr)

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.

Returns

jQuery

Parameters

  • expr (String): A jQuery expression of elements to match.

Example

The jQuery Code

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

Before

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

Result:

<div id="foo"><p>I would like to say: </p></div>
before(html)

before(html)

Insert any number of dynamically generated elements before each of the matched elements.

Returns

jQuery

Parameters

  • html (String): A string of HTML, that will be created on the fly and appended to the target.

Example

The jQuery Code

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

Before

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

Result:

<b>Hello</b><p>I would like to say: </p>
before(elem)

before(elem)

Insert an element before each of the matched elements.

Returns

jQuery

Parameters

  • elem (Element): A DOM element that will be appended.

Example

The jQuery Code

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

Before

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

Result:

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

before(elems)

Insert any number of elements before each of the matched elements.

Returns

jQuery

Parameters

  • elems (Array<Element>): An array of elements, all of which will be appended.

Example

The jQuery Code

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

Before

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

Result:

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

clone()

Create cloned copies of all matched DOM Elements. This does not create a cloned copy of this particular jQuery object, instead it creates duplicate copies of all DOM Elements. This is useful for moving copies of the elements to another location in the DOM.

Returns

jQuery

Example

The jQuery Code

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

Before

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

Result:

<b>Hello</b><p><b>Hello</b>, how are you?</p>
empty()

empty()

It removes all child nodes from the set of matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").empty()

Before

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

Result:

[ <p></p> ]
insertAfter(expr)

insertAfter(expr)

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.

Returns

jQuery

Parameters

  • expr (String): A jQuery expression of elements to match.

Example

The jQuery Code

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

Before

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

Result:

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

insertBefore(expr)

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.

Returns

jQuery

Parameters

  • expr (String): A jQuery expression of elements to match.

Example

The jQuery Code

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

Before

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

Result:

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

prepend(html)

Prepend any number of elements to the inside of every matched elements, generated from the provided HTML. This operation is the best way to insert dynamically created elements inside, at the beginning, of all the matched element.

Returns

jQuery

Parameters

  • html (String): A string of HTML, that will be created on the fly and appended to the target.

Example

The jQuery Code

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

Before

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

Result:

<p><b>Hello</b>I would like to say: </p>
prepend(elem)

prepend(elem)

Prepend an element to the inside of all matched elements. This operation is the best way to insert an element inside, at the beginning, of all the matched element.

Returns

jQuery

Parameters

  • elem (Element): A DOM element that will be appended.

Example

The jQuery Code

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

Before

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

Result:

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

prepend(elems)

Prepend any number of elements to the inside of all matched elements. This operation is the best way to insert a set of elements inside, at the beginning, of all the matched element.

Returns

jQuery

Parameters

  • elems (Array<Element>): An array of elements, all of which will be appended.

Example

The jQuery Code

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

Before

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

Result:

<p><b>Hello</b>I would like to say: </p>
prependTo(expr)

prependTo(expr)

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.

Returns

jQuery

Parameters

  • expr (String): A jQuery expression of elements to match.

Example

The jQuery Code

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

Before

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

Result:

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

remove()

It removes all matched elements from the DOM. This does NOT remove them from the jQuery object, allowing you to use the matched elements further.

Returns

jQuery

Example

The jQuery Code

$("p").remove();

Before

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

Result:

how are
remove(expr)

remove(expr)

It removes only elements (out of the list of matched elements) that match the specified jQuery expression. This does NOT remove them from the jQuery object, allowing you to use the matched elements further.

Returns

jQuery

Parameters

  • expr (String): A jQuery expression to filter elements by.

Example

The jQuery Code

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

Before

<p class="hello">Hello</p> how are <p>you?</p>

Result:

how are <p>you?</p>
wrap(html)

wrap(html)

Wrap all matched elements with a structure of other elements. This wrapping process is most useful for injecting additional stucture 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 en-wrap everything else.

This does not work with elements that contain text. Any necessary text must be added after the wrapping is done.

Returns

jQuery

Parameters

  • html (String): A string of HTML, that will be created on the fly and wrapped around the target.

Example

The jQuery Code

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

Before

<p>Test Paragraph.</p>

Result:

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

wrap(elem)

Wrap all matched elements with a structure of other elements. This wrapping process is most useful for injecting additional stucture into a document, without ruining the original semantic qualities of a document.

This works by going through the first element provided and finding the deepest ancestor element within its structure - it is that element that will en-wrap everything else.

This does not work with elements that contain text. Any necessary text must be added after the wrapping is done.

Returns

jQuery

Parameters

  • elem (Element): A DOM element that will be wrapped.

Example

The jQuery Code

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

Before

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

Result:

<div id="content"><p>Test Paragraph.</p></div>
Traversing
add(expr)

add(expr)

Adds the elements matched by the expression to the jQuery object. This can be used to concatenate the result sets of two expressions.

Returns

jQuery

Parameters

  • expr (String): An expression whose matched elements are added

Example

The jQuery Code

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

Before

<p>Hello</p><p><span>Hello Again</span></p>

Result:

[ <p>Hello</p>, <span>Hello Again</span> ]
add(els)

add(els)

Adds each of the Elements in the array to the set of matched elements. This is used to add a set of Elements to a jQuery object.

Returns

jQuery

Parameters

  • els (Array<Element>): An array of Elements to add

Example

The jQuery Code

$("p").add([document.getElementById("a"), document.getElementById("b")])

Before

<p>Hello</p><p><span id="a">Hello Again</span><span id="b">And Again</span></p>

Result:

[ <p>Hello</p>, <span id="a">Hello Again</span>, <span id="b">And Again</span> ]
add(el)

add(el)

Adds a single Element to the set of matched elements. This is used to add a single Element to a jQuery object.

Returns

jQuery

Parameters

  • el (Element): An Element to add

Example

The jQuery Code

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

Before

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

Result:

[ <p>Hello</p>, <span id="a">Hello Again</span> ]
ancestors()

ancestors()

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

Returns

jQuery

Example

The jQuery Code

$("span").ancestors()

Before

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

Result:

[ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]
ancestors(expr)

ancestors(expr)

Get a set of elements containing the unique ancestors of the matched set of elements, and filtered by an expression.

Returns

jQuery

Parameters

  • expr (String): An expression to filter the ancestors with

Example

The jQuery Code

$("span").ancestors("p")

Before

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

Result:

[ <p><span>Hello</span></p> ]
children()

children()

Get a set of elements containing all of the unique children of each of the matched set of elements.

Returns

jQuery

Example

The jQuery Code

$("div").children()

Before

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

Result:

[ <span>Hello Again</span> ]
children(expr)

children(expr)

Get a set of elements containing all of the unique children of each of the matched set of elements, and filtered by an expression.

Returns

jQuery

Parameters

  • expr (String): An expression to filter the child Elements with

Example

The jQuery Code

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

Before

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

Result:

[ <p class="selected">Hello Again</p> ]
contains(str)

contains(str)

Filter the set of elements to those that contain the specified text.

Returns

jQuery

Parameters

  • str (String): The string that will be contained within the text of an element.

Example

The jQuery Code

$("p").contains("jquerycode")

Before

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

Result:

[ <p>This is just a test.</p> ]
end()

end()

End the most recent 'destructive' operation, reverting the list of matched elements back to its previous state. After an end operation, the list of matched elements will revert to the last state of matched elements.

Returns

jQuery

Example

The jQuery Code

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

Before

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

Result:

$("p").find("span").end() == [ <p>...</p> ]
filter(expr)

filter(expr)

It removes all elements from the set of matched elements that do not match the specified expression. This method is used to narrow down the results of a search.

All searching is done using a jQuery expression. The expression can be written using CSS 1-3 Selector syntax, or basic XPath.

Returns

jQuery

Parameters

  • expr (String): An expression to search with.

Example

The jQuery Code

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

Before

<p class="selected">Hello</p><p>How are you?</p>

Result:

$("p").filter(".selected") == [ <p class="selected">Hello</p> ]
filter(exprs)

filter(exprs)

It removes all elements from the set of matched elements that do not match at least one of the expressions passed to the function. This method is used when you want to filter the set of matched elements through more than one expression.

Elements will be retained in the jQuery object if they match at least one of the expressions passed.

Returns

jQuery

Parameters

  • exprs (Array<String>): A set of expressions to evaluate against

Example

The jQuery Code

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

Before

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

Result:

$("p").filter([".selected", ":first"]) == [ <p>Hello</p>, <p class="selected">And Again</p> ]
find(expr)

find(expr)

Searches for all elements that match the specified expression. This method is the optimal way of finding 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, or basic XPath.

Returns

jQuery

Parameters

  • expr (String): An expression to search with.

Example

The jQuery Code

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

Before

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

Result:

$("p").find("span") == [ <span>Hello</span> ]
is(expr)

is(expr)

Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression. Does return false, if no element fits or the expression is not valid.

Returns

Boolean

Parameters

  • expr (String): The expression with which to filter

Example

Returns true, because the parent of the input is a form element

The jQuery Code

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

Before

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

Result:

true

Example

Returns false, because the parent of the input is a p element

The jQuery Code

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

Before

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

Result:

false

Example

An invalid expression always returns false.

The jQuery Code

$("form").is(null)

Before

<form></form>

Result:

false
next()

next()

Get a set of elements containing the unique next siblings of each of the matched set of elements.

It only returns the very next sibling, not all next siblings.

Returns

jQuery

Example

The jQuery Code

$("p").next()

Before

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

Result:

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
next(expr)

next(expr)

Get a set of elements containing the unique next siblings of each of the matched set of elements, and filtered by an expression.

It only returns the very next sibling, not all next siblings.

Returns

jQuery

Parameters

  • expr (String): An expression to filter the next Elements with

Example

The jQuery Code

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

Before

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

Result:

[ <p class="selected">Hello Again</p> ]
not(el)

not(el)

It removes the specified Element from the set of matched elements. This method is used to remove a single Element from a jQuery object.

Returns

jQuery

Parameters

  • el (Element): An element to remove from the set

Example

The jQuery Code

$("p").not( document.getElementById("selected") )

Before

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

Result:

[ <p>Hello</p> ]
not(expr)

not(expr)

It removes elements matching the specified expression from the set of matched elements. This method is used to remove one or more elements from a jQuery object.

Returns

jQuery

Parameters

  • expr (String): An expression with which to remove matching elements

Example

The jQuery Code

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

Before

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

Result:

[ <p>Hello</p> ]
parent()

parent()

Get a set of elements containing the unique parents of the matched set of elements.

Returns

jQuery

Example

The jQuery Code

$("p").parent()

Before

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

Result:

[ <div><p>Hello</p><p>Hello</p></div> ]
parent(expr)

parent(expr)

Get a set of elements containing the unique parents of the matched set of elements, and filtered by an expression.

Returns

jQuery

Parameters

  • expr (String): An expression to filter the parents with

Example

The jQuery Code

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

Before

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

Result:

[ <div class="selected"><p>Hello Again</p></div> ]
parents()

parents()

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

Returns

jQuery

Example

The jQuery Code

$("span").ancestors()

Before

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

Result:

[ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]
parents(expr)

parents(expr)

Get a set of elements containing the unique ancestors of the matched set of elements, and filtered by an expression.

Returns

jQuery

Parameters

  • expr (String): An expression to filter the ancestors with

Example

The jQuery Code

$("span").ancestors("p")

Before

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

Result:

[ <p><span>Hello</span></p> ]
prev()

prev()

Get a set of elements containing the unique previous siblings of each of the matched set of elements.

It only returns the immediately previous sibling, not all previous siblings.

Returns

jQuery

Example

The jQuery Code

$("p").prev()

Before

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

Result:

[ <div><span>Hello Again</span></div> ]
prev(expr)

prev(expr)

Get a set of elements containing the unique previous siblings of each of the matched set of elements, and filtered by an expression.

It only returns the immediately previous sibling, not all previous siblings.

Returns

jQuery

Parameters

  • expr (String): An expression to filter the previous Elements with

Example

The jQuery Code

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

Before

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

Result:

[ <div><span>Hello</span></div> ]
siblings()

siblings()

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

Returns

jQuery

Example

The jQuery Code

$("div").siblings()

Before

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

Result:

[ <p>Hello</p>, <p>And Again</p> ]
siblings(expr)

siblings(expr)

Get a set of elements containing all of the unique siblings of each of the matched set of elements, and filtered by an expression.

Returns

jQuery

Parameters

  • expr (String): An expression to filter the sibling Elements with

Example

The jQuery Code

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

Before

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

Result:

[ <p class="selected">Hello Again</p> ]
addClass(class)

addClass(class)

Adds the specified class to each of the set of matched elements.

Returns

jQuery

Parameters

  • class (String): A CSS class to add to the elements

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

[ <p class="selected">Hello</p> ]
attr(name)

attr(name)

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

Returns

Object

Parameters

  • name (String): The name of the property to access.

Example

The jQuery Code

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

Before

<img src="jquerycode.jpg"/>

Result:

jquerycode.jpg
attr(property)

attr(property)

Set a hash of key/value object properties to all matched elements. This serves as the best way to set a large number of properties on all matched elements.

Returns

jQuery

Parameters

  • property (Hash): A set of key/value pairs to set as object properties.

Example

The jQuery Code

$("img").attr({ src: "jquerycode.jpg", alt: "Test Image" });

Before

<img/>

Result:

<img src="jquerycode.jpg" alt="Test Image"/>
attr(key, value)

attr(key, value)

Set a single property to a value, on all matched elements.

Note that you can't set the name property of input elements in IE. Use $(html) or $().append(html) or $().html(html) to create elements on the fly including the name property.

Returns

jQuery

Parameters

  • key (String): The name of the property to set.
  • value (Object): The value to set the property to.

Example

The jQuery Code

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

Before

<img/>

Result:

<img src="jquerycode.jpg"/>
removeAttr(name)

removeAttr(name)

It removes an attribute from each of the matched elements.

Returns

jQuery

Parameters

  • name (String): The name of the attribute to remove.

Example

The jQuery Code

$("input").removeAttr("disabled")

Before

<input disabled="disabled"/>

Result:

<input/>
removeClass(class)

removeClass(class)

It removes the specified class from the set of matched elements.

Returns

jQuery

Parameters

  • class (String): A CSS class to remove from the elements

Example

The jQuery Code

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

Before

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

Result:

[ <p>Hello</p> ]
text()

text()

Retrieve the 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.

Returns

String

Example

The jQuery Code

$("p").text();

Before

<p>Test Paragraph.</p>

Result:

Test Paragraph.
toggleClass(class)

toggleClass(class)

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

Returns

jQuery

Parameters

  • class (String): A CSS class with which to toggle the elements

Example

The jQuery Code

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

Before

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

Result:

[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
Effects
Animations
animate(params, speed, callback)

animate(params, speed, callback)

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

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. Oterwise if the string "hide", "show", or "toggle" is provided, a default animation will be constructed for that property.

Returns

jQuery

Parameters

  • params (Hash): A set of style attributes that you wish to animate, and to what end.
  • speed (Object): 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 (Function): A function to be executed whenever the animation completes.

Example

The jQuery Code

$("p").animate({
	  height: 'toggle', opacity: 'toggle'
	}, "slow");

Example

The jQuery Code

$("p").animate({
	  left: 50, opacity: 'show'
	}, 500);
fadeIn(speed)

fadeIn(speed)

Fade in all matched elements by adjusting their opacity. 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.

Returns

jQuery

Parameters

  • speed (Object): 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).

Example

The jQuery Code

$("p").fadeIn("slow");
fadeIn(speed, callback)

fadeIn(speed, callback)

Fade in all matched elements by adjusting their opacity and firing a callback function 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.

Returns

jQuery

Parameters

  • speed (Object): 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 (Function): A function to be executed whenever the animation completes.

Example

The jQuery Code

$("p").fadeIn("slow",function(){
	  alert("Animation Done.");
	});
fadeOut(speed)

fadeOut(speed)

Fade out all matched elements by adjusting their opacity. 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.

Returns

jQuery

Parameters

  • speed (Object): 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).

Example

The jQuery Code

$("p").fadeOut("slow");
fadeOut(speed, callback)

fadeOut(speed, callback)

Fade out all matched elements by adjusting their opacity and firing a callback function 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.

Returns

jQuery

Parameters

  • speed (Object): 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 (Function): A function to be executed whenever the animation completes.

Example

The jQuery Code

$("p").fadeOut("slow",function(){
	  alert("Animation Done.");
	});
fadeTo(speed, opacity)

fadeTo(speed, opacity)

Fade the opacity of all matched elements to a specified opacity. 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.

Returns

jQuery

Parameters

  • speed (Object): 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).

Example

The jQuery Code

$("p").fadeTo("slow", 0.5);
fadeTo(speed, opacity, callback)

fadeTo(speed, opacity, callback)

Fade the opacity of all matched elements to a specified opacity and firing a callback function 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.

Returns

jQuery

Parameters

  • speed (Object): 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 (Function): A function to be executed whenever the animation completes.

Example

The jQuery Code

$("p").fadeTo("slow", 0.5, function(){
	  alert("Animation Done.");
	});
hide(speed)

hide(speed)

Hide all matched elements using a graceful animation. The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.

Returns

jQuery

Parameters

  • speed (Object): 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).

Example

The jQuery Code

$("p").hide("slow");
hide(speed, callback)

hide(speed, callback)

Hide all matched elements using a graceful animation and firing a callback function after completion. The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.

Returns

jQuery

Parameters

  • speed (Object): 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 (Function): A function to be executed whenever the animation completes.

Example

The jQuery Code

$("p").hide("slow",function(){
	  alert("Animation Done.");
	});
show(speed)

show(speed)

Show all matched elements using a graceful animation. The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.

Returns

jQuery

Parameters

  • speed (Object): 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).

Example

The jQuery Code

$("p").show("slow");
show(speed, callback)

show(speed, callback)

Show all matched elements using a graceful animation and firing a callback function after completion. The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.

Returns

jQuery

Parameters

  • speed (Object): 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 (Function): A function to be executed whenever the animation completes.

Example

The jQuery Code

$("p").show("slow",function(){
	  alert("Animation Done.");
	});
slideDown(speed)

slideDown(speed)

Reveal all matched elements by adjusting their height. Only the height is adjusted for this animation, causing all matched elements to be revealed in a "sliding" manner.

Returns

jQuery

Parameters

  • speed (Object): 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).

Example

The jQuery Code

$("p").slideDown("slow");
slideDown(speed, callback)

slideDown(speed, callback)

Reveal all matched elements by adjusting their height and firing a callback function after completion. Only the height is adjusted for this animation, causing all matched elements to be revealed in a "sliding" manner.

Returns

jQuery

Parameters

  • speed (Object): 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 (Function): A function to be executed whenever the animation completes.

Example

The jQuery Code

$("p").slideDown("slow",function(){
	  alert("Animation Done.");
	});
slideToggle(speed)

slideToggle(speed)

Toggle the visibility of all matched elements by adjusting their height. Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner.

Returns

jQuery

Parameters

  • speed (Object): 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).

Example

The jQuery Code

$("p").slideToggle("slow");
slideToggle(speed, callback)

slideToggle(speed, callback)

Toggle the visibility of all matched elements by adjusting their height and firing a callback function after completion. Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner.

Returns

jQuery

Parameters

  • speed (Object): 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 (Function): A function to be executed whenever the animation completes.

Example

The jQuery Code

$("p").slideToggle("slow",function(){
	  alert("Animation Done.");
	});
slideUp(speed)

slideUp(speed)

Hide all matched elements by adjusting their height. Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner.

Returns

jQuery

Parameters

  • speed (Object): 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).

Example

The jQuery Code

$("p").slideUp("slow");
slideUp(speed, callback)

slideUp(speed, callback)

Hide all matched elements by adjusting their height and firing a callback function after completion. Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner.

Returns

jQuery

Parameters

  • speed (Object): 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 (Function): A function to be executed whenever the animation completes.

Example

The jQuery Code

$("p").slideUp("slow",function(){
	  alert("Animation Done.");
	});
hide()

hide()

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

Returns

jQuery

Example

The jQuery Code

$("p").hide()

Before

<p>Hello</p>

Result:

[ <p style="display: none">Hello</p> ]
	
	var pass = true, div = $("div");
	div.hide().each(function(){
	  if ( this.style.display != "none" ) pass = false;
	});
	ok( pass, "Hide" );
show()

show()

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

Returns

jQuery

Example

The jQuery Code

$("p").show()

Before

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

Result:

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

toggle()

Toggles each of the set of matched elements. If they are shown, toggle makes them hidden. If they are hidden, toggle makes them shown.

Returns

jQuery

Example

The jQuery Code

$("p").toggle()

Before

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

Result:

[ <p style="display: none">Hello</p>, <p style="display: block">Hello Again</p> ]
Events
Browser
error()

error()

Trigger the error event of each matched element. This causes all of the functions that have been bound to thet error event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").error();

Before

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

Result:

alert('Hello');
error(fn)

error(fn)

Bind a function to the error event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the error event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

load(fn)

Bind a function to the load event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the load event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

oneerror(fn)

Bind a function to the error event of each matched element, which will only be executed once. Unlike a call to the normal .error() method, calling .oneerror() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the error event on each of the matched elements.

Example

The jQuery Code

$("p").oneerror( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first error
oneload(fn)

oneload(fn)

Bind a function to the load event of each matched element, which will only be executed once. Unlike a call to the normal .load() method, calling .oneload() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the load event on each of the matched elements.

Example

The jQuery Code

$("p").oneload( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first load
oneresize(fn)

oneresize(fn)

Bind a function to the resize event of each matched element, which will only be executed once. Unlike a call to the normal .resize() method, calling .oneresize() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the resize event on each of the matched elements.

Example

The jQuery Code

$("p").oneresize( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first resize
onescroll(fn)

onescroll(fn)

Bind a function to the scroll event of each matched element, which will only be executed once. Unlike a call to the normal .scroll() method, calling .onescroll() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the scroll event on each of the matched elements.

Example

The jQuery Code

$("p").onescroll( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first scroll
oneunload(fn)

oneunload(fn)

Bind a function to the unload event of each matched element, which will only be executed once. Unlike a call to the normal .unload() method, calling .oneunload() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the unload event on each of the matched elements.

Example

The jQuery Code

$("p").oneunload( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first unload
resize()

resize()

Trigger the resize event of each matched element. This causes all of the functions that have been bound to thet resize event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").resize();

Before

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

Result:

alert('Hello');
resize(fn)

resize(fn)

Bind a function to the resize event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the resize event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

scroll()

Trigger the scroll event of each matched element. This causes all of the functions that have been bound to thet scroll event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").scroll();

Before

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

Result:

alert('Hello');
scroll(fn)

scroll(fn)

Bind a function to the scroll event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the scroll event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

unerror()

It removes all bound error events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unerror();

Before

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

Result:

<p>Hello</p>
unerror(fn)

unerror(fn)

It removes a bound error event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the error event on each of the matched elements.

Example

The jQuery Code

$("p").unerror( myFunction );

Before

<p onerror="myFunction">Hello</p>

Result:

<p>Hello</p>
unload()

unload()

It removes all bound load events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unload();

Before

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

Result:

<p>Hello</p>
unload()

unload()

Trigger the unload event of each matched element. This causes all of the functions that have been bound to thet unload event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").unload();

Before

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

Result:

alert('Hello');
unload(fn)

unload(fn)

It removes a bound load event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the load event on each of the matched elements.

Example

The jQuery Code

$("p").unload( myFunction );

Before

<p onload="myFunction">Hello</p>

Result:

<p>Hello</p>
unload(fn)

unload(fn)

Bind a function to the unload event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the unload event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

unresize()

It removes all bound resize events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unresize();

Before

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

Result:

<p>Hello</p>
unresize(fn)

unresize(fn)

It removes a bound resize event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the resize event on each of the matched elements.

Example

The jQuery Code

$("p").unresize( myFunction );

Before

<p onresize="myFunction">Hello</p>

Result:

<p>Hello</p>
unscroll()

unscroll()

It removes all bound scroll events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unscroll();

Before

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

Result:

<p>Hello</p>
unscroll(fn)

unscroll(fn)

It removes a bound scroll event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the scroll event on each of the matched elements.

Example

The jQuery Code

$("p").unscroll( myFunction );

Before

<p onscroll="myFunction">Hello</p>

Result:

<p>Hello</p>
ununload()

ununload()

It removes all bound unload events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").ununload();

Before

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

Result:

<p>Hello</p>
ununload(fn)

ununload(fn)

It removes a bound unload event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the unload event on each of the matched elements.

Example

The jQuery Code

$("p").ununload( myFunction );

Before

<p onunload="myFunction">Hello</p>

Result:

<p>Hello</p>
Form
change()

change()

Trigger the change event of each matched element. This causes all of the functions that have been bound to thet change event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").change();

Before

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

Result:

alert('Hello');
change(fn)

change(fn)

Bind a function to the change event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the change event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

onechange(fn)

Bind a function to the change event of each matched element, which will only be executed once. Unlike a call to the normal .change() method, calling .onechange() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the change event on each of the matched elements.

Example

The jQuery Code

$("p").onechange( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first change
oneselect(fn)

oneselect(fn)

Bind a function to the select event of each matched element, which will only be executed once. Unlike a call to the normal .select() method, calling .oneselect() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the select event on each of the matched elements.

Example

The jQuery Code

$("p").oneselect( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first select
onesubmit(fn)

onesubmit(fn)

Bind a function to the submit event of each matched element, which will only be executed once. Unlike a call to the normal .submit() method, calling .onesubmit() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the submit event on each of the matched elements.

Example

The jQuery Code

$("p").onesubmit( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first submit
select()

select()

Trigger the select event of each matched element. This causes all of the functions that have been bound to thet select event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").select();

Before

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

Result:

alert('Hello');
select(fn)

select(fn)

Bind a function to the select event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the select event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

submit()

Trigger the submit event of each matched element. This causes all of the functions that have been bound to thet submit event to be executed.

Note: This does not execute the submit method of the form element! If you need to submit the form via code, you have to use the DOM method, eg. $("form")[0].submit();

Returns

jQuery

Example

Triggers all submit events registered for forms, but does not submit the form

The jQuery Code

$("form").submit();
submit(fn)

submit(fn)

Bind a function to the submit event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the submit event on each of the matched elements.

Example

Prevents the form submission when the input has no value entered.

The jQuery Code

$("#myform").submit( function() {
	  return $("input", this).val().length > 0;
	} );

Before

<form id="myform"><input /></form>
unchange()

unchange()

It removes all bound change events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unchange();

Before

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

Result:

<p>Hello</p>
unchange(fn)

unchange(fn)

It removes a bound change event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the change event on each of the matched elements.

Example

The jQuery Code

$("p").unchange( myFunction );

Before

<p onchange="myFunction">Hello</p>

Result:

<p>Hello</p>
unselect()

unselect()

It removes all bound select events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unselect();

Before

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

Result:

<p>Hello</p>
unselect(fn)

unselect(fn)

It removes a bound select event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the select event on each of the matched elements.

Example

The jQuery Code

$("p").unselect( myFunction );

Before

<p onselect="myFunction">Hello</p>

Result:

<p>Hello</p>
unsubmit()

unsubmit()

It removes all bound submit events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unsubmit();

Before

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

Result:

<p>Hello</p>
unsubmit(fn)

unsubmit(fn)

It removes a bound submit event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the submit event on each of the matched elements.

Example

The jQuery Code

$("p").unsubmit( myFunction );

Before

<p onsubmit="myFunction">Hello</p>

Result:

<p>Hello</p>
Keyboard
keydown()

keydown()

Trigger the keydown event of each matched element. This causes all of the functions that have been bound to thet keydown event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").keydown();

Before

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

Result:

alert('Hello');
keydown(fn)

keydown(fn)

Bind a function to the keydown event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the keydown event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

keypress()

Trigger the keypress event of each matched element. This causes all of the functions that have been bound to thet keypress event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").keypress();

Before

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

Result:

alert('Hello');
keypress(fn)

keypress(fn)

Bind a function to the keypress event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the keypress event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

keyup()

Trigger the keyup event of each matched element. This causes all of the functions that have been bound to thet keyup event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").keyup();

Before

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

Result:

alert('Hello');
keyup(fn)

keyup(fn)

Bind a function to the keyup event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the keyup event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

onekeydown(fn)

Bind a function to the keydown event of each matched element, which will only be executed once. Unlike a call to the normal .keydown() method, calling .onekeydown() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the keydown event on each of the matched elements.

Example

The jQuery Code

$("p").onekeydown( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first keydown
onekeypress(fn)

onekeypress(fn)

Bind a function to the keypress event of each matched element, which will only be executed once. Unlike a call to the normal .keypress() method, calling .onekeypress() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the keypress event on each of the matched elements.

Example

The jQuery Code

$("p").onekeypress( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first keypress
onekeyup(fn)

onekeyup(fn)

Bind a function to the keyup event of each matched element, which will only be executed once. Unlike a call to the normal .keyup() method, calling .onekeyup() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the keyup event on each of the matched elements.

Example

The jQuery Code

$("p").onekeyup( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first keyup
unkeydown()

unkeydown()

It removes all bound keydown events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unkeydown();

Before

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

Result:

<p>Hello</p>
unkeydown(fn)

unkeydown(fn)

It removes a bound keydown event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the keydown event on each of the matched elements.

Example

The jQuery Code

$("p").unkeydown( myFunction );

Before

<p onkeydown="myFunction">Hello</p>

Result:

<p>Hello</p>
unkeypress()

unkeypress()

It removes all bound keypress events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unkeypress();

Before

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

Result:

<p>Hello</p>
unkeypress(fn)

unkeypress(fn)

It removes a bound keypress event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the keypress event on each of the matched elements.

Example

The jQuery Code

$("p").unkeypress( myFunction );

Before

<p onkeypress="myFunction">Hello</p>

Result:

<p>Hello</p>
unkeyup()

unkeyup()

It removes all bound keyup events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unkeyup();

Before

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

Result:

<p>Hello</p>
unkeyup(fn)

unkeyup(fn)

It removes a bound keyup event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the keyup event on each of the matched elements.

Example

The jQuery Code

$("p").unkeyup( myFunction );

Before

<p onkeyup="myFunction">Hello</p>

Result:

<p>Hello</p>
Mouse
click()

click()

Trigger the click event of each matched element. This causes all of the functions that have been bound to thet click event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").click();

Before

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

Result:

alert('Hello');
click(fn)

click(fn)

Bind a function to the click event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the click event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

dblclick()

Trigger the dblclick event of each matched element. This causes all of the functions that have been bound to thet dblclick event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").dblclick();

Before

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

Result:

alert('Hello');
dblclick(fn)

dblclick(fn)

Bind a function to the dblclick event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the dblclick event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

mousedown()

Trigger the mousedown event of each matched element. This causes all of the functions that have been bound to thet mousedown event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").mousedown();

Before

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

Result:

alert('Hello');
mousedown(fn)

mousedown(fn)

Bind a function to the mousedown event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the mousedown event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

mousemove()

Trigger the mousemove event of each matched element. This causes all of the functions that have been bound to thet mousemove event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").mousemove();

Before

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

Result:

alert('Hello');
mousemove(fn)

mousemove(fn)

Bind a function to the mousemove event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the mousemove event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

mouseout()

Trigger the mouseout event of each matched element. This causes all of the functions that have been bound to thet mouseout event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").mouseout();

Before

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

Result:

alert('Hello');
mouseout(fn)

mouseout(fn)

Bind a function to the mouseout event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the mouseout event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

mouseover()

Trigger the mouseover event of each matched element. This causes all of the functions that have been bound to thet mousedown event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").mouseover();

Before

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

Result:

alert('Hello');
mouseover(fn)

mouseover(fn)

Bind a function to the mouseover event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the mousedown event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

mouseup()

Trigger the mouseup event of each matched element. This causes all of the functions that have been bound to thet mouseup event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").mouseup();

Before

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

Result:

alert('Hello');
mouseup(fn)

mouseup(fn)

Bind a function to the mouseup event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the mouseup event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

oneclick(fn)

Bind a function to the click event of each matched element, which will only be executed once. Unlike a call to the normal .click() method, calling .oneclick() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the click event on each of the matched elements.

Example

The jQuery Code

$("p").oneclick( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first click
onedblclick(fn)

onedblclick(fn)

Bind a function to the dblclick event of each matched element, which will only be executed once. Unlike a call to the normal .dblclick() method, calling .onedblclick() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the dblclick event on each of the matched elements.

Example

The jQuery Code

$("p").onedblclick( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first dblclick
onemousedown(fn)

onemousedown(fn)

Bind a function to the mousedown event of each matched element, which will only be executed once. Unlike a call to the normal .mousedown() method, calling .onemousedown() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the mousedown event on each of the matched elements.

Example

The jQuery Code

$("p").onemousedown( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first mousedown
onemousemove(fn)

onemousemove(fn)

Bind a function to the mousemove event of each matched element, which will only be executed once. Unlike a call to the normal .mousemove() method, calling .onemousemove() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the mousemove event on each of the matched elements.

Example

The jQuery Code

$("p").onemousemove( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first mousemove
onemouseout(fn)

onemouseout(fn)

Bind a function to the mouseout event of each matched element, which will only be executed once. Unlike a call to the normal .mouseout() method, calling .onemouseout() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the mouseout event on each of the matched elements.

Example

The jQuery Code

$("p").onemouseout( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first mouseout
onemouseover(fn)

onemouseover(fn)

Bind a function to the mouseover event of each matched element, which will only be executed once. Unlike a call to the normal .mouseover() method, calling .onemouseover() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the mouseover event on each of the matched elements.

Example

The jQuery Code

$("p").onemouseover( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first mouseover
onemouseup(fn)

onemouseup(fn)

Bind a function to the mouseup event of each matched element, which will only be executed once. Unlike a call to the normal .mouseup() method, calling .onemouseup() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the mouseup event on each of the matched elements.

Example

The jQuery Code

$("p").onemouseup( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first mouseup
unclick()

unclick()

It removes all bound click events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unclick();

Before

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

Result:

<p>Hello</p>
unclick(fn)

unclick(fn)

It removes a bound click event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the click event on each of the matched elements.

Example

The jQuery Code

$("p").unclick( myFunction );

Before

<p onclick="myFunction">Hello</p>

Result:

<p>Hello</p>
undblclick()

undblclick()

It removes all bound dblclick events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").undblclick();

Before

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

Result:

<p>Hello</p>
undblclick(fn)

undblclick(fn)

It removes a bound dblclick event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the dblclick event on each of the matched elements.

Example

The jQuery Code

$("p").undblclick( myFunction );

Before

<p ondblclick="myFunction">Hello</p>

Result:

<p>Hello</p>
unmousedown()

unmousedown()

It removes all bound mousedown events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unmousedown();

Before

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

Result:

<p>Hello</p>
unmousedown(fn)

unmousedown(fn)

It removes a bound mousedown event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the mousedown event on each of the matched elements.

Example

The jQuery Code

$("p").unmousedown( myFunction );

Before

<p onmousedown="myFunction">Hello</p>

Result:

<p>Hello</p>
unmousemove()

unmousemove()

It removes all bound mousemove events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unmousemove();

Before

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

Result:

<p>Hello</p>
unmousemove(fn)

unmousemove(fn)

It removes a bound mousemove event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the mousemove event on each of the matched elements.

Example

The jQuery Code

$("p").unmousemove( myFunction );

Before

<p onmousemove="myFunction">Hello</p>

Result:

<p>Hello</p>
unmouseout()

unmouseout()

It removes all bound mouseout events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unmouseout();

Before

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

Result:

<p>Hello</p>
unmouseout(fn)

unmouseout(fn)

It removes a bound mouseout event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the mouseout event on each of the matched elements.

Example

The jQuery Code

$("p").unmouseout( myFunction );

Before

<p onmouseout="myFunction">Hello</p>

Result:

<p>Hello</p>
unmouseover()

unmouseover()

It removes all bound mouseover events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unmouseover();

Before

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

Result:

<p>Hello</p>
unmouseover(fn)

unmouseover(fn)

It removes a bound mouseover event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the mouseover event on each of the matched elements.

Example

The jQuery Code

$("p").unmouseover( myFunction );

Before

<p onmouseover="myFunction">Hello</p>

Result:

<p>Hello</p>
unmouseup()

unmouseup()

It removes all bound mouseup events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unmouseup();

Before

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

Result:

<p>Hello</p>
unmouseup(fn)

unmouseup(fn)

It removes a bound mouseup event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the mouseup event on each of the matched elements.

Example

The jQuery Code

$("p").unmouseup( myFunction );

Before

<p onmouseup="myFunction">Hello</p>

Result:

<p>Hello</p>
UI
blur()

blur()

Trigger the blur event of each matched element. This causes all of the functions that have been bound to thet blur event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").blur();

Before

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

Result:

alert('Hello');
blur(fn)

blur(fn)

Bind a function to the blur event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the blur event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

focus()

Trigger the focus event of each matched element. This causes all of the functions that have been bound to thet focus event to be executed.

Returns

jQuery

Example

The jQuery Code

$("p").focus();

Before

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

Result:

alert('Hello');
focus(fn)

focus(fn)

Bind a function to the focus event of each matched element.

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the focus event on each of the matched elements.

Example

The jQuery Code

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

Before

<p>Hello</p>

Result:

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

oneblur(fn)

Bind a function to the blur event of each matched element, which will only be executed once. Unlike a call to the normal .blur() method, calling .oneblur() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the blur event on each of the matched elements.

Example

The jQuery Code

$("p").oneblur( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first blur
onefocus(fn)

onefocus(fn)

Bind a function to the focus event of each matched element, which will only be executed once. Unlike a call to the normal .focus() method, calling .onefocus() causes the bound function to be only executed the first time it is triggered, and never again (unless it is re-bound).

Returns

jQuery

Parameters

  • fn (Function): A function to bind to the focus event on each of the matched elements.

Example

The jQuery Code

$("p").onefocus( function() { alert("Hello"); } );

Before

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

Result:

alert('Hello'); // Only executed for the first focus
unblur()

unblur()

It removes all bound blur events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unblur();

Before

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

Result:

<p>Hello</p>
unblur(fn)

unblur(fn)

It removes a bound blur event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the blur event on each of the matched elements.

Example

The jQuery Code

$("p").unblur( myFunction );

Before

<p onblur="myFunction">Hello</p>

Result:

<p>Hello</p>
unfocus()

unfocus()

It removes all bound focus events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unfocus();

Before

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

Result:

<p>Hello</p>
unfocus(fn)

unfocus(fn)

It removes a bound focus event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • fn (Function): A function to unbind from the focus event on each of the matched elements.

Example

The jQuery Code

$("p").unfocus( myFunction );

Before

<p onfocus="myFunction">Hello</p>

Result:

<p>Hello</p>
bind(type, fn)

bind(type, fn)

Binds a handler to a particular event (like click) for each matched element. 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.

Returns

jQuery

Parameters

  • type (String): An event type
  • fn (Function): A function to bind to the event on each of the set of matched elements

Example

The jQuery Code

$("p").bind( "click", function() {
	  alert( $(this).text() );
	} )

Before

<p>Hello</p>

Result:

alert("Hello")

Example

Cancel a default action and prevent it from bubbling by returning false from your function.

The jQuery Code

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

Example

Cancel only the default action by using the preventDefault method.

The jQuery Code

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

Example

Stop only an event from bubbling by using the stopPropagation method.

The jQuery Code

$("form").bind( "submit", function(event) {
	  event.stopPropagation();
	} )
hover(over, out)

hover(over, out)

A method for simulating 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).

Returns

jQuery

Parameters

  • over (Function): The function to fire whenever the mouse is moved over a matched element.
  • out (Function): The function to fire whenever the mouse is moved off of a matched element.

Example

The jQuery Code

$("p").hover(function(){
	  $(this).addClass("over");
	},function(){
	  $(this).addClass("out");
	});
ready(fn)

ready(fn)

Bind 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 exactly what 99.99% of all Javascript code needs to run.

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.

Returns

jQuery

Parameters

  • fn (Function): The function to be executed when the DOM is ready.

Example

The jQuery Code

$(document).ready(function(){ Your code here... });
toggle(even, odd)

toggle(even, odd)

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.

Returns

jQuery

Parameters

  • even (Function): The function to execute on every even click.
  • odd (Function): The function to execute on every odd click.

Example

The jQuery Code

$("p").toggle(function(){
	  $(this).addClass("selected");
	},function(){
	  $(this).removeClass("selected");
	});
trigger(type)

trigger(type)

Trigger a type of event on every matched element.

Returns

jQuery

Parameters

  • type (String): An event type to trigger.

Example

The jQuery Code

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

Before

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

Result:

alert('hello')
unbind()

unbind()

It removes all bound events from each of the matched elements.

Returns

jQuery

Example

The jQuery Code

$("p").unbind()

Before

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

Result:

[ <p>Hello</p> ]
unbind(type)

unbind(type)

It removes all bound events of a particular type from each of the matched elements.

Returns

jQuery

Parameters

  • type (String): An event type

Example

The jQuery Code

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

Before

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

Result:

[ <p>Hello</p> ]
unbind(type, fn)

unbind(type, fn)

The opposite of bind, removes a bound event from each of the matched elements. You must pass the identical function that was used in the original bind method.

Returns

jQuery

Parameters

  • type (String): An event type
  • fn (Function): A function to unbind from the event on each of the set of matched elements

Example

The jQuery Code

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

Before

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

Result:

[ <p>Hello</p> ]
Javascript
$.browser

$.browser

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 detections is not reliable enough, in that cases it makes sense to use browser detection. Simply try to avoid both!

A combination of browser and object detection yields quite reliable results.

Returns

Boolean

Example

Returns true if the current useragent is some version of microsoft's internet explorer

The jQuery Code

$.browser.msie

Example

Alerts "this is safari!" only for safari browsers

The jQuery Code

if($.browser.safari) { $( function() { alert("this is safari!"); } ); }
$.each(obj, fn)

$.each(obj, fn)

A generic iterator function, which can be used to seemlessly 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.

Returns

Object

Parameters

  • obj (Object): The object, or array, to iterate over.
  • fn (Function): The function that will be executed on every object.

Example

This is an example of iterating over the items in an array, accessing both the current item and its index.

The jQuery Code

$.each( [0,1,2], function(i){
	  alert( "Item #" + i + ": " + this );
	});

Example

This is an example of iterating over the properties in an Object, accessing both the current item and its key.

The jQuery Code

$.each( { name: "John", lang: "JS" }, function(i){
	  alert( "Name: " + i + ", Value: " + this );
	});
$.extend(target, property1, propertyN)

$.extend(target, property1, propertyN)

Extend one object with one or more others, returning the original, modified, object. This is a great utility for simple inheritance.

Returns

Object

Parameters

  • target (Object): The object to extend
  • property1 (Object): The object that will be merged into the first.
  • propertyN (Object): (optional) More objects to merge into the first

Example

Merge settings and options, modifying settings

The jQuery Code

var settings = { validate: false, limit: 5, name: "foo" };
	var options = { validate: true, name: "bar" };
	jQuery.extend(settings, options);

Result:

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

Example

Merge defaults and options, without modifying the defaults

The jQuery Code

var defaults = { validate: false, limit: 5, name: "foo" };
	var options = { validate: true, name: "bar" };
	var settings = jQuery.extend({}, defaults, options);

Result:

settings == { validate: true, limit: 5, name: "bar" }
$.grep(array, fn, inv)

$.grep(array, fn, inv)

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 should return 'true' if you wish to keep the item in the array, false if it should be removed.

Returns

Array

Parameters

  • array (Array): The Array to find items in.
  • fn (Function): The function to process each item against.
  • inv (Boolean): Invert the selection - select the opposite of the function.

Example

The jQuery Code

$.grep( [0,1,2], function(i){
	  return i > 0;
	});

Result:

[1, 2]
$.map(array, fn)

$.map(array, fn)

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.

Returns

Array

Parameters

  • array (Array): The Array to translate.
  • fn (Function): The function to process each item against.

Example

The jQuery Code

$.map( [0,1,2], function(i){
	  return i + 4;
	});

Result:

[4, 5, 6]

Example

The jQuery Code

$.map( [0,1,2], function(i){
	  return i > 0 ? i + 1 : null;
	});

Result:

[2, 3]

Example

The jQuery Code

$.map( [0,1,2], function(i){
	  return [ i, i + 1 ];
	});

Result:

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

$.merge(first, second)

Merge two arrays together, removing all duplicates. The final order or the new array is: All the results from the first array, followed by the unique results from the second array.

Returns

Array

Parameters

  • first (Array): The first array to merge.
  • second (Array): The second array to merge.

Example

The jQuery Code

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

Result:

[0,1,2,3,4]

Example

The jQuery Code

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

Result:

[3,2,1,4]
$.trim(str)

$.trim(str)

It removes the whitespace from the beginning and end of a string.

Returns

String

Parameters

  • str (String): The string to trim.

Example

The jQuery Code

$.trim("  hello, how are you?  ");

Result:

"hello, how are you?"
    More Tutorials..
> jquery.com - http://docs.jquery.com/Tutorials
Close
E-mail This Post