jQuery documentation jQuery documentation| expr | String | An expression to search with |
|---|---|---|
| context | Element|jQuery | (optional) A DOM Element, Document or jQuery to use as 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.
Finds all p elements that are children of a div element.
<p>one</p> <div><p>two</p></div> <p>three</p>
$("div > p")
[ <p>two</p> ]
Searches for all inputs of type radio within the first form in the document
$("input:radio", document.forms[0])
This finds all div elements within the specified XML document.
$("div", xml.responseXML)
| html | String | A string of HTML to create on the fly. |
|---|
Create DOM elements on-the-fly from the provided String of raw HTML.
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.
$("<div><p>Hello</p></div>").appendTo("#body")
| elems | Element|Array | DOM element(s) to be encapsulated by a jQuery object. |
|---|
Wrap jQuery functionality around a single or multiple DOM Element(s).
This function also accepts XML Documents and Window objects as valid arguments (even though they are not DOM Elements).
Sets the background color of the page to black.
$(document.body).background( "black" );
Hides all the input elements within a form
$( myForm.elements ).hide()
| fn | Function | The function to execute when the DOM is ready. |
|---|
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.
See ready(Function) for details about the ready event.
Executes the function when the DOM is ready to be used.
$(function(){
// Document is ready
});
Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias.
jQuery(function($) {
// Your code using failsafe $ alias here...
});
The current version of jQuery.
The number of elements currently matched.
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").length;
2
The number of elements currently matched.
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").size();
2
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).
Selects all images in the document and returns the DOM Elements as an Array
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get();
[ <img src="test1.jpg"/> <img src="test2.jpg"/> ]
| num | Number | Access the element in the Nth position. |
|---|
Access a single matched element. num is used to access the Nth element matched.
Selects all images in the document and returns the first one
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get(0);
[ <img src="test1.jpg"/> ]
| elems | Elements | An array of elements |
|---|
Set the jQuery object to an array of elements, while maintaining the stack.
$("img").pushStack([ document.body ]);
$("img").pushStack() == [ document.body ]
| elems | Elements | An array of elements |
|---|
Set the jQuery object to an array of elements. This operation is completely destructive - be sure to use .pushStack() if you wish to maintain the jQuery stack.
$("img").setArray([ document.body ]);
$("img").setArray() == [ document.body ]
| fn | Function | A function to execute |
|---|
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.
Iterates over two images and sets their src property
<img/><img/>
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
<img src="test0.jpg"/><img src="test1.jpg"/>
| subject | Element | Object to search for |
|---|
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 the index for the element with ID foobar
<div id="foobar"><b></b><span id="foo"></span></div>
$("*").index( $('#foobar')[0] )
0
Returns the index for the element with ID foo within another element
<div id="foobar"><b></b><span id="foo"></span></div>
$("*").index( $('#foo')[0] )
2
Returns -1, as there is no element with ID bar
<div id="foobar"><b></b><span id="foo"></span></div>
$("*").index( $('#bar')[0] )
-1
| args | Array | |
|---|---|---|
| table | Boolean | Insert TBODY in TABLEs if one is not found. |
| dir | Number | If dir<0, process args in reverse order. |
| fn | Function | The function doing the DOM manipulation. |
| prop | Object | The object that will be merged into the jQuery object |
|---|
Extends the jQuery object itself. Can be used to add functions into the jQuery namespace and to add plugin methods (plugins).
Adds two plugin methods.
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
$("input[@type=checkbox]").check();
$("input[@type=radio]").uncheck();
Adds two functions into the jQuery namespace
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
Run this function to give control of the $ variable back to whichever library first implemented it. This helps to make sure that jQuery doesn't conflict with the $ object of other libraries.
By using this function, you will only be able to access jQuery using the 'jQuery' variable. For example, where you used to do $("div p"), you now must do jQuery("div p").
Maps the original object that was referenced by $ back to $
jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
Reverts the $ alias and then creates and executes a function to provide the $ as a jQuery alias inside the functions scope. Inside the function the original $ object is not available. This works well for most plugins that don't rely on any other library.
jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library
| pos | Number | The index of the element that you wish to limit to. |
|---|
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.
<p>This is just a test.</p><p>So is this</p>
$("p").eq(1)
[ <p>So is this</p> ]
| pos | Number | Reduce the set to all elements below this position. |
|---|
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.
<p>This is just a test.</p><p>So is this</p>
$("p").lt(1)
[ <p>This is just a test.</p> ]
| pos | Number | Reduce the set to all elements after this position. |
|---|
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.
<p>This is just a test.</p><p>So is this</p>
$("p").gt(0)
[ <p>So is this</p> ]