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 blue yellow purple green yellow green red yellow green purple green red yellow yellow orange blue purple blue purple orange purple blue yellow yellow blue red orange orange yellow blue green green red red orange green red blue green yellow purple red orange green yellow yellow purple red yellow red yellow orange blue red purple green yellow yellow yellow yellow orange green purple green blue green red red green yellow green orange green purple yellow purple purple green yellow blue blue orange blue red green orange orange purple purple orange blue green purple blue blue yellow red red blue green yellow blue green blue yellow orange purple orange yellow purple orange orange red yellow red purple yellow yellow yellow purple orange red green green red green orange blue yellow orange red purple blue yellow yellow orange red purple red yellow red red purple orange purple red green orange purple purple orange yellow orange yellow purple green orange blue orange yellow green blue orange purple yellow blue purple blue purple green