Today’s goals:

• Practice using different jQuery APIs, including css(), hide(), show(), and animate()
• Learn about jQuery events

 Today’s featured site:

• https://www.worldsdumbestgame.com/ – jQuery showcase #3: are you bored enough to play?

 jQuery Practice
Adding jQuery code

1. Review: $(“select something here”).API(“do something here”);. Example: $("p").css("color" , "red"); makes all of your paragraphs red.
2. On Monday we learned how to select elements and used several jQuery APIs, including addClass(), removeClass(), css(), html(), etc.
3. Let’s begin by selecting the paragraph and drawing a border around it by using jQuery’s CSS API . Make the border’s value 1px solid black.
4. How could we add a border to the box we created?
5. Before we pick up with where we left off yesterday, let’s review jQuery’s API documentation  so you can see the different things you can do with jQuery.
6. Let’s now interact with our hyperlink by grabbing some of the sample code from here . What do you think this code will do?
7. We’re going to make this box disappear and then come back again use jQuery’s hide and show APIs. Let’s start with hide . We’re going to select our box and make it hide after 2000 milliseconds (2 seconds). How can we use the show API  to bring the box back after 2 seconds? Let’s also try “fast” and “slow” instead of time in milliseconds.
8. Basic animation part 1: Let’s use slideUp and slideDown and fadeOut and fadeIn. Let’s comment out the hide and show code by adding // before it and make the box slide up and down and also fade out and in by adding new code below. You can also add time in milliseconds for the animation or use “fast” and “slow”.
9. Basic animation part 2: Let’s animate the box by changing its width and height. First, let’s comment out the previous code and add some new code below. Now let’s select the box and then add animate.();. Inside the parenthesis we’ll add {height: "300px"}, 4000 which will change the height of the box from 250px to 300px over 4 seconds. Now let’s change the width and height at the same time. Note: jQuery’s animate API  can be used with any NUMERIC CSS property (a CSS property that takes a number as a value).
10. Code check: Download today’s code here  to compare with your own for trouble-shooting

 jQuery Events

• Like JavaScript, jQuery can do things to the content on your page when someone scrolls, clicks, hovers the mouse, etc.
• First, let’s review jQuery syntax
• Let’s also review jQuery selectors; pay special attention to $(this)
• Now let’s look at jQuery events
• More practice code: download this code , copy and paste it into Notepad++, and save it as jqueryevents.html
• Let’s follow the instructions inside the comments
• Code check: Download here  to compare with your own for trouble-shooting
• Up Next JavaScript vs jQuery – starting Monday!