-
radio( ) returns Array<Element>
Matches all input elements of type radio.
Example:
Finds all radio inputs.
var input = $(":radio").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" name="asdf" /> <input type="radio" name="asdf" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </form> <div> </div> -
ready( Function fn ) returns jQuery
Binds a function to be executed whenever the DOM is ready to be traversed and manipulated.
<p>This is probably the most important function included in the event module, as it can greatly improve the response times of your web applications.</p><p>In a nutshell, this is a solid replacement for using window.onload, and attaching a function to that. By using this method, your bound function will be called the instant the DOM is ready to be read and manipulated, which is when what 99.99% of all JavaScript code needs to run.</p><p>There is one argument passed to the ready event handler: A reference to the jQuery function. You can name that argument whatever you like, and can therefore stick with the $ alias without risk of naming collisions.</p><p>Please ensure you have no code in your <body> onload event handler, otherwise $(document).ready() may not fire.</p><p>You can have as many $(document).ready events on your page as you like. The functions are then executed in the order they were added.</p>Example:
Display a message when the DOM is loaded.
$("p").text("The DOM is now loaded and can be manipulated.");HTML:
<p> </p>Example:
To run code when the DOM loads, write:
$(document).ready(function(){ // Your code here... });Example:
To use both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias, write:
jQuery(function($) { // Your code using failsafe $ alias here... });Example:
Commonly written as:
$(function() { // Your code here... }); -
remove( String expr ) returns jQuery
Removes all matched elements from the DOM.
This does NOT remove them from the jQuery object, allowing you to use the matched elements further. Note that this function starting with 1.2.2 will also remove all event handlers and internally cached data. So:
<code> $("#foo").remove().appendTo("#bar"); </code>
should be written as
<code> $("#foo").appendTo("#bar"); </code>
to avoid losing the event handlers.
Can be filtered with an optional expression.Example:
Removes all paragraphs from the DOM
$("button").click(function () { $("p").remove(); });HTML:
<p>Hello</p> how are <p>you?</p> <button>Call remove() on paragraphsExample:
Removes all paragraphs that contain "Hello" from the DOM
$("button").click(function () { $("p").remove(":contains('Hello')"); });HTML:
<p class="hello">Hello</p> how are <p>you?</p> <button>Call remove(":contains('Hello')") on paragraphs -
removeAttr( String name ) returns jQuery
Remove an attribute from each of the matched elements.
Example:
Clicking the button enables the input next to it.
$("button").click(function () { $(this).next().removeAttr("disabled") .focus() .val("editable now"); });HTML:
<button>Enable</button> <input type="text" disabled="disabled" value="can't edit this" /> -
removeClass( String ''(optional)'' class ) returns jQuery
Removes all or the specified class(es) from the set of matched elements.
Example:
Remove the class 'blue' from the matched elements.
$("p:even").removeClass("blue");HTML:
<p class="blue under">Hello</p> <p class="blue under highlight">and</p> <p class="blue under">then</p> <p class="blue under">Goodbye</p>Example:
Remove the class 'blue' and 'under' from the matched elements.
$("p:odd").removeClass("blue under");HTML:
<p class="blue under">Hello</p> <p class="blue under highlight">and</p> <p class="blue under">then</p> <p class="blue under">Goodbye</p>Example:
Remove all the classes from the matched elements.
$("p:eq(1)").removeClass();HTML:
<p class="blue under">Hello</p> <p class="blue under highlight">and</p> <p class="blue under">then</p> <p class="blue under">Goodbye</p> -
replaceAll( Selector selector ) returns jQuery
Replaces the elements matched by the specified selector with the matched elements.
This function is the complement to replaceWith() which does the same task with the parameters reversed.Example:
Replace all the paragraphs with bold words.
$("<b>Paragraph. </b>").replaceAll("p"); // check replaceWith() examplesHTML:
<p>Hello</p> <p>cruel</p> <p>World</p> -
replaceWith( String, Element, jQuery content ) returns jQuery
Replaces all matched elements with the specified HTML or DOM elements.
Example:
On click, replace the button with a div containing the same word.
$("button").click(function () { $(this).replaceWith("<div>" + $(this).text() + "</div>"); });HTML:
<button>First</button> <button>Second</button> <button>Third</button>Example:
Replace all the paragraphs with bold words.
$("p").replaceWith("<b>Paragraph. </b>");HTML:
<p>Hello</p> <p>cruel</p> <p>World</p>Example:
Replace all the paragraphs with empty div elements.
$("p").replaceWith(document.createElement("div"));HTML:
<p>Hello</p> <p>cruel</p> <p>World</p>Example:
On click, replace each paragraph with a jQuery div object that is already in the DOM. Notice it doesn't clone the object but rather moves it to replace the paragraph.
$("p").click(function () { $(this).replaceWith($("div")); });HTML:
<p>Hello</p> <p>cruel</p> <p>World</p> <div>Replaced!</div> -
reset( ) returns Array<Element>
Matches all input elements of type reset.
Example:
Finds all reset inputs.
var input = $(":reset").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> -
resize( Function fn ) returns jQuery
Bind a function to the resize event of each matched element.
The resize event fires when a document view is resizedExample:
To make resizing the web page window a pain in the neck, try:
$(window).resize(function(){ alert("Stop it!"); });