Visual jQuery 1.1 (More...) for jQuery 1.0.4
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.
jQuery
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")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).
jQuery
$(document).find("div > p")<p>one</p> <div><p>two</p></div> <p>three</p>
[ <p>two</p> ]
Sets the background color of the page to black.
$(document.body).background( "black" );
Wrap jQuery functionality around a set of DOM Elements.
jQuery
Hides all the input elements within a form
$( myForm.elements ).hide()
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.
jQuery
Executes the function when the DOM is ready to be used.
$(function(){
// Document is ready
});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.
jQuery
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).
var div = $("div");
$( div ).find("p");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.
jQuery
This finds all p elements that are children of a div element.
$("div > p")<p>one</p> <div><p>two</p></div> <p>three</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)Extends the jQuery object itself. Can be used to add functions into the jQuery namespace and to add plugin methods (plugins).
Object
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; }
});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.
jQuery
Iterates over two images and sets their src property
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});<img/> <img/>
<img src="test0.jpg"/> <img src="test1.jpg"/>
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.
jQuery
$("p").eq(1)<p>This is just a test.</p><p>So is this</p>
[ <p>So is this</p> ]
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).
Array<Element>
$("img").get();<img src="test1.jpg"/> <img src="test2.jpg"/>
[ <img src="test1.jpg"/> <img src="test2.jpg"/> ]
Access a single matched element. num is used to access the Nth element matched.
Element
$("img").get(1);<img src="test1.jpg"/> <img src="test2.jpg"/>
[ <img src="test1.jpg"/> ]
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.
jQuery
$("p").gt(0)<p>This is just a test.</p><p>So is this</p>
[ <p>So is this</p> ]
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.
Number
$("*").index(document.getElementById('foobar'))<div id="foobar"></div><b></b><span id="foo"></span>
0
$("*").index(document.getElementById('foo'))<div id="foobar"></div><b></b><span id="foo"></span>
2
$("*").index(document.getElementById('bar'))<div id="foobar"></div><b></b><span id="foo"></span>
-1
The number of elements currently matched.
Number
$("img").length;<img src="test1.jpg"/> <img src="test2.jpg"/>
2
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.
jQuery
$("p").lt(1)<p>This is just a test.</p><p>So is this</p>
[ <p>This is just a test.</p> ]
The number of elements currently matched.
Number
$("img").size();<img src="test1.jpg"/> <img src="test2.jpg"/>
2
Get the current href of the first matched element.
String
$("a").href();<a href="test.html">my link</a>
"test.html"
Set the href of every matched element.
jQuery
$("a").href("test2.html");<a href="test.html">my link</a>
<a href="test2.html">my link</a>
Get the html contents of the first matched element.
String
$("div").html();<div><input/></div>
<input/>
Set the html contents of every matched element.
jQuery
$("div").html("<b>new stuff</b>");<div><input/></div>
<div><b>new stuff</b></div>
Get the current id of the first matched element.
String
$("input").id();<input type="text" id="test" value="some text"/>
"test"
Set the id of every matched element.
jQuery
$("input").id("newid");<input type="text" id="test" value="some text"/>
<input type="text" id="newid" value="some text"/>
Get the current name of the first matched element.
String
$("input").name();<input type="text" name="username"/>
"username"
Set the name of every matched element.
jQuery
$("input").name("user");<input type="text" name="username"/>
<input type="text" name="user"/>
Get the current rel of the first matched element.
String
$("a").rel();<a href="test.html" rel="nofollow">my link</a>
"nofollow"
Set the rel of every matched element.
jQuery
$("a").rel("nofollow");<a href="test.html">my link</a>
<a href="test.html" rel="nofollow">my link</a>
Get the current src of the first matched element.
String
$("img").src();<img src="test.jpg" title="my image"/>
"test.jpg"
Set the src of every matched element.
jQuery
$("img").src("test2.jpg");<img src="test.jpg" title="my image"/>
<img src="test2.jpg" title="my image"/>
Get the current title of the first matched element.
String
$("img").title();<img src="test.jpg" title="my image"/>
"my image"
Set the title of every matched element.
jQuery
$("img").title("new title");<img src="test.jpg" title="my image"/>
<img src="test.jpg" title="new image"/>
Get the current value of the first matched element.
String
$("input").val();<input type="text" value="some text"/>
"some text"
Set the value of every matched element.
jQuery
$("input").val("test");<input type="text" value="some text"/>
<input type="text" value="test"/>
Insert any number of dynamically generated elements after each of the matched elements.
jQuery
$("p").after("<b>Hello</b>");<p>I would like to say: </p>
<p>I would like to say: </p><b>Hello</b>
Insert an element after each of the matched elements.
jQuery
$("p").after( $("#foo")[0] );<b id="foo">Hello</b><p>I would like to say: </p>
<p>I would like to say: </p><b id="foo">Hello</b>
Insert any number of elements after each of the matched elements.
jQuery
$("p").after( $("b") );<b>Hello</b><p>I would like to say: </p>
<p>I would like to say: </p><b>Hello</b>
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.
jQuery
$("p").append("<b>Hello</b>");<p>I would like to say: </p>
<p>I would like to say: <b>Hello</b></p>
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.
jQuery
$("p").append( $("#foo")[0] );<p>I would like to say: </p><b id="foo">Hello</b>
<p>I would like to say: <b id="foo">Hello</b></p>
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.
jQuery
$("p").append( $("b") );<p>I would like to say: </p><b>Hello</b>
<p>I would like to say: <b>Hello</b></p>
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.
jQuery
$("p").appendTo("#foo");<p>I would like to say: </p><div id="foo"></div>
<div id="foo"><p>I would like to say: </p></div>
Insert any number of dynamically generated elements before each of the matched elements.
jQuery
$("p").before("<b>Hello</b>");<p>I would like to say: </p>
<b>Hello</b><p>I would like to say: </p>
Insert an element before each of the matched elements.
jQuery
$("p").before( $("#foo")[0] );<p>I would like to say: </p><b id="foo">Hello</b>
<b id="foo">Hello</b><p>I would like to say: </p>
Insert any number of elements before each of the matched elements.
jQuery
$("p").before( $("b") );<p>I would like to say: </p><b>Hello</b>
<b>Hello</b><p>I would like to say: </p>
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.
jQuery
$("b").clone().prependTo("p");<b>Hello</b><p>, how are you?</p>
<b>Hello</b><p><b>Hello</b>, how are you?</p>
Removes all child nodes from the set of matched elements.
jQuery
$("p").empty()<p>Hello, <span>Person</span> <a href="#">and person</a></p>
[ <p></p> ]
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.
jQuery
$("p").insertAfter("#foo");<p>I would like to say: </p><div id="foo">Hello</div>
<div id="foo">Hello</div><p>I would like to say: </p>
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.
jQuery
$("p").insertBefore("#foo");<div id="foo">Hello</div><p>I would like to say: </p>
<p>I would like to say: </p><div id="foo">Hello</div>
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.
jQuery
$("p").prepend("<b>Hello</b>");<p>I would like to say: </p>
<p><b>Hello</b>I would like to say: </p>
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.
jQuery
$("p").prepend( $("#foo")[0] );<p>I would like to say: </p><b id="foo">Hello</b>
<p><b id="foo">Hello</b>I would like to say: </p>
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.
jQuery
$("p").prepend( $("b") );<p>I would like to say: </p><b>Hello</b>
<p><b>Hello</b>I would like to say: </p>
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.
jQuery
$("p").prependTo("#foo");<p>I would like to say: </p><div id="foo"><b>Hello</b></div>
<div id="foo"><p>I would like to say: </p><b>Hello</b></div>
Removes all matched elements from the DOM. This does NOT remove them from the jQuery object, allowing you to use the matched elements further.
jQuery
$("p").remove();<p>Hello</p> how are <p>you?</p>
how are
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.
jQuery
$("p").remove(".hello");<p class="hello">Hello</p> how are <p>you?</p>
how are <p>you?</p>
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.
jQuery
$("p").wrap("<div class='wrap'></div>");<p>Test Paragraph.</p>
<div class='wrap'><p>Test Paragraph.</p></div>
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.
jQuery
$("p").wrap( document.getElementById('content') );<p>Test Paragraph.</p><div id="content"></div>
<div id="content"><p>Test Paragraph.</p></div>
Adds the elements matched by the expression to the jQuery object. This can be used to concatenate the result sets of two expressions.
jQuery
$("p").add("span")<p>Hello</p><p><span>Hello Again</span></p>
[ <p>Hello</p>, <span>Hello Again</span> ]
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.
jQuery
$("p").add([document.getElementById("a"), document.getElementById("b")])<p>Hello</p><p><span id="a">Hello Again</span><span id="b">And Again</span></p>
[ <p>Hello</p>, <span id="a">Hello Again</span>, <span id="b">And Again</span> ]
Adds a single Element to the set of matched elements. This is used to add a single Element to a jQuery object.
jQuery
$("p").add( document.getElementById("a") )<p>Hello</p><p><span id="a">Hello Again</span></p>
[ <p>Hello</p>, <span id="a">Hello Again</span> ]
Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).
jQuery
$("span").ancestors()<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
[ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]
Get a set of elements containing the unique ancestors of the matched set of elements, and filtered by an expression.
jQuery
$("span").ancestors("p")<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
[ <p><span>Hello</span></p> ]
Get a set of elements containing all of the unique children of each of the matched set of elements.
jQuery
$("div").children()<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
[ <span>Hello Again</span> ]
Get a set of elements containing all of the unique children of each of the matched set of elements, and filtered by an expression.
jQuery
$("div").children(".selected")<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
[ <p class="selected">Hello Again</p> ]
Filter the set of elements to those that contain the specified text.
jQuery
$("p").contains("test")<p>This is just a test.</p><p>So is this</p>
[ <p>This is just a test.</p> ]
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.
jQuery
$("p").find("span").end();<p><span>Hello</span>, how are you?</p>
$("p").find("span").end() == [ <p>...</p> ]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.
jQuery
$("p").filter(".selected")<p class="selected">Hello</p><p>How are you?</p>
$("p").filter(".selected") == [ <p class="selected">Hello</p> ]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.
jQuery
$("p").filter([".selected", ":first"])<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
$("p").filter([".selected", ":first"]) == [ <p>Hello</p>, <p class="selected">And Again</p> ]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.
jQuery
$("p").find("span");<p><span>Hello</span>, how are you?</p>
$("p").find("span") == [ <span>Hello</span> ]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.
Boolean
Returns true, because the parent of the input is a form element
$("input[@type='checkbox']").parent().is("form")<form><input type="checkbox" /></form>
true
Returns false, because the parent of the input is a p element
$("input[@type='checkbox']").parent().is("form")<form><p><input type="checkbox" /></p></form>
false
An invalid expression always returns false.
$("form").is(null)<form></form>
false
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.
jQuery
$("p").next()<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
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.
jQuery
$("p").next(".selected")<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
[ <p class="selected">Hello Again</p> ]
Removes the specified Element from the set of matched elements. This method is used to remove a single Element from a jQuery object.
jQuery
$("p").not( document.getElementById("selected") )<p>Hello</p><p id="selected">Hello Again</p>
[ <p>Hello</p> ]
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.
jQuery
$("p").not("#selected")<p>Hello</p><p id="selected">Hello Again</p>
[ <p>Hello</p> ]
Get a set of elements containing the unique parents of the matched set of elements.
jQuery
$("p").parent()<div><p>Hello</p><p>Hello</p></div>
[ <div><p>Hello</p><p>Hello</p></div> ]
Get a set of elements containing the unique parents of the matched set of elements, and filtered by an expression.
jQuery
$("p").parent(".selected")<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
[ <div class="selected"><p>Hello Again</p></div> ]
Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).
jQuery
$("span").ancestors()<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
[ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]
Get a set of elements containing the unique ancestors of the matched set of elements, and filtered by an expression.
jQuery
$("span").ancestors("p")<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
[ <p><span>Hello</span></p> ]
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.
jQuery
$("p").prev()<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
[ <div><span>Hello Again</span></div> ]
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.
jQuery
$("p").prev(".selected")<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
[ <div><span>Hello</span></div> ]
Get a set of elements containing all of the unique siblings of each of the matched set of elements.
jQuery
$("div").siblings()<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
[ <p>Hello</p>, <p>And Again</p> ]
Get a set of elements containing all of the unique siblings of each of the matched set of elements, and filtered by an expression.
jQuery
$("div").siblings(".selected")<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
[ <p class="selected">Hello Again</p> ]
Adds the specified class to each of the set of matched elements.
jQuery
$("p").addClass("selected")<p>Hello</p>
[ <p class="selected">Hello</p> ]
Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element.
Object
$("img").attr("src");<img src="test.jpg"/>
test.jpg
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.
jQuery
$("img").attr({ src: "test.jpg", alt: "Test Image" });<img/>
<img src="test.jpg" alt="Test Image"/>
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.
jQuery
$("img").attr("src","test.jpg");<img/>
<img src="test.jpg"/>
Remove an attribute from each of the matched elements.
jQuery
$("input").removeAttr("disabled")<input disabled="disabled"/>
<input/>
Removes the specified class from the set of matched elements.
jQuery
$("p").removeClass("selected")<p class="selected">Hello</p>
[ <p>Hello</p> ]
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.
String
$("p").text();<p>Test Paragraph.</p>
Test Paragraph.
Adds the specified class if it is not present, removes it if it is present.
jQuery
$("p").toggleClass("selected")<p>Hello</p><p class="selected">Hello Again</p>
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
Get the current CSS background of the first matched element.
String
$("p").background();<p style="background:blue;">This is just a test.</p>
"blue"
Set the CSS background of every matched element.
jQuery
$("p").background("blue");<p>This is just a test.</p>
<p style="background:blue;">This is just a test.</p>
Get the current CSS color of the first matched element.
String
$("p").color();<p>This is just a test.</p>
"black"
Set the CSS color of every matched element.
jQuery
$("p").color("blue");<p>This is just a test.</p>
<p style="color:blue;">This is just a test.</p>
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.
Object
Retrieves the color style of the first paragraph
$("p").css("color");<p style="color:red;">Test Paragraph.</p>
red
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.
$("p").css("fontWeight");<p style="font-weight: bold;">Test Paragraph.</p>
bold
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.
jQuery
$("p").css({ color: "red", background: "blue" });<p>Test Paragraph.</p>
<p style="color:red; background:blue;">Test Paragraph.</p>
Set a single style property to a value, on all matched elements.
jQuery
Changes the color of all paragraphs to red
$("p").css("color","red");<p>Test Paragraph.</p>
<p style="color:red;">Test Paragraph.</p>
Get the current CSS float of the first matched element.
String
$("p").float();<p>This is just a test.</p>
"none"
Set the CSS float of every matched element.
jQuery
$("p").float("left");<p>This is just a test.</p>
<p style="float:left;">This is just a test.</p>
Get the current CSS height of the first matched element.
String
$("p").height();<p>This is just a test.</p>
"14px"
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.
jQuery
$("p").height("20px");<p>This is just a test.</p>
<p style="height:20px;">This is just a test.</p>
Get the current CSS left of the first matched element.
String
$("p").left();<p>This is just a test.</p>
"0px"
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.
jQuery
$("p").left("20px");<p>This is just a test.</p>
<p style="left:20px;">This is just a test.</p>
Get the current CSS overflow of the first matched element.
String
$("p").overflow();<p>This is just a test.</p>
"none"
Set the CSS overflow of every matched element.
jQuery
$("p").overflow("auto");<p>This is just a test.</p>
<p style="overflow:auto;">This is just a test.</p>
Get the current CSS position of the first matched element.
String
$("p").position();<p>This is just a test.</p>
"static"
Set the CSS position of every matched element.
jQuery
$("p").position("relative");<p>This is just a test.</p>
<p style="position:relative;">This is just a test.</p>
Get the current CSS top of the first matched element.
String
$("p").top();<p>This is just a test.</p>
"0px"
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.
jQuery
$("p").top("20px");<p>This is just a test.</p>
<p style="top:20px;">This is just a test.</p>
Get the current CSS width of the first matched element.
String
$("p").width();<p>This is just a test.</p>
"300px"
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.
jQuery
$("p").width("20px");<p>This is just a test.</p>
<p style="width:20px;">This is just a test.</p>
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.
Boolean
Returns true if the current useragent is some version of microsoft's internet explorer
$.browser.msie
Alerts "this is safari!" only for safari browsers
if($.browser.safari) { $( function() { alert("this is safari!"); } ); }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.
Object
This is an example of iterating over the items in an array, accessing both the current item and its index.
$.each( [0,1,2], function(i){
alert( "Item #" + i + ": " + this );
});This is an example of iterating over the properties in an Object, accessing both the current item and its key.
$.each( { name: "John", lang: "JS" }, function(i){
alert( "Name: " + i + ", Value: " + this );
});Extend one object with one or more others, returning the original, modified, object. This is a great utility for simple inheritance.
Object
Merge settings and options, modifying settings
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);settings == { validate: true, limit: 5, name: "bar" }Merge defaults and options, without modifying the defaults
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend({}, defaults, options);settings == { validate: true, limit: 5, name: "bar" }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.
Array
$.grep( [0,1,2], function(i){
return i > 0;
});[1, 2]
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.
Array
$.map( [0,1,2], function(i){
return i + 4;
});[4, 5, 6]
$.map( [0,1,2], function(i){
return i > 0 ? i + 1 : null;
});[2, 3]
$.map( [0,1,2], function(i){
return [ i, i + 1 ];
});[0, 1, 1, 2, 2, 3]
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.
Array
$.merge( [0,1,2], [2,3,4] )
[0,1,2,3,4]
$.merge( [3,2,1], [4,3,2] )
[3,2,1,4]
Remove the whitespace from the beginning and end of a string.
String
$.trim(" hello, how are you? ");"hello, how are you?"
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.
jQuery
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");$("p").animate({
left: 50, opacity: 'show'
}, 500);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.
jQuery
$("p").fadeIn("slow");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.
jQuery
$("p").fadeIn("slow",function(){
alert("Animation Done.");
});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.
jQuery
$("p").fadeOut("slow");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.
jQuery
$("p").fadeOut("slow",function(){
alert("Animation Done.");
});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.
jQuery
$("p").fadeTo("slow", 0.5);