- Course: jQuery Level 1 (EDTECH 533)
- Author: Christer Edwards
- Revision: 2013-02-17
- Schedule
- Facilities
- Introductions
- HTML
- CSS
- JavaScript
- History
- Resources & Help
- Development Environment
- Installation
- Basic CSS Selectors
- Pseudo-Selectors (jQuery Extensions)
- Traversing the DOM
- DOM Manipulation
- Events
- Hands-On Projects
jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML.
- Idea formed in 2005
- Formally announced in early 2006
- Author: John Resig
.. ifslides::
- utahjs.com
- #utahjs IRC (freenode)
- Monthly Presentations
.. ifnotslides:: The UtahJS User Group holds meetings in both Salt Lake and Utah County. - First Thursday in SLC - Third Tuesday in Utah County
The console.log
method allows you to send log output to the JavaScript
console within the browser. This can be very helpful in troubleshooting your
jQuery code.
- Text Editor
- Web Browser
- Local Source
- CDN (Content Delivery Network)
Which one should I use? Production or Development?
<script src="jquery.js"></script>
Use Google Hosted Libraries CDN service.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
Use jQuery CDN
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<p>Hello World!</p>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
</body>
</html>
Should you place your jQuery code in the head
or body
of your HTML document? Why?
If you need to load jQuery in the head
of your document, you'll need to use
the $(document).ready
method. This tells jQuery to wait until the full
document (the page) is loaded before executing the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function() {
alert("Hello World!");
});
</script>
</head>
<body>
<p>Hello World</p>
</body>
</html>
It is generally best practice to load jQuery in the body of your document, in
which case it is not required to use $(document).ready
.
$()
is a shortcut for jQuery()
. It is very common to see $()
used in jQuery scripts.
- Create a template HTML document
- Include the latest jQuery via CDN
Selects all elements.
Find every element (including head, body, etc) in the document.
<script>
var elementCount = $("*").length;
console.log(elementCount);
</script>
Selects all elements with the given class. An element can have multiple
classes; only one of them must match. For class selectors, jQuery uses
JavaScript's native getElementsByClassName()
function if the browser
supports it.
<div class="emphasis">This content should be emphasised</div>
<script>
$(".emphasis").css("font-style", "italic");
</script>
Selects all elements with the given tag name.
JavaScript's getElementsByTagName()
function is called to return the
appropriate elements when this expression is used.
<div>This content should be bold</div>
<script>
$("div").css("font-weight", "bold");
</script>
Selects a single element with the given id attribute.
Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.
<div id="underline">This content should be underlined</div>
<script>
$("#underline").css("text-decoration", "underline");
</script>
Selects elements that have the specified attribute with a value exactly equal to a certain value.
<form>
First Name: <input type="text" name="firstname"></br>
Last Name: <input type="text" name="lastname">
</form>
<script>
$('input[name="firstname"]').css("background-color", "green");
</script>
Selects the combined results of all the specified selectors.
<div class="emphasis">This will be green</div>
<div>This will be normal</div>
<div id="underline">This will be green</div>
<script>
$("div.emphasis,div#underline").css("color", "green");
</script>
- Create document(s) using 3 of the 6 Basic CSS Selectors.
- All Selector
- Class Selector
- Element Selector
- ID Selector
- Attribute Selector
- Multiple Selectors
Because these are jQuery extensions and not part of the CSS specification,
queries using pseudo-selectors cannot take advantage of the performance boost
provided by the native DOM querySelectorAll()
method. To achieve the best
performance when using pseudo-selectors to select elements, first select the
elements using a pure CSS selector, then use .filter("selector")
.
HTML, CSS and JavaScript each have specific roles to play in the browser. Using
the .css()
method applies style using JavaScript, where it should be
managed directly in the CSS. Using .addClass()
allows us to update styling,
while keeping style declarations out of our JavaScript.
Select all elements that are in the progress of an animation at the time the selector is run.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("div").on("click", function() {
$("div").filter(":animated").addClass("highlight");
});
</script>
Selects all button elements and elements of type button.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("body").filter(":button").addClass("green");
</script>
Selects all elements of type checkbox.
jQuery >=1.6
<script>
$("form input").filter(":checkbox").prop("checked", true);
$("form input").filter(":checkbox").prop("checked", false);
</script>
jQuery <=1.5
<script>
$("form input").filter(":checkbox")
.attr("checked", "checked");
</script>
Select the element at index n within the matched set.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("li").filter(":eq(2)").addClass("highlight");
</script>
Selects even elements, zero-indexed. See also odd.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("li").filter(":even").addClass("highlight");
</script>
Selects all elements of type file.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("input").filter(":file").addClass("highlight");
</script>
Selects the first matched element.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("li").filter(":first").addClass("highlight");
</script>
Select all elements at an index greater than index within the matched set.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("li").filter(":gt(4)").addClass("highlight");
</script>
Selects elements which contain at least one element that matches the specified selector.
<style>
.border { background-color: yellow; }
</style>
<script>
$("div").filter(":has(p)").addClass("highlight");
</script>
Selects all elements that are headers, like h1, h2, h3 and so on.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("div").filter(":header").addClass("highlight");
</script>
:hidden
Selects all elements that are hidden.
<script>
$("div").filter(":hidden").show();
</script>
Selects all elements of type image.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("input").filter(":image").addClass("highlight");
</script>
Selects all input, textarea, select and button elements.
<script>
var totalInput = $("form").filter(":input");
console.log( totalInput );
</script>
Selects the last matched element.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("li").filter(":last").addClass("highlight");
</script>
Select all elements at an index less than index within the matched set.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("li").filter(":lt(4)").addClass("highlight");
</script>
Selects odd elements, zero-indexed. See also even.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("li").filter(":odd").addClass("highlight");
</script>
Select all elements that have at least one child node (either an element or text).
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("li").filter(":parent").addClass("highlight");
</script>
Selects all elements of type password.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("form input").filter(":password").addClass("highlight");
</script>
Selects all elements of type radio.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("form input").filter(":radio").addClass("highlight");
</script>
Selects all elements of type reset.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("form input").filter(":reset").addClass("highlight");
</script>
Selects all elements that are selected.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("select option").filter(":selected").addClass("highlight");
</script>
Selects all elements of type submit.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("form").filter(":submit").addClass("highlight");
</script>
Selects all elements of type text.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$("form input").filter(":text").addClass("highlight");
</script>
Selects all elements that are visible.
<style>
.hidden { display: none; }
</style>
<script>
$("div").filter(":visible").addClass("hidden");
</script>
- Expand your HTML template to include a form and list.
- Use jQuery to highlight selected elements within your document.
- Implement ten of the pseudo-selectors outlined in this section.
- :animated, :button, :checkbox, :eq(), :even, :file, :first, :gt(), :has(), :header, :hidden, :image, :input, :last, :lt(), :odd, :parent, :password, :radio, :reset, :selected, :submit, :text, :visible
Get the children of each element in the set of matched elements, optionally filtered by a selector.
<ul class="level 1">
<li>parent</li>
<li>parent</li>
<ul class="level 2">
<li>child</li>
<li>child</li>
</ul>
<ul class="level 3">
<li>sibling</li>
<li>sibling</li>
</ul>
</ul>
<script>
$("ul.level-2").children().css('background-color', 'green');
</script>
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
<ul class="level-1">
<li id="parent-1">parent</li>
<li id="parent-2">parent</li>
<ul class="level-2">
<li id="child-1">child</li>
<li id="child-2">child</li>
<ul class="level-3">
<li id="grandchild-1">grandchild</li>
<li id="grandchild-2">grandchild</li>
</ul>
</ul>
</ul>
<script>
$('li#child-2').closest('li').css('background-color', 'green');
</script>
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
<ul class="level-1">
<li id="parent-1">parent</li>
<li id="parent-2">parent</li>
<ul class="level-2">
<li id="child-1">child</li>
<li id="child-2">child</li>
<ul class="level-3">
<li id="grandchild-1">grandchild</li>
<li id="grandchild-2">grandchild</li>
</ul>
</ul>
</ul>
<script>
$('ul.level-2').find('li').css('background-color', 'green');
</script>
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
<ul class="level-1">
<li id="parent-1">parent</li>
<li id="parent-2">parent</li>
<ul class="level-2">
<li id="child-1">child</li>
<li id="child-2">child</li>
<ul class="level-3">
<li id="grandchild-1">grandchild</li>
<li id="grandchild-2">grandchild</li>
</ul>
</ul>
</ul>
<script>
$('li#child-1').next('li').css('background-color', 'green');
</script>
Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
<ul class="level-1">
<li id="parent-1">parent</li>
<li id="parent-2">parent</li>
<ul class="level-2">
<li id="child-1">child</li>
<li id="child-2">child</li>
<ul class="level-3">
<li id="grandchild-1">grandchild</li>
<li id="grandchild-2">grandchild</li>
</ul>
</ul>
</ul>
<script>
$('li#parent-1').nextAll().css('background-color', 'green');
</script>
Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
<ul class="level-1">
<li id="level-1a">level 1</li>
<li id="level-1b">level 1</li>
</ul>
<ul class="level-2">
<li id="level-2a">level 2</li>
<li id="level-2b">level 2</li>
</ul>
<ul class="level-3">
<li id="level-3a">level 3</li>
<li id="level-3b">level 3</li>
</ul>
<script>
$('ul.level-1').nextUntil('li').css('background-color', 'green');
</script>
Get the closest ancestor element that is positioned.
<ul class="level-1">
<li id="parent-1">parent</li>
<li id="parent-2">parent</li>
<ul class="level-2" style="position: relative;">
<li id="child-1">child</li>
<li id="child-2">child</li>
<ul class="level-3">
<li id="grandchild-1">grandchild</li>
<li id="grandchild-2">grandchild</li>
</ul>
</ul>
</ul>
<script>
$('ul.level-3').offsetParent().css('background-color', 'green');
</script>
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
<ul class="level-1">
<li id="parent-1">parent</li>
<li id="parent-2">parent</li>
<ul class="level-2">
<li id="child-1">child</li>
<li id="child-2">child</li>
<ul class="level-3">
<li id="grandchild-1">grandchild</li>
<li id="grandchild-2">grandchild</li>
</ul>
</ul>
</ul>
<script>
$('li#child-1').parent().css('background-color', 'green');
</script>
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.
<ul class="level-1">
<li id="parent-1">parent</li>
<li id="parent-2">parent</li>
<ul class="level-2">
<li id="child-1">child</li>
<li id="child-2">child</li>
<ul class="level-3">
<li id="grandchild-1">grandchild</li>
<li id="grandchild-2">grandchild</li>
</ul>
</ul>
</ul>
<script>
$('li#grandchild-1').parents().css('background-color', 'green');
</script>
Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.
<ul class="level-1">
<li id="parent-1">parent</li>
<li id="parent-2">parent</li>
<ul class="level-2">
<li id="child-1">child</li>
<li id="child-2">child</li>
<ul class="level-3">
<li id="grandchild-1">grandchild</li>
<li id="grandchild-2">grandchild</li>
</ul>
</ul>
</ul>
<script>
$('li#grandchild-1').parentsUntil('ul.level-2').css('background-color', 'green');
</script>
Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.
<ul class="level-1">
<li id="parent-1">parent</li>
<li id="parent-2">parent</li>
<ul class="level-2">
<li id="child-1">child</li>
<li id="child-2">child</li>
<ul class="level-3">
<li id="grandchild-1">grandchild</li>
<li id="grandchild-2">grandchild</li>
</ul>
</ul>
</ul>
<script>
$('ul.level-3').prev('ul.level-2').css('background-color', 'green');
</script>
Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.
<ul class="level-1">
<li id="parent-1">parent</li>
<li id="parent-2">parent</li>
<ul class="level-2">
<li id="child-1">child</li>
<li id="child-2">child</li>
<ul class="level-3">
<li id="grandchild-1">grandchild</li>
<li id="grandchild-2">grandchild</li>
</ul>
</ul>
</ul>
<script>
$('li#grandchild-2').prevAll().css('background-color', 'green');
</script>
Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.
<ul class="level-1">
<li id="level-1a">level 1</li>
<li id="level-1b">level 1</li>
</ul>
<ul class="level-2">
<li id="level-2a">level 2</li>
<li id="level-2b">level 2</li>
</ul>
<ul class="level-3">
<li id="level-3a">level 3</li>
<li id="level-3b">level 3</li>
</ul>
<script>
$('ul.level-3').prevUntil('ul.level-1').css('background-color', 'green');
</script>
Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
<ul class="level 1">
<li>parent</li>
<li>parent</li>
<ul class="level 2">
<li>child</li>
<li>child</li>
</ul>
<ul class="level 3">
<li>sibling</li>
<li>sibling</li>
</ul>
</ul>
<script>
$("ul.level-2").siblings('ul').css('background-color', 'green');
</script>
- Practice using the following DOM traversal methods.
- .children()
- .closest()
- .find()
- .next(), .nextAll(), .nextUntil()
- .offsetParent()
- .parent(), .parents(), .parentsUntil()
- .prev(), .prevAll(), .prevUntil()
- .siblings()
Adds the specified class(es) to each of the set of matched elements.
<script>
$(".content").children("p")
.addClass("highlight");
</script>
Insert content, specified by the parameter, after each element in the set of matched elements.
<p>Hello</p>
<script>
$("p").after("World!");
</script>
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
<p>Hello</p>
<script>
$("p").append(" World!");
</script>
Insert every element in the set of matched elements to the end of the target.
<div class="content">
<p>Hello</p>
<script>
$("World!").appendTo("p");
</script>
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
<img id="jquery-logo" src="jquery.jpg" />
<script>
$("#jquery-logo").attr("alt", "jQuery Logo");
</script>
Insert content, specified by the parameter, before each element in the set of matched elements.
<p>World!</p>
<script>
$("p").before("Hello ");
</script>
Create a deep copy of the set of matched elements.
<p>Hello</p>
<b>World!</b>
<script>
$("b").clone().appendTo("p");
</script>
Get the value of a style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.
<style>
.highlight { background-color: yellow; }
</style>
<script>
$(".content").css("highlight");
</script>
Remove all child nodes of the set of matched elements from the DOM.
<div class="content">
<p>Hello</p>
<p>World</p>
</div>
<script>
$(".content").empty();
</script>
Get the current computed height for the first element in the set of matched elements or set the height of every matched element.
<style>
div { width: 50px; height: 50px; float: left; margin: 5px; background: red; }
</style>
<div></div>
<div></div>
<script>
$("div").on("click", function() {
$(this).height(30)
.css("background-color", "green");
});
</script>
Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.
<div class="foo"></div>
<script>
$("div.foo").html("Hello World");
</script>
Insert every element in the set of matched elements after the target.
<p id="world">World!</p>
<p id="hello">Hello</p>
<script>
$("p#world").insertAfter("p#hello");
</script>
Insert every element in the set of matched elements before the target.
<p id="world">World!</p>
<p id="hello">Hello</p>
<script>
$("p#hello").insertBefore("p#world");
</script>
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
<p>World</p>
<script>
$("p").prepend("Hello ");
</script>
Insert every element in the set of matched elements to the beginning of the target.
<p id="world">World</p>
<p id="hello">Hello </p>
<script>
$("p#hello").prependTo("p#world");
</script>
Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.
<input type="checkbox" />
<input type="checkbox" />
<script>
$("form input").filter(":checkbox").prop("checked", true);
</script>
Remove the set of matched elements from the DOM.
<button>Click to Remove paragraphs</button>
<p>Hello World!</p>
<script>
$("button").on("click", function() {
$("p").remove()
});
</script>
Remove an attribute from each element in the set of matched elements.
Name: <input type="text" name="name" value="John Doe" />
<script>
$("input").filter(":text").removeAttr("value");
</script>
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
<p class="highlight">Hello World</p>
<p class="highlight">Hello World</p>
<p class="highlight">Hello World</p>
<p class="highlight">Hello World</p>
<script>
$("p").filter(":even").removeClass("highlight");
</script>
Replace each target element with the set of matched elements.
<p>Goodbye World</p>
<p>Goodbye World</p>
<p>Goodbye World</p>
<script>
$("Hello World").replaceAll("p");
</script>
Replace each element in the set of matched elemesnt with the provided new content and return the set of elements that was removed.
<p>Goodbye World</p>
<p>Goodbye World</p>
<p>Goodbye World</p>
<script>
$("p").replaceWith("Hello World");
</script>
Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.
<script>
$("p").text("Hello World");
</script>
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
<p class="highlight">Hello World</p>
<p class="">Hello World</p>
<p class="">Hello World</p>
<button>Click to Toggle</button>
<script>
$("p").on("click", function() {
$(this).toggleClass("highlight");
});
</script>
Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.
<div>
<p>Hello</p>
<p>World</p>
</div>
<script>
$("p").unwrap();
</script>
Get the current computed width for the first element in the set of matched elements or set the width of every matched element.
<style>
div { width: 50px; height: 50px; float: left; margin: 5px; background: red; }
</style>
<div></div>
<div></div>
<script>
$("div").on("click", function() {
$(this).width(30)
.css("background-color", "green");
});
</script>
Wrap an HTML structure around each element in the set of matched elements.
<p>Hello</p>
<p>World</p>
<script>
$("p").wrap("<div></div>");
</script>
Wrap an HTML structure around all elements in the set of matched elements.
<p>Hello</p>
<p>World</p>
<script>
$("p").wrapAll("div");
</script>
Wrap an HTML structure around the content or each element in the set of matched elements.
<p>Hello</p>
<p>World</p>
<script>
$("p").wrappInner("<strong></strong>");
</script>
- Use jQuery to manipulate selected elements within your document.
- Implement 10 of the following DOM manipulation methods.
- .addClass(), .after(), .append(), .appendTo(), .attr(), .before(), .clone(), .css(), .empty(), .height(), .html(), .insertAfter(), .insertBefore(), .prepend(), .prependTo(), .prop(), .remove(), .removeAttr(), .removeClass(), .replaceAll(), .replaceWith, .text(), .toggleClass(), .unwrap(), .width(), .wrap(), .wrapAll(), .wrapInner()
Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
<script>
$('button').on('click', function() {
alert('Handler for .click() called.");
});
</script>
Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.
<script>
$('button').on('dblclick', function() {
alert('Handler for .dblclick() called.");
});
</script>
Bind an event handler to the "focusin" event.
<style>
span { display: none; }
</style>
<p><input type="text" /><span>.focusin() triggered</span></p>
<p><input type="text" /><span>.focusin() triggered</span></p>
<script>
$("p").on("focusin", function() {
$(this).find("span").css("display", 'inline').fadeOut(1000);
});
</script>
Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
<script>
$('h2').hover(function() {
$('p').slideToggle();
});
</script>
Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.
<script>
$('#target').mousedown(function() {
alert('Handler for .mousedown() called.');
});
</script>
Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.
<script>
$('#target').mouseenter(function() {
alert('Handler for .mouseenter called.');
});
</script>
Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.
<script>
$('#target').mouseleave(function() {
alert('Handler for .mouseleave called.');
});
</script>
Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element.
<div id="outer">Mouse Out</div>
<script>
$('#outer').mouseout(function() {
alert('Handler for .mouseout() called.');
});
</script>
Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.
<script>
$('#target').mouseup(function() {
alert('Handler for .mouseup() called.');
});
</script>
Bind an event handler to the "select" JavaScript event, or trigger that event on an element.
Username: <input type="text" name="username" value="username" /><br />
Password: <input type="password" name="password" value="password" />
<div></div>
<script>
$(":input").select(function() {
$("div").text("Something was selected").show().fadeOut(1000);
});
</script>
Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
<script>
$("form").submit(function() {
return false;
});
</script>
- Use jQuery to monitor selected events within your document.
- Implement 5 of the following event methods.
- .click(), .dblclick(), .focusin(), .hover(), .mousedown(), .mouseenter(), .mouseleave(), .mouseout(), .mouseup(), .select(), .submit()
Perform a custom animation of a set of CSS properties.
<style>
div { background-color: green; height: 50px; width: 50px; left: 10px; }
</style>
<button id="right">Click to animate</button>
<div></div>
<script>
$("#right").on("click", function(){
$("div").animate( {"left": "+=50px"}, "slow" );
});
</script>
Set a timer to delay execution of subsequent items in the queue.
<style>
div { background-color: green; height: 50px; width: 50px; }
</style>
<div></div>
<script>
$("div").slideUp("slow").delay(1000).slideDown("slow");
</script>
Display the matched elements by fading them to opaque.
<style>
div { background-color: green; height: 50px; width: 50px; display: none; }
</style>
<div></div>
<script>
$("div").filter(":hidden").fadeIn("slow");
</script>
Hide the matched elements by fading them to transparent.
<style>
div { background-color: green; height: 50px; width: 50px; }
</style>
<div></div>
<script>
$("div").on("click", function() {
$(this).fadeOut("slow");
});
</script>
Adjust the opacity of the matched elements.
<style>
div { background-color: green; height: 50px; width: 50px; }
</style>
<div></div>
<script>
$("div").on("click", function() {
$(this).fadeTo("slow", 0.33);
});
</script>
Display or hide the matched elements by animating their opacity.
<style>
div { background-color: green; height: 50px; width: 50px; }
</style>
<div></div>
<script>
$("div").on("click", function() {
$(this).fadeToggle("slow", "linear");
});
</script>
Hide the matched elements.
<style>
div { background-color: green; height: 50px; width: 50px; }
</style>
<button>Click to hide</button>
<div></div>
<script>
$("button").on("click", function() {
$("div").hide("slow");
});
</script>
Display the matched elements.
<style>
div { background-color: green; height: 50px; width: 50px; display: none; }
</style>
<button>Click to show</button>
<div></div>
<script>
$("button").on("click", function() {
$("div").show("slow");
});
</script>
Display the matched elements with a sliding motion.
<style>
div { background-color: green; height: 50px; width: 50px; }
</style>
<button>Click to slideDown</button>
<div></div>
<script>
$(button).on("click", function() {
$("div").slideDown("slow");
});
</script>
Display or hide the matched elements with a sliding motion.
<style>
div { background-color: green; height: 50px; width: 50px; display: none; }
</style>
<button>Click to slideDown</button>
<div></div>
<script>
$(button).on("click", function() {
$("div").slideDown("slow");
});
</script>
Hide the matched elements with a sliding motion.
<style>
div { background-color: green; height: 50px; width: 50px; }
</style>
<button>Click to slideUp</button>
<div></div>
<script>
$(button).on("click", function() {
$("div").slideUp("slow");
});
</script>
Display or hide the matched elements.
<style>
div { background-color: green; height: 50px; width: 50px; }
div.hidden { background-color: red; display: none; }
</style>
<button>Toggle Display</button>
<div>Green</div>
<div class="hidden">Red</div>
<script>
$("button").on("click", function() {
$("div").toggle();
});
</script>
- Use jQuery to add selected effects within your document.
- Implement 5 of the following effect methods.
- .animate(), .delay(), .fadeIn(), .fadeOut(), .fadeTo(), .fadeToggle(), .hide(), .show(), .slideDown(), .slideToggle(), .slideUp(), .toggle()
Demonstrations and hands-on labs:
- FAQ
- CSS Switcher
- Contact Form
- Image Slider
- Dynamic Content
Please take five minutes to review the course.
Christer Edwards