-
scroll( Function fn ) returns jQuery
Bind a function to the scroll event of each matched element.
The scroll event fires when a document view is scrolled.Example:
To do something when your page is scrolled:
$("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $(window).scroll(function () { $("span").css("display", "inline").fadeOut("slow"); });HTML:
<div>Try scrolling the iframe.</div> <p>Paragraph - <span>Scroll happened!</span></p> -
select( ) returns jQuery
Trigger the select event of each matched element.
This causes all of the functions that have been bound to that select event to be executed, and calls the browser's default select action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the select event.Example:
To trigger the select event on all input elements, try:
$("input").select(); -
select( Function fn ) returns jQuery
Bind a function to the select event of each matched element.
The select event fires when a user selects some text in a text field, including input and textarea.Example:
To do something when text in input boxes is selected:
$(document).select( function () { $("div").text("Something was selected").show().fadeOut(1000); });HTML:
<p> Click and drag the mouse to select text in the inputs. </p> <input type="text" value="Some text" /> <input type="text" value="to test on" /> <div></div> -
selected( ) returns Array<Element>
Matches all elements that are selected.
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); }) .trigger('change');HTML:
<select name="garden" multiple="multiple"> <option>Flowers</option> <option selected="selected">Shrubs</option> <option>Trees</option> <option selected="selected">Bushes</option> <option>Grass</option> <option>Dirt</option> </select> <div></div> -
serialize( ) returns jQuery
Serializes a set of input elements into a string of data. This will serialize all given elements.
As of jQuery 1.2 the serialize method correctly serializes forms. For older versions of jQuery, the [http://www.malsup.com/jquery/form/ Form Plugin's] fieldSerialize method should be used.Example:
Serialize a form to a query string, that could be sent to a server in an Ajax request.
function showValues() { var str = $("form").serialize(); $("#results").text(str); } $(":checkbox, :radio").click(showValues); $("select").change(showValues); showValues();HTML:
<form> <select name="single"> <option>Single</option> <option>Single2</option> </select> <select name="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" name="check" value="check1"/> check1 <input type="checkbox" name="check" value="check2" checked="checked"/> check2 <input type="radio" name="radio" value="radio1" checked="checked"/> radio1 <input type="radio" name="radio" value="radio2"/> radio2 </form> <p><tt id="results"></tt></p> -
serializeArray( ) returns jQuery
Serializes all forms and form elements (like the <a href='Ajax/serialize'>.serialize()</a> method) but returns a JSON data structure for you to work with.
Example:
Get the values from a form, iterate through them, and append them to a results display.
function showValues() { var fields = $(":input").serializeArray(); $("#results").empty(); jQuery.each(fields, function(i, field){ $("#results").append(field.value + " "); }); } $(":checkbox, :radio").click(showValues); $("select").change(showValues); showValues();HTML:
<p><b>Results:</b> <span id="results"></span></p> <form> <select name="single"> <option>Single</option> <option>Single2</option> </select> <select name="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" name="check" value="check1"/> check1 <input type="checkbox" name="check" value="check2" checked="checked"/> check2 <input type="radio" name="radio" value="radio1" checked="checked"/> radio1 <input type="radio" name="radio" value="radio2"/> radio2 </form> -
show( ) returns jQuery
Displays each of the set of matched elements if they are hidden.
Same as <a href='Effects/show#speedcallback'>show( speed, [callback] )</a> without animations. Doesn't change anything if the selected elements are all visible. It doesn't matter if the element is hidden via a hide() call, or via a display:none in a stylesheet.Example:
Shows all paragraphs.
$("p").show()HTML:
<p style="display:none">Hello</p> -
show( String, Number speed, Function callback ) returns jQuery
Show all matched elements using a graceful animation and firing an optional callback after completion.
The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.Example:
Animates all hidden paragraphs to show slowly, completing the animation within 600 milliseconds.
$("button").click(function () { $("p").show("slow"); });HTML:
<button>Show it</button> <p style="display: none">Hello</p>Example:
Animates all hidden divs to show fastly in order, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.
$("#showr").click(function () { $("div:eq(0)").show("fast", function () { // use callee so don't have to name the function $(this).next().show("fast", arguments.callee); }); }); $("#hidr").click(function () { $("div").hide(2000); });HTML:
<button id="showr">Show</button> <button id="hidr">Hide</button> <div>Hello,</div> <div>how</div> <div>are</div> <div>you?</div>Example:
Animates all span and input elements to show normally. Once the animation is done, it changes the text.
function doIt() { $("span,div").show("normal"); } $("button").click(doIt); // can pass in function name $("form").submit(function () { if ($("input").val() == "yes") { $("p").show(4000, function () { $(this).text("Ok, DONE! (now showing)"); }); } $("span,div").hide("normal"); return false; // to stop the submit });HTML:
<button>Do it!</button> <span>Are you sure? (type 'yes' if you are) </span> <div> <form> <input type="text" /> </form> </div> <p style="display:none;">I'm hidden...</p> -
siblings( String expr ) returns jQuery
Get a set of elements containing all of the unique siblings of each of the matched set of elements.
Can be filtered with an optional expressions.
Example:
Find the unique siblings of all yellow li elements in the 3 lists (including other yellow li elements if appropriate).
var len = $(".hilite").siblings() .css("color", "red") .length; $("b").text(len);HTML:
<ul> <li>One</li> <li>Two</li> <li class="hilite">Three</li> <li>Four</li> </ul> <ul> <li>Five</li> <li>Six</li> <li>Seven</li> </ul> <ul> <li>Eight</li> <li class="hilite">Nine</li> <li>Ten</li> <li class="hilite">Eleven</li> </ul> <p>Unique siblings: <b></b></p>Example:
Find all siblings with a class "selected" of each div.
$("p").siblings(".selected").css("background", "yellow");HTML:
<div><span>Hello</span></div> <p class="selected">Hello Again</p> <p>And Again</p> -
siblings( Selector prev, Selector siblings ) returns Array<Element>
Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.
Example:
Finds all divs that are siblings after the element with #prev as its id. Notice the span isn't selected since it is not a div and the "niece" isn't selected since it is a child of a sibling, not an actual sibling.
$("#prev ~ div").css("border", "3px groove blue");HTML:
<div>div (doesn't match since before #prev)</div> <div id="prev">div#prev</div> <div>div sibling</div> <div>div sibling <div id="small">div neice</div></div> <span>span sibling (not div)</span> <div>div sibling</div> -
size( ) returns Number
The number of elements in the jQuery object.
This returns the same number as the '<a href='Core/length'>length</a>' property of the jQuery object.Example:
Count the divs. Click to add more.
$(document.body).click(function () { $(document.body).append($("<div>")); var n = $("div").size(); $("span").text("There are " + n + " divs." + "Click to add more."); }).click(); // trigger the click to startHTML:
<span></span> <div></div> -
slice( Integer start, Integer end ) returns jQuery
Selects a subset of the matched elements.
Behaves exactly like the built-in Array slice method.Example:
Turns divs yellow based on a random slice.
function colorEm() { var $div = $("div"); var start = Math.floor(Math.random() * $div.length); var end = Math.floor(Math.random() * ($div.length - start)) + start + 1; if (end == $div.length) end = undefined; $div.css("background", ""); if (end) $div.slice(start, end).css("background", "yellow"); else $div.slice(start).css("background", "yellow"); $("span").text('$("div").slice(' + start + (end ? ', ' + end : '') + ').css("background", "yellow");'); } $("button").click(colorEm);HTML:
<button>Turn slice yellow</button> <span>Click the button!</span> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>Example:
Selects all paragraphs, then slices the selection to include only the first element.
$("p").slice(0, 1).wrapInner("<b></b>");Example:
Selects all paragraphs, then slices the selection to include only the first and second element.
$("p").slice(0, 2).wrapInner("<b></b>");Example:
Selects all paragraphs, then slices the selection to include only the second element.
$("p").slice(1, 2).wrapInner("<b></b>");Example:
Selects all paragraphs, then slices the selection to include only the second and third element.
$("p").slice(1).wrapInner("<b></b>");Example:
Selects all paragraphs, then slices the selection to include only the third element.
$("p").slice(-1).wrapInner("<b></b>"); -
slideDown( String, Number speed, Function callback ) returns jQuery
Reveal all matched elements by adjusting their height and firing an optional callback after completion.
Only the height is adjusted for this animation, causing all matched elements to be revealed in a "sliding" manner.Example:
Animates all divs to slide down and show themselves over 600 milliseconds.
$(document.body).click(function () { if ($("div:first").is(":hidden")) { $("div").slideDown("slow"); } else { $("div").hide(); } });HTML:
Click me! <div></div> <div></div> <div></div>Example:
Animates all inputs to slide down, completing the animation within 1000 milliseconds. Once the animation is done, the input look is changed especially if it is the middle input which gets the focus.
$("div").click(function () { $(this).css({ borderStyle:"inset", cursor:"wait" }); $("input").slideDown(1000,function(){ $(this).css("border", "2px red inset") .filter(".middle") .css("background", "yellow") .focus(); $("div").css("visibility", "hidden"); }); });HTML:
<div>Push!</div> <input type="text" /> <input type="text" class="middle" /> <input type="text" /> -
slideToggle( String, Number speed, Function callback ) returns jQuery
Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.
Only the height is adjusted for this animation, causing all matched elements to be hidden or shown in a "sliding" manner.Example:
Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.
$("button").click(function () { $("p").slideToggle("slow"); });HTML:
<button>Toggle</button> <p> This is the paragraph to end all paragraphs. You should feel <em>lucky</em> to have seen such a paragraph in your life. Congratulations! </p>Example:
Animates divs between dividers with a toggle that makes some appear and some disappear.
$("button").click(function () { $("div:not(.still)").slideToggle("slow", function () { var n = parseInt($("span").text(), 10); $("span").text(n + 1); }); });HTML:
<button>Toggle</button> There have been <span>0</span> toggled divs. <div></div><div class="still"></div> <div style="display:none;"></div><div class="still"></div> <div></div><div class="still"></div> <div class="hider"></div><div class="still"></div> <div class="hider"></div><div class="still"></div> <div></div> -
slideUp( String, Number speed, Function callback ) returns jQuery
Hide all matched elements by adjusting their height and firing an optional callback after completion.
Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner.Example:
Animates all divs to slide up, completing the animation within 400 milliseconds.
$(document.body).click(function () { if ($("div:first").is(":hidden")) { $("div").show("fast"); } else { $("div").slideUp(); } });HTML:
Click me! <div></div> <div></div> <div></div> <div></div> <div></div>Example:
Animates all paragraph to slide up, completing the animation within 200 milliseconds. Once the animation is done, it displays an alert.
$("button").click(function () { $(this).parent().slideUp("slow", function () { $("#msg").text($("button", this).text() + " has completed."); }); });HTML:
<div> <button>Hide One</button> <input type="text" value="One" /> </div> <div> <button>Hide Two</button> <input type="text" value="Two" /> </div> <div> <button>Hide Three</button> <input type="text" value="Three" /> </div> <div id="msg"></div> -
stop( ) returns jQuery
Stops all the currently running animations on all the specified elements.
If any animations are queued to run, then they will begin immediately.Example:
Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.
// Start animation $("#go").click(function(){ $(".block").animate({left: '+=100px'}, 2000); }); // Stop animation when button is clicked $("#stop").click(function(){ $(".block").stop(); }); // Start animation in the opposite direction $("#back").click(function(){ $(".block").animate({left: '-=100px'}, 2000); });HTML:
<button id="go">Go</button> <button id="stop">STOP!</button> <button id="back">Back</button> <div class="block"></div> -
submit( ) returns Array<Element>
Matches all input elements of type submit.
Example:
Finds all submit inputs.
var input = $(":submit").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> -
submit( ) returns jQuery
Trigger the submit event of each matched element.
This causes all of the functions that have been bound to that submit event to be executed, and calls the browser's default submit action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the submit event.Example:
To trigger the submit event on the first form on the page, try:
$("form:first").submit(); -
submit( Function fn ) returns jQuery
Bind a function to the submit event of each matched element.
The select event fires when a form is submittedExample:
If you'd like to prevent forms from being submitted unless a flag variable is set, try:
$("form").submit(function() { if ($("input:first").val() == "correct") { $("span").text("Validated...").show(); return true; } $("span").text("Not valid!").show().fadeOut(1000); return false; });HTML:
<p>Type 'correct' to validate.</p> <form action="javascript:alert('success!');"> <div> <input type="text" /> <input type="submit" /> </div> </form> <span></span>Example:
If you'd like to prevent forms from being submitted unless a flag variable is set, try:
$("form").submit( function () { return this.some_flag_variable; } );