Exercise Wednesday

Goal: In the Simple effects lesson, we learned:

  • How to show and hide elements using show() and hide()
  • How to toggle with toggle()
  • How to style a link with CSS
  • How to use <span> tags to limit the scope of CSS and JavaScript
  • Classes are used for elements that show up in multiple places on our web page
  • IDs are used for an element that shows up only once on our web page
  • When we use JavaScript to manipulate a web page, we are really manipulating the DOM, not just the HTML structure or styling.

Now, let's begin to familiarize ourselves with jQuery by completing the exercises detailed below.

Warm Up

  • How do we tell jQuery which part of the page to add an effect to? What does the code look like?
  • What is the DOM? How do we interact with it?
  • When do we use an id? What about a class?


jQuery Effects Practice

  • On the walrus page, add some clickable text that alternates between saying Hide image and Show image and toggles the walrus image.
  • On either the walrus page or the webpage from the previous exercise, try fading and sliding elements with these jQuery methods:
    • fadeIn(),
    • fadeOut(),
    • fadeToggle(),
    • slideDown(),
    • slideUp(), and
    • slideToggle().
  • Make a webpage with a few different sections, where a few of the sections are hidden by default, with a bit of teaser text that expands when you click on it (e.g., "Click to learn about the giant sandcastles of this fabulous country!"). Be creative!

Lesson 38 of 65
Last updated May 23, 2022