The example below first moves the <div> element to the right, and then increases the font size
of the text:
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
});
lesson 44
jQuery stop() Method
The jQuery stop() method is used to stop an animation or effect before it is finished.
The stop() method works for all jQuery effect functions, including sliding, fading and custom
animations.
Syntax:
$(selector).stop(stopAll,goToEnd);
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
Button
div id="flip"
div id="panel"
lesson 45
jQuery Callback Functions
JavaScript statements are executed line by line. However, with effects, the next line of code can be
run even though the effect is not finished. This can create errors.
To prevent this, you can create a callback function.
A callback function is executed after the current effect is finished.
Typical syntax:
$(selector).hide(speed,callback);
lesson 46
jQuery Callback Functions - Example
The example below has a callback parameter that is a function that will be executed after the hide
effect is completed:
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
});
lesson 47
jQuery Callback Functions - Example Two
The example below has no callback parameter, and the alert box will be displayed before the hide
effect is completed:
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
});
lesson 48
jQuery Method Chaining
However, there is a technique called chaining, that allows us to run multiple jQuery commands, one
after the other, on the same element(s).
We could also have added more method calls if needed.
When chaining, the line of code could become quite long. However, jQuery is not very strict on the
syntax; you can format it like you want, including line breaks and indentations.
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
});
});
lesson 50
jQuery DOM Manipulation
Three simple, but useful, jQuery methods for DOM manipulation are:
- text() - Sets or returns the text content of selected elements
- html() - Sets or returns the content of selected elements (including HTML markup)
- val() - Sets or returns the value of form fields
lesson 51
jQuery DOM Manipulation - Example
Three simple, but useful, jQuery methods for DOM manipulation are:
- $(document).ready(function(){
- $("#btn1").click(function(){
- alert("Text: " + $("#test").text());
- });
- $("#btn2").click(function(){
- alert("HTML: " + $("#test").html());
- });
- });
lesson 52
jQuery DOM Manipulation - Example two
The following example demonstrates how to get the value of an input field with the jQuery val()
method:
- $(document).ready(function(){
- $("button").click(function(){
- alert("Value: " + $("#test").val());
- });
- });
lesson 53
Get Attributes - attr()
The jQuery attr() method is used to get attribute values.
The following example demonstrates how to get the value of the href attribute in a link:
- $(document).ready(function(){
- $("button").click(function(){
- alert($("#w3s").attr("href"));
- });
- });
lesson 54
Set Content - text(), html(), and val()
- $(document).ready(function(){
- $("#btn1").click(function(){
- $("#test1").text("Hello world!");
- });
- $("#btn2").click(function(){
- $("#test2").html("<b>Hello world!</b>");
- });
- $("#btn3").click(function(){
- $("#test3").val("Dolly Duck");
- });
- });
lesson 55
A Callback Function for text(), html(), and val()
The following example demonstrates text() and html() with a callback function:
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello world! (index: " + i + ")";
});
});
});
lesson 56
Set Attributes - attr()
The jQuery attr() method is also used to set/change attribute values.
The following example demonstrates how to change (set) the value of the href attribute in a link:
The attr() method also allows you to set multiple attributes at the same time.
The following example demonstrates how to set both the href and title attributes at the same time:
$("button").click(function(){
$("#w3s").attr({
"href" : "https: //www.w3schools.com/ jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
lesson 57
A Callback Function for attr()
The jQuery method attr(), also comes with a callback function. The callback function has two
parameters: the index of the current element in the list of elements selected and the original (old)
attribute value. You then return the string you wish to use as the new attribute value from the
function.
The following example demonstrates attr() with a callback function:
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
lesson 58
Add New HTML Content
We will look at four jQuery methods that are used to add new content:
- append() - Inserts content at the end of the selected elements
- prepend() - Inserts content at the beginning of the selected elements
- after() - Inserts content after the selected elements
- before() - Inserts content before the selected elements
jQuery append() Method
The jQuery append() method inserts content AT THE END of the selected HTML elements.
$("p").append("Some appended text.");
lesson 59
jQuery prepend() Method
The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML elements.
- $("p").prepend("Some prepended text.");
Finish level 3
lesson 60
Add Several New Elements With append() and prepend()
The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML elements.
function appendText() {
var txt1 = "<p>Text.</p>"; // Create text with HTML
var txt2 = $("<p> </p>").text("Text."); // Create text with jQuery
var txt3 = document.createElement("p");
txt3.innerHTML = "Text."; // Create text with DOM
$("body").append(txt1, txt2, txt3); // Append new elements
The following example sets the width and height of a specified
<div> element:
$("button").click(function(){
$("#div1").width(500).height(500);
});
lesson 76
jQuery Traversing - Ancestors
With jQuery you can traverse up the DOM tree to find ancestors of an element.
An ancestor is a parent, grandparent, great-grandparent, and so on.
Traversing Up the DOM Tree
Three useful jQuery methods for traversing up the DOM tree are:
parent()
parents()
parentsUntil()
jQuery parent() Method
The parent() method returns the direct parent element of the selected element.
This method only traverse a single level up the DOM tree.
The following example returns the direct parent element of each <span> elements:
$(document).ready(function(){
$("span").parent();
});
jQuery parents() Method
The parents() method returns all ancestor elements of the selected element, all the way up to the
document's
root element (<html>).The following example returns all ancestors of all <span>
elements:
