-
fadeIn( String, Number speed, Function callback ) returns jQuery
Fade in all matched elements by adjusting their opacity and firing an optional callback 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.Example:
Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.
$(document.body).click(function () { $("div:hidden:first").fadeIn("slow"); });HTML:
<span>Click here...</span> <div id="one"></div> <div id="two"></div> <div id="three"></div>Example:
Fades a red block in over the text. Once the animation is done, it quickly fades in more text on top.
$("a").click(function () { $("div").fadeIn(3000, function () { $("span").fadeIn(100); }); return false; });HTML:
<p> Let it be known that the party of the first part and the party of the second part are henceforth and hereto directed to assess the allegations for factual correctness... (<a href="#">click!</a>) <div><span>CENSORED!</span></div> </p> -
fadeOut( String, Number speed, Function callback ) returns jQuery
Fade out all matched elements by adjusting their opacity and firing an optional callback 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.Example:
Animates all paragraphs to fade out, completing the animation within 600 milliseconds.
$("p").click(function () { $("p").fadeOut("slow"); });HTML:
<p> If you click on this paragraph you'll see it just fade away. </p>Example:
Fades out spans in one section that you click on.
$("span").click(function () { $(this).fadeOut(1000, function () { $("div").text("'" + $(this).text() + "' has faded!"); $(this).remove(); }); }); $("span").hover(function () { $(this).addClass("hilite"); }, function () { $(this).removeClass("hilite"); });HTML:
<h3>Find the modifiers - <div></div></h3> <p> If you <span>really</span> want to go outside <span>in the cold</span> then make sure to wear your <span>warm</span> jacket given to you by your <span>favorite</span> teacher. </p> -
fadeTo( String, Number speed, Number opacity, Function callback ) returns jQuery
Fade the opacity of all matched elements to a specified opacity and firing an optional callback 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.Example:
Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.
$("p:first").click(function () { $(this).fadeTo("slow", 0.33); });HTML:
<p> Click this paragraph to see it fade. </p> <p> Compare to this one that won't fade. </p>Example:
Fade div to a random opacity on each click, completing the animation within 200 milliseconds.
$("div").click(function () { $(this).fadeTo("fast", Math.random()); });HTML:
<p>And this is the library that John built...</p> <div id="one"></div> <div id="two"></div> <div id="three"></div>Example:
Find the right answer! The fade will take 250 milliseconds and change various styles when it completes.
var getPos = function (n) { return (Math.floor(n) * 90) + "px"; }; $("p").each(function (n) { var r = Math.floor(Math.random() * 3); var tmp = $(this).text(); $(this).text($("p:eq(" + r + ")").text()); $("p:eq(" + r + ")").text(tmp); $(this).css("left", getPos(n)); }); $("div").each(function (n) { $(this).css("left", getPos(n)); }) .css("cursor", "pointer") .click(function () { $(this).fadeTo(250, 0.25, function () { $(this).css("cursor", "") .prev().css({"font-weight": "bolder", "font-style": "italic"}); }); });HTML:
<p>Wrong</p> <div></div> <p>Wrong</p> <div></div> <p>Right!</p> <div></div> -
file( ) returns Array<Element>
Matches all input elements of type file.
Example:
Finds all file inputs.
var input = $(":file").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> -
filter( Expression expr ) returns jQuery
Removes all elements from the set of matched elements that do not match the specified expression(s).
This method is used to narrow down the results of a search.
Provide a comma-separated list of expressions to apply multiple filters at once.Example:
Change the color of all divs then put a border around only some of them.
$("div").css("background", "#c8ebcc") .filter(".middle") .css("border-color", "red");HTML:
<div></div> <div class="middle"></div> <div class="middle"></div> <div class="middle"></div> <div class="middle"></div> <div></div>Example:
Selects all paragraphs and removes those without a class "selected".
$("p").filter(".selected")Example:
Selects all paragraphs and removes those that aren't of class "selected" or the first one.
$("p").filter(".selected, :first") -
filter( Function fn ) returns jQuery
Removes all elements from the set of matched elements that does not match the specified function.
The function is called with a context equal to the current element (just like <a href='Core/each'>$.each</a>). If the function returns false, then the element is removed - anything else and the element is kept.Example:
Change the color of all divs then put a border two specific ones.
$("div").css("background", "#b4b0da") .filter(function (index) { return index == 1 || $(this).attr("id") == "fourth"; }) .css("border", "3px double red");HTML:
<div id="first"></div> <div id="second"></div> <div id="third"></div> <div id="fourth"></div> <div id="fifth"></div> <div id="sixth"></div>Example:
Remove all elements that have a descendant ol element
$("p").filter(function(index) { return $("ol", this).length == 0; }); -
find( String expr ) returns jQuery
Searches for all elements that match the specified <a href='Selectors'>expression</a>. This method is a good way to find additional descendant elements with which to process.
All searching is done using a <a href='Selectors'>jQuery expression</a>. The expression can be written using CSS 1-3 Selector syntax.Example:
Starts with all paragraphs and searches for descendant span elements, same as $("p span")
$("p").find("span").css('color','red');HTML:
<p><span>Hello</span>, how are you?</p> <p>Me? I'm <span>good</span>.</p>Example:
Add spans around each word then add a hover and italicize words with the letter '''t'''.
var newText = $("p").text().split(" ").join("</span> <span>"); newText = "<span>" + newText + "</span>"; $("p").html(newText) .find("span") .hover(function () { $(this).addClass("hilite"); }, function () { $(this).removeClass("hilite"); }) .end() .find(":contains('t')") .css({"font-style":"italic", "font-weight":"bolder"});HTML:
<p> When the day is short find that which matters to you or stop believing </p> -
first( ) returns Element
Matches the first selected element.
Example:
Finds the first table row.
$("tr:first").css("font-style", "italic");HTML:
<table> <tr><td>Row 1</td></tr> <tr><td>Row 2</td></tr> <tr><td>Row 3</td></tr> </table> -
firstChild( ) returns Array<Element>
Matches the first child of its parent.
While <a href='Selectors/first'>:first</a> matches only a single element, this matches more then one: One for each parent.Example:
Finds the first span in each matched div to underline and add a hover state.
$("div span:first-child") .css("text-decoration", "underline") .hover(function () { $(this).addClass("sogreen"); }, function () { $(this).removeClass("sogreen"); });HTML:
<div> <span>John,</span> <span>Karl,</span> <span>Brandon</span> </div> <div> <span>Glen,</span> <span>Tane,</span> <span>Ralph</span> </div> -
focus( ) returns jQuery
Triggers the focus event of each matched element.
This causes all of the functions that have been bound to the focus event to be executed. Note that this does not execute the focus method of the underlying elements.Example:
To focus on a login input box with id 'login' on page startup, try:
$(document).ready(function(){ $("#login").focus(); }); -
focus( Function fn ) returns jQuery
Binds a function to the focus event of each matched element.
The focus event fires when an element receives focus either via the pointing device or by tab navigation.Example:
To stop people from writing in text input boxes, try:
$("input[@type=text]").focus(function(){ $(this).blur(); });