Seven Simple Selector Exercises

As we have seen, you select items using CSS selectors and then DO somthing to them. Inside the DIV with id "special-container" below are 200 SPAN tags, each with one of 7 class tags for each color of the rainbow. They are generated at random. Let's do a few simple exercises to get started.

  • First - create the document ready wrapper. Everything else will go inside that. The reason: The javascript is at the TOP of the page, and if it gets called before the page is loaded, there will be no elements to select!
  • Next, select all of the spans with class of "red" and make the css "font-weight" property "bold"
  • Now, a simple demo that jQuery is just javascript. When you select things, you are creating an array of jQuery objects. So, you can use array functons like .length. Create an alert of how many orange tags there are;
  • Make every other yellow tag have a 1 pixel border (set "border" to "1px solid black")
  • Alan Greenspan is Exciting!!! So let's add (or, "append") 3 exclamation points to the end of each green span!!!
  • Let's use some Spanish too. For spans of class blue, remove the blue class and add an azul class. You can do this in one line by chaining the functions together. use addClass and removeClass
  • I always liked Skittles but not the purple ones. So purple has got to go. Let's give it a classy exit and fade it out over using fadeOut over 1 second (1000 miliseconds)
purple orange green blue blue red orange blue yellow yellow red purple red orange orange purple green purple orange orange green green red blue yellow purple yellow green yellow orange red red orange orange blue orange blue yellow yellow red green green orange purple orange orange red purple purple orange purple yellow green blue blue purple red orange blue yellow purple green blue orange blue orange blue green orange yellow yellow orange yellow orange blue orange red green yellow purple yellow orange orange green red orange red purple purple yellow purple red blue green purple purple red purple red red orange red red blue purple red blue red red green purple orange blue purple red yellow red purple green purple blue blue green yellow blue red blue blue red orange green red orange red orange orange orange blue blue green yellow green green blue blue orange red green red orange yellow green red orange blue red yellow red red blue orange yellow red green blue purple red