Shape of the Day:
- Practice using different jQuery APIs, including css(), hide(), show(), and animate()
- Learn about jQuery events
Website of the Day:
https://www.worldsdumbestgame.com/ – jQuery showcase #3: are you bored enough to play?
- Open the same webpage file you have been working on called jQueryIntro.html
- Remember: $(“select something here”).API(“do something here”);.
- Example: $(“p”).css(“color” , “red”); makes all of your paragraphs red.
- 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.
- Now create a box using CSS. Figure out how to add a border to the box using jQuery.
- Review jQuery’s API documentation so you can see the different things you can do with jQuery.
- Create and interact with a hyperlink to http://jquery.com by adding script that creates an alert saying “Thanks for Visiting” upon clicking and before it goes to the actual website page.
- Now make the box disappear and come back using jQuery’s hide and show APIs. Start with hide . Select the box and make it hide after 2000 milliseconds (2 seconds). Figure out how to use the show API to bring the box back after 2 seconds. Create a second box and try either “fast” or “slow” instead of time in milliseconds.
- Basic animation part 1: Use slideUp and slideDown and fadeOut and fadeIn. 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”. You can remove the comment slashes after all is done and you’ll get to see all of the animations happen one after the other.
- Basic animation part 2: Animate the box by changing its width and height. First, comment out the previous code and add some new code below. Now select the box and then add animate.();. Inside the parenthesis add {height: “300px”}, 4000 which will change the height of the box from 250px to 300px over 4 seconds. Now 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).
jQuery Events
- Like JavaScript, jQuery can do things to the content on your page when someone scrolls, clicks, hovers the mouse, etc.
- First, review jQuery syntax
- Then 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 a new Visual Studio File, and save it as jqueryevents.html
- Follow the instructions inside the comments