<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Demo</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css">p {background-color: yellow;}</style> </head> <body> <h1 id="head1">Heading 1</h1> <p>First line of text.</p> <p>Second line of text.</p> <p>Third line of text.</p> <img id ="picture" src="eightball.gif" alt="eight ball" /> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="my_code.js"></script> </body> </html>
Declare a variable using the var keyword. Initialize using the = symbol. Example: var hText = "This is just some text." - Click on the heading to see the text displayed in the <p> elements.
$(document).ready(function() { var hText = "This is just some text."; $("h1").click(function() { $("p").text(hText); }); });
Read text from an element using the text() method. Example: var hText = $("#head1").text() - Click on the heading to see the text displayed in the <p> elements.
$(document).ready(function() { var hText = $("#head1").text(); $("h1").click(function() { $("p").text(hText); }); });
Combine strings using the + symbol. Example: var text2 = text1 + hText - Click on the heading to see the text displayed in the <p> elements.
$(document).ready(function() { var hText = $("#head1").text(); var text1 = "The heading text is "; var text2 = text1 + hText; $("h1").click(function() { $("p").text(text2); }); });
Variables can be initialized with a combined string. Example: var hText = "The heading text is " + $("#head1").text() - Click on the heading to see the text displayed in the <p> elements.
$(document).ready(function() { var hText = "The heading text is " + $("#head1").text(); $("h1").click(function() { $("p").text(hText); }); });
Declare a variable using the var keyword. Initialize using the = symbol. Example: var lineNum = 0 - Click on the heading to change the background color of the first <p> element.
$(document).ready(function() { var lineNum = 0; $("h1").click(function() { $("p").eq(lineNum).css("background-color", "red"); }); });
Math operations can be performed on numeric variables. Example: lineNum = aNumber - 4; - Click on the heading to change the background color of the second <p> element.
$(document).ready(function() { var lineNum = 0; var aNumber = 5; lineNum = aNumber - 4; $("h1").click(function() { $("p").eq(lineNum).css("background-color", "red"); }); });
Increment numeric variables by following the variable name with ++. The "if" statement can be used to test if a condition is true. Example: lineNum++; if (lineNum > 2) {lineNum = 0;} - Repeatedly click on the heading to cycle thru the background colors of the <p> elements.
$(document).ready(function() { var lineNum = 0; $("h1").click(function() { $("p").css("background-color", "yellow"); $("p").eq(lineNum).css("background-color", "red"); lineNum++; if (lineNum > 2) {lineNum = 0;} }); });
Declare a variable using the var keyword. Initialize using the = symbol. Enclose comma separated strings in square brackets [ ]. Example: var imageName = ["floatingball.gif", "redball.gif", "eightball.gif"] - Click on the image to change the picture.
$(document).ready(function() { var imageName = ["floatingball.gif", "redball.gif", "eightball.gif"]; var indexNum = 0; $("#picture").click(function() { $("#picture").attr("src", imageName[indexNum]); indexNum++; if (indexNum > 2) {indexNum = 0;} }); });
Click on the image to fade-out the old image and fade-in the new one.
$(document).ready(function() { var imageName = ["floatingball.gif", "redball.gif", "eightball.gif"]; var indexNum = 0; $("#picture").click(function() { $("#picture").fadeOut(300, function() { $("#picture").attr("src", imageName[indexNum]); indexNum++; if (indexNum > 2) {indexNum = 0;} $("#picture").fadeIn(500); }); }); });