is2802 introduction to multimedia applications for business lecture 07: introduction to jquery rob...
DESCRIPTION
What is jQuery? jQuery is an open-source library/framework of JavaScript functions jQuery makes it easier to Manipulate objects in the HTML DOM, particularly their CSS Create animations and handle events Create AJAX functionality (we’ll come back to this) The whole point is to make it easier to get the best out of JavaScript It’s often summed up with the slogan ‘Write less, do more’TRANSCRIPT
IS2802Introduction to Multimedia Applications for BusinessLecture 07: Introduction to jQuery
IS2802
Today’s lecture What is jQuery? How do we include jQuery in our site? How does jQuery work? The jQuery syntax Changing CSS with jQuery Running jQuery animations
What is jQuery?
jQuery is an open-source library/framework of JavaScript functions
jQuery makes it easier to Manipulate objects in the HTML DOM, particularly their CSS Create animations and handle events Create AJAX functionality (we’ll come back to this)
The whole point is to make it easier to get the best out of JavaScript It’s often summed up with the slogan ‘Write less, do more’
How do we include jQuery in our site? To make use of jQuery, we need to include the jquery.min.js file.
We can do this by either: Saving it to our server, then pointing to it with a line in the
<head> like
<script src="jquery-1.8.3.min.js"></script>
Pointing to one of the hosted versions online, e.g.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
How does jQuery work?
We always start with a call to the jQuery() function, i.e. we tell the JavaScript interpreter we’re using the jQuery library For shorthand, jQuery() is written as $(),
We then Pass an argument to the jQuery function telling it what
HTMLElement object(s) we wish to manipulate Run some jQuery function on that HTMLElement i.e.
$(object-we-want-to-find).function-we-want-to-run();or
$(selector).action();
How do we select an object?
We find the HTMLElement(s) we want in a similar way we did with CSS, e.g. with a p to find <p> elements, or with #header to find the HTMLElement with an id = ‘header’, or with . item to find HTMLElements with a class = ‘item’
Examples of this include
$("p").show(); // this runs .show() on all <p> elements
$("#header").hide(); // this runs .hide() on the element with ID="header"
$(".item").hide(); // this runs .hide() on all elements with class="item"
How do we select an object (continued)? There are also other (way less common) ways we may find HTMLElements
Commonly used examples include:
// This runs .hide() on all elements whose ID contains the string 'left'$("[id*='left']").hide();
// This runs .hide() on all elements whose ID begins with 'left'$("[id^='left']").hide();
// This runs .hide() on all elements whose ID ends with 'left'$("[id$='left']").hide();
How do we select an object (continued)? More examples from http://www.w3schools.com
The document.ready() function
We will generally* nest all of our jQuery inside of a call to document.ready() This means the jQuery code will only run once the HTML document
has finished loading This stops the jQuery from crashing because it couldn’t find a
HTMLElement that hadn’t yet been rendered
In practice this will look like
$(document).ready(function(){$("#welcome_message").hide();});
* We only do this if our code is in the HTML document, not if it's external
An example
Try out the following code
<html><head> <title> Lecture 28 example </title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){$("#demo_button").click(function(){$("h2.example").hide();});});</script></head><body><h2 class="example">This heading is a h2 with class set to 'example'</h2><h3 class="example">This heading is a h3 with class set to 'example'</p><h3>This heading is a h3 with no assigned class value</p><input type="button" id="demo_button" value="Click me" /></body></html>
jQuery and DOM events
The previous example used the .click() event
jQuery may respond to any number of DOM events
Some common examples (take from w3schools) include:
Using jQuery to manipulate Elements' CSS One of the most common uses of jQuery is to change the value of a
HTMLElement's CSS properties
This is done using a call to the .css() function which takes the CSS property to be changed and the new value for that CSS property as arguments
e.g.
$("#header").css("background-color", "#000");
Another example
Try out the following code
<html><head> <title> Lecture 28 example 2</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){$("#crazy_paragraph").mouseenter(function(){$("#crazy_paragraph").css("background-color", "#80FF55");});$("#crazy_paragraph").mouseleave(function(){$("#crazy_paragraph").css("background-color", "#FFFFFF");});$("#crazy_paragraph").click(function(){$("#crazy_paragraph").css("border-style", "solid");});});</script></head><body><p id="crazy_paragraph">Hover on and off this paragraph, then try clicking it. </p></body></html>
Common jQuery functions
Some of the common jQuery functions you will come across include: .hide() // makes an element hidden .show() // makes a hidden elements visible .toggle() // hides visible elements/makes hidden elements // visible .slideUp(), slideDown(), slideToggle() // displays/hides elements in //
sliding motion .fadeIn(), .fadeOut(), fadeToggle() // displays/hides elements in
// gradual fade
Each of these can be called without arguments, or alternatively versions can be called with two details changed, i.e. the duration of the animation and what to do when the animation has finished (we'll come back to this next class)
Another example
Try out the following code
<html><head> <title> Lecture 28 example 3</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){$("#fade_button").click(function(){$("#div1").slideToggle();$("#div2").slideToggle("slow");$("#div3").slideToggle(2000);});});</script></head><body><h4>Click the button, then click it again to watch the boxes fade in and out</h4><input type="button" value ="Click me" id="fade_button"><br><br><div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div></body>
</html>
Common jQuery functions
Another common animation function is the generic .animate() We always give .animate() two sets of arguments within curly braces: one or more
CSS properties to change and one or more values to which to change those properties
e.g. $("div").animate({ color:'red'} );
We may then optionally give it two other arguments, a value for speed (in milliseconds or simply 'slow' or 'fast') and a function to be called when the animation is complete
e.g.$("div").animate({ color:'red' }, 1000, function(){ $(this).fadeOut() });
Another example
Try out the following code
<html><head> <title> Lecture 28 example 4</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script> $(document).ready(function(){$("#wheeew").click(function(){$("div").animate({ left:'250px', opacity:'0.5', width:'150px'}, 1000, function(){ $("div").slideUp();});});});</script> </head><body><input type="button" value="Click me" id="wheeew"><div style="background:red;height:500px;width:500px;position:absolute;"></div></body>
</html>
jQuery and callback
Within the example on the previous slide we included a callback function as the 4th argument for the reference to .animate()
i.e. $("div").animate({
left:'250px', opacity:'0.5', width:'150px'}, 1000, function(){
$("div").slideUp();});
This function will only run once the animation has completed
jQuery and queuing
This brings us to an important point about queuing - animations can make JavaScript seem out of sync Try the following code
<html><head> <title> Lecture 29 example 1</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){$("#button1").click(function(){$("#firstP").fadeOut(2000);$("#secondP").fadeOut(500);$("#thirdP").fadeOut(2500);});});</script></head><body><input type="button" value="show timing issues" id="button1"><p id="firstP">This is the first paragraph.</p><p id="secondP">This is the second paragraph.</p><p id="thirdP">This is the third paragraph.</p></body></html>
jQuery and queuing
fade(), hide(), etc. can also be called with a duration and a callback function With callback, the previous example can be set to execute these
functions one after the other <html>
<head> <title> Lecture 29 example 1</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){$("#button1").click(function(){$("#firstP").fadeOut(2000, function(){$("#secondP").fadeOut(500, function() { $("#thirdP").fadeOut(2500); })})});});</script></head><body><input type="button" value="show timing issues" id="button1"><p id="firstP">This is the first paragraph.</p><p id="secondP">This is the second paragraph.</p><p id="thirdP">This is the third paragraph.</p></body>
</html>
jQuery and .stop()
You can also use the .stop() function to cease animations<html><head> <title> Lecture 29 example 2</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script> $(document).ready(function(){$("#flip").click(function(){$("#panel").slideDown(5000);});$("#stop").click(function(){$("#panel").stop();});});</script></head><body><input type="button" id="stop" value="Stop the animation"><div id="flip" style="background-color:#e5eecc;">Click here to slide down panel</div><div id="panel" style="background-color:#e5eecc; display:none; height:500px">Wahey</div></body></html>
jQuery and chaining
This brings us to one of the most powerful aspects of jQuery animations – chaining
Chaining allows us to run multiple jQuery functions on an element in a single statement
The syntax for this is very straightforward, we simply include the function calls one after the other within the statement
$("the-HTMLElement").someFunction().someOtherFunction(); e.g.
$("#firstP"). slideToggle().css('opacity', '0.5').slideToggle(1000).fadeOut();
jQuery and chaining
Try out this code<html>
<head> <title>Lecture 29 example 3</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script> $(document).ready(function(){
$("#button1").click(function(){ $("#button1").css("opacity","1")
.animate({top:"300px"}, 150) .animate({left:"500px"}, 150)
.animate({top:"0px"}, 150) .animate({left:"0px"}, 150) .animate({top:"0px"}, 50);
});});
</script></head><body>
<p id="p1">Click the crazy button</p><input type="button" style="position:relative;opacity:0.5;" id="button1" value="Click me" />
</html>
jQuery, attributes and HTML content jQuery does more than make it easy to manipulate CSS, it also lets
us manipulate the content and attributes of HTML elements
Usually we will retrieve content with one of the following three functions .text() pulls the basic text out of a HTMLElement(s) .html() pulls all of the innerHTML out of a HTMLElement .val() pulls the value out of input fields
We will retrieve attribute values with the .attr() function, to which we provide the attribute to be retrieved as an argument e.g.
var x = "the image source is " + ($("#my_image").attr("src"));
jQuery, attributes and HTML content To set the text content, innerHTML or value in an input we call the
same functions with a new value as input<html>
<head><title>Lecture 29 example 3 </title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>
$(document).ready(function(){$("#button1").click(function(){
$("#p1").text("You clicked it, you're crazy!");$("#button1").css("opacity","1")
.animate({top:"300px"}, 150).animate({left:"500px"}, 150)
.animate({top:"0px"}, 150)
.animate({left:"0px"}, 150)
.animate({top:"0px"}, 50);});
});</script>
</head><body>
<p id="p1">Click the crazy button</p><input type="button" style="position:relative;opacity:0.5;" id="button1" value="Click me" />
</html>
jQuery, attributes and HTML content The attr() function is given two arguments when used to set, the
name of the attribute and the new value<html>
<head><title>Lecture 29 example 3 </title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>
$(document).ready(function(){$("#button1").click(function(){
$("#p1").text("You clicked it, you're crazy!");$("#button1").css("opacity","1")
.attr("value", "WWWWWwwwwhhhhhhheeeeeeeeeewwwwwwwWW")
.animate({top:"300px"}, 150)
.animate({left:"500px"}, 150)
.animate({top:"0px"}, 150)
.animate({left:"0px"}, 150)
.animate({top:"0px"}, 50, function(){
$(this).attr("value", "Click me");
});});
});</script>
</head><body>
<p id="p1">Click the crazy button</p><input type="button" style="position:relative;opacity:0.5;" id="button1" value="Click me" />
</html>
Want to read more? Links and references
Some nice introductions to jQuery http://www.w3schools.com/jquery/default.asp http://webdeveloperpost.com/Articles/10-most-useful-jQuery-
functions-for-your-website.aspx#Commonly-Used-jQuery-Selectors
The full jQuery library available online http://api.jquery.com
You can also add HTMLElements in more elaborate ways and append/prepend content – if you want to read more on this, have a look at http://www.w3schools.com/jquery/jquery_dom_add.asp