1. IS2802 Introduction to Multimedia Applications for Business Lecture 07: Introduction to jQuery Rob Gleasure R.Gleasure@ucc.ie www.robgleasure.com

2. 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

3. 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’

4. 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 like  Pointing to one of the hosted versions online, e.g.

5. 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();

6. 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 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 elements $("#header").hide();// this runs.hide() on the element with ID="header" $(".item").hide();// this runs.hide() on all elements with class="item"

7. 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();

8. How do we select an object (continued)? More examples from http://www.w3schools.comhttp://www.w3schools.com

9. 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

10. An example Try out the following code Lecture 28 example $(document).ready(function(){ $("#demo_button").click(function(){ $("h2.example").hide(); }); This heading is a h2 with class set to 'example' This heading is a h3 with class set to 'example' This heading is a h3 with no assigned class value

11. 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:

12. 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");

13. Another example Try out the following code Lecture 28 example 2 $(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"); }); Hover on and off this paragraph, then try clicking it.

14. 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)

15. Another example Try out the following code Lecture 28 example 3 $(document).ready(function(){ $("#fade_button").click(function(){ $("#div1").slideToggle(); $("#div2").slideToggle("slow"); $("#div3").slideToggle(2000); }); Click the button, then click it again to watch the boxes fade in and out

16. 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() });

17. Another example Try out the following code Lecture 28 example 4 $(document).ready(function(){ $("#wheeew").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', width:'150px'}, 1000, function(){ $("div").slideUp(); });

18. jQuery and callback Within the example on the previous slide we included a callback function as the 4 th 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

19. jQuery and queuing This brings us to an important point about queuing - animations can make JavaScript seem out of sync  Try the following code Lecture 29 example 1 $(document).ready(function(){ $("#button1").click(function(){ $("#firstP").fadeOut(2000); $("#secondP").fadeOut(500); $("#thirdP").fadeOut(2500); }); This is the first paragraph. This is the second paragraph. This is the third paragraph.

20. 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 Lecture 29 example 1 $(document).ready(function(){ $("#button1").click(function(){ $("#firstP").fadeOut(2000, function(){ $("#secondP").fadeOut(500, function() { $("#thirdP").fadeOut(2500); }) }); This is the first paragraph. This is the second paragraph. This is the third paragraph.

21. jQuery and.stop() You can also use the.stop() function to cease animations Lecture 29 example 2 $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); Click here to slide down panel Wahey

22. 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();

23. jQuery and chaining Try out this code Lecture 29 example 3 $(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); }); Click the crazy button

24. 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"));

25. 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 Lecture 29 example 3 $(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); }); Click the crazy button

26. 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 Lecture 29 example 3 $(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"); }); Click the crazy button

27. 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 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