-
id( String id ) returns Element
Matches a single element with the given id attribute.
If the id contains characters like periods or colons you have to escape those characters with backslashes [http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_that_has_weird_characters_in_its_ID.3F].Example:
Finds the element with the id "myDiv".
$("#myDiv").css("border","3px solid red");HTML:
<div id="notMe"><p>id="notMe"</p></div> <div id="myDiv">id="myDiv"</div>Example:
Finds the element with the id "myID.entry[1]". See how certain characters must be escaped with backslashes.
$("#myID\\.entry\\[1\\]").css("border","3px solid red");HTML:
<div id="myID.entry[0]">id="myID.entry[0]"</div> <div id="myID.entry[1]">id="myID.entry[1]"</div> <div id="myID.entry[2]">id="myID.entry[2]"</div> -
image( ) returns Array<Element>
Matches all input elements of type image.
Example:
Finds all image inputs.
var input = $(":image").css({background:"yellow", border:"3px red solid"}); $("div").text("For this type jQuery found " + input.length + ".") .css("color", "red"); $("form").submit(function () { return false; }); // so it won't submitHTML:
<form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </form> <div> </div> -
index( Element subject ) returns Number
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.Example:
On click, returns the index (based zero) of that div in the page.
$("div").click(function () { // this is the dom element clicked var index = $("div").index(this); $("span").text("That was div index #" + index); });HTML:
<span>Click a div!</span> <div>First div</div> <div>Second div</div> <div>Third div</div>Example:
Returns the index for the element with ID foobar.
$("*").index( $('#foobar')[0] )HTML:
<div id="foobar"><b></b><span id="foo"></span></div>Example:
Returns the index for the element with ID foo within another element.
$("*").index( $('#foo')[0] )HTML:
<div id="foobar"><b></b><span id="foo"></span></div>Example:
Returns the index for the element clicked within a collection.
var mainNavLinks = $('ul#mainNav li a'); mainNavLinks.click(function(){alert(mainNavLinks.index(this)0;});Example:
Returns -1, as there is no element with ID bar.
$("*").index( $('#bar')[0] )HTML:
<div id="foobar"><b></b><span id="foo"></span></div> -
input( ) returns Array<Element>
Matches all input, textarea, select and button elements.
Example:
Finds all input elements.
var allInputs = $(":input"); var formChildren = $("form > *"); $("div").text("Found " + allInputs.length + " inputs and the form has " + formChildren.length + " children.") .css("color", "red"); $("form").submit(function () { return false; }); // so it won't submitHTML:
<form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option</option></select> <textarea></textarea> <button>Button</button> </form> <div> </div> -
insertAfter( String content ) returns jQuery
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.Example:
Inserts all paragraphs after an element with id of "foo". Same as $("#foo").after("p")
$("p").insertAfter("#foo"); // check after() examplesHTML:
<p> is what I said... </p><div id="foo">FOO!</div> -
insertBefore( String content ) returns jQuery
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.Example:
Inserts all paragraphs before an element with id of "foo". Same as $("#foo").before("p")
$("p").insertBefore("#foo"); // check before() examplesHTML:
<div id="foo">FOO!</div><p>I would like to say: </p> -
is( String expr ) returns Boolean
Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression.
If no element fits, or the expression is not valid, then the response will be 'false'.
<a href='Traversing/filter'>filter</a> is used internally, therefore all rules that apply there apply here, as well.Example:
Shows a few ways is() can be used inside an event handler.
$("div").one('click', function () { if ($(this).is(":first-child")) { $("p").text("It's the first div."); } else if ($(this).is(".blue,.red")) { $("p").text("It's a blue or red div."); } else if ($(this).is(":contains('Peter')")) { $("p").text("It's Peter!"); } else { $("p").html("It's nothing <em>special</em>."); } $("p").hide().slideDown("slow"); $(this).css({"border-style": "inset", cursor:"default"}); });HTML:
<div></div> <div class="blue"></div> <div></div> <div class="red"></div> <div><br/><span>Peter</span></div> <div class="blue"></div> <p> </p>Example:
Returns true, because the parent of the input is a form element
var isFormParent = $("input[@type='checkbox']").parent().is("form") $("div").text("isFormParent = " + isFormParent);HTML:
<form><input type="checkbox" /></form> <div></div>Example:
Returns false, because the parent of the input is a p element
var isFormParent = $("input[@type='checkbox']").parent().is("form") $("div").text("isFormParent = " + isFormParent);HTML:
<form><p><input type="checkbox" /></p></form> <div></div>