-
change( ) returns jQuery
Triggers the change event of each matched element.
This causes all of the functions that have been bound to that change event to be executed, and calls the browser's default change action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the change event. The change event usually fires when a control loses the input focus and its value has been modified since gaining focus. -
change( Function fn ) returns jQuery
Binds a function to the change event of each matched element.
The change event fires when a control loses the input focus and its value has been modified since gaining focus.Example:
Attaches a change even to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.
$("select").change(function () { var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("div").text(str); }) .change();HTML:
<select name="sweets" multiple="multiple"> <option>Chocolate</option> <option selected="selected">Candy</option> <option>Taffy</option> <option selected="selected">Carmel</option> <option>Fudge</option> <option>Cookie</option> </select> <div></div>Example:
To add a validity test to all text input elements:
$("input[@type='text']").change( function() { // check input for validity here }); -
checkbox( ) returns Array<Element>
Matches all input elements of type checkbox.
Example:
Finds all checkbox inputs.
var input = $(":checkbox").css({background:"yellow", border:"3px red solid"}); $("div").text("For this type jQuery found " + input.length + ".") .css("color", "red"); $("form").submit(function () { return false; }); // so it won't submitHTML:
<form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </form> <div> </div> -
checked( ) returns Array<Element>
Matches all elements that are checked.
Example:
Finds all input elements that are checked.
function countChecked() { var n = $("input:checked").length; $("div").text(n + (n == 1 ? " is" : " are") + " checked!"); } countChecked(); $(":checkbox").click(countChecked);HTML:
<form> <input type="checkbox" name="newsletter" checked="checked" value="Hourly" /> <input type="checkbox" name="newsletter" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> <input type="checkbox" name="newsletter" value="Yearly" /> </form> <div></div>Result:
[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ] -
child( Selector parent, Selector child ) returns Array<Element>
Matches all child elements specified by "child" of elements specified by "parent".
Example:
Finds all children of the element with id "main" which is yellow.
$("#main > *").css("border", "3px double red");HTML:
<span id="main"> <div></div> <button>Child</button> <div class="mini"></div> <div> <div class="mini"></div> <div class="mini"></div> </div> <div><button>Grand</button></div> <div><span>A Span <em>in</em> child</span></div> <span>A Span in main</span> </span> -
children( String expr ) returns jQuery
Get a set of elements containing all of the unique immediate children of each of the matched set of elements.
This set can be filtered with an optional expression that will cause only elements matching the selector to be collected. Also note: while parents() will look at all ancestors, children() will only consider immediate child elements.Example:
Find all children of the clicked element.
$("#container").click(function (e) { $("*").removeClass("hilite"); var $kids = $(e.target).children(); var len = $kids.addClass("hilite").length; $("#results span:first").text(len); $("#results span:last").text(e.target.tagName); e.preventDefault(); return false; });HTML:
<div id="container"> <div> <p>This <span>is the <em>way</em> we</span> write <em>the</em> demo,</p> </div> <div> <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write the</button> demo, </div> <div> This <span>the way we <em>write</em> the <em>demo</em> so</span> <input type="text" value="early" /> in </div> <p> <span>t</span>he <span>m</span>orning. <span id="results">Found <span>0</span> children in <span>TAG</span>.</span> </p> </div>Example:
Find all children of each div.
$("div").children().css("border-bottom", "3px double red");HTML:
<p>Hello (this is a paragraph)</p> <div><span>Hello Again (this span is a child of the a div)</span></div> <p>And <span>Again</span> (in another paragraph)</p> <div>And One Last <span>Time</span> (most text directly in a div)</div>Example:
Find all children with a class "selected" of each div.
$("div").children(".selected").css("color", "blue");HTML:
<div> <span>Hello</span> <p class="selected">Hello Again</p> <div class="selected">And Again</div> <p>And One Last Time</p> </div> -
class( String class ) returns Array<Element>
Matches all elements with the given class.
Example:
Finds the element with the class "myClass".
$(".myClass").css("border","3px solid red");HTML:
<div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span> -
click( ) returns jQuery
Triggers the click event of each matched element.
Causes all of the functions that have been bound to that click event to be executed.Example:
To trigger the click event on all of the paragraphs on the page:
$("p").click(); -
click( Function fn ) returns jQuery
Binds a function to the click event of each matched element.
The click event fires when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is:<ul><li>mousedown</li><li>mouseup</li><li>click</li></ul>Example:
To hide paragraphs on a page when they are clicked:
$("p").click(function () { $(this).slideUp(); }); $("p").hover(function () { $(this).addClass("hilite"); }, function () { $(this).removeClass("hilite"); });HTML:
<p>First Paragraph</p> <p>Second Paragraph</p> <p>Yet one more Paragraph</p> -
clone( ) returns jQuery
Clone matched DOM Elements and select the clones.
This is useful for moving copies of the elements to another location in the DOM.Example:
Clones all b elements (and selects the clones) and prepends them to all paragraphs.
$("b").clone().prependTo("p");HTML:
<b>Hello</b><p>, how are you?</p>Result:
<b>Hello</b><p><b>Hello</b>, how are you?</p> -
clone( Boolean true ) returns jQuery
Clone matched DOM Elements, and all their event handlers, and select the clones.
This is useful for moving copies of the elements, and their events, to another location in the DOM.Example:
Create a button that's able to clone itself - and have the clones themselves be clonable.
$("button").click(function(){ $(this).clone(true).insertAfter(this); });HTML:
<button>Clone Me!</button> -
contains( String text ) returns Array<Element>
Matches elements which contain the given text.
Example:
Finds all divs containing "John" and underlines them.
$("div:contains('John')").css("text-decoration", "underline");HTML:
<div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn -
contents( ) returns jQuery
Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.
Example:
Find all the text nodes inside a paragraph and wrap them with a bold tag.
$("p").contents().not("[nodeType=1]").wrap("<b/>");HTML:
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>Example:
Append some new content into an empty iframe.
$("iframe").contents().find("body").append("I'm in an iframe!");HTML:
<iframe src="/index-blank.html" width="300" height="100"></iframe> -
css( String name ) returns String
Return a style property on the first matched element.
Example:
To access the background color of a clicked div.
$("div").click(function () { var color = $(this).css("background-color"); $("#result").html("That div is <span style='color:" + color + ";'>" + color + "</span>."); });HTML:
<span id="result"> </span> <div style="background-color:blue;"></div> <div style="background-color:rgb(15,99,30);"></div> <div style="background-color:#123456;"></div> <div style="background-color:#f11;"></div> -
css( Map properties ) returns jQuery
Set a key/value object as style properties to all matched elements.
This is the best way to set several style properties on all matched elements.Example:
To set the color of all paragraphs to red and background to blue:
$("p").hover(function () { $(this).css({ backgroundColor:"yellow", fontWeight:"bolder" }); }, function () { var cssObj = { backgroundColor: "#ddd", fontWeight: "", color: "rgb(0,40,244)" } $(this).css(cssObj); });HTML:
<p> Move the mouse over a paragraph. </p> <p> Like this one or the one above. </p>Example:
If the property name includes a "-", put it between quotation marks:
$("p").hover(function () { $(this).css({ "background-color":"yellow", "font-weight":"bolder" }); }, function () { var cssObj = { "background-color": "#ddd", "font-weight": "", color: "rgb(0,40,244)" } $(this).css(cssObj); });HTML:
<p> Move the mouse over a paragraph. </p> <p> Like this one or the one above. </p> -
css( String name, String or Number value ) returns jQuery
Set a single style property to a value on all matched elements.
If a number is provided, it is automatically converted into a pixel value.Example:
To change the color of any paragraph to red on mouseover event.
$("p").mouseover(function () { $(this).css("color","red"); });HTML:
<p> Just roll the mouse over me. </p> <p> Or me to see a color change. </p>Example:
To highlight a clicked word in the paragraph.
var words = $("p:first").text().split(" "); var text = words.join("</span> <span>"); $("p:first").html("<span>" + text + "</span>"); $("span").click(function () { $(this).css("background-color","yellow"); });HTML:
<p> Once upon a time there was a man who lived in a pizza parlor. This man just loved pizza and ate it all the time. He went on to be the happiest man in the world. The end. </p>