mikedao/mostly_dead_presidents.md

## mostly_dead_presidents.md

      
    Raw
  

              mostly_dead_presidents.md
            
          
    Exercise, Part One: The Presidents

For this exercise, we're going to use a table of the Presidents of the United States of America.
Let's try out a few things, just to get our hands dirty. We'll use the console in the Chrome developer tools to validate our work.

Select each tr element.
Select the first tr element only.
Select the third tr element only.
Select all of the elements with the class of name.
Select all of the elements with either the class of name or term.
Select all of the checked—umm—checkboxes. (You'll probably want to check some checkboxes first.)
Select all of the td elements with the class of number that appear in a row of a tr with the class of whig.

Part Two: Manipulating CSS

Once we have an element in our sites, we probably want to do something with it, right?
In this case, let's add some CSS styling. We can add and remove classes pretty easily in jQuery.
$('.federalist').addClass('red');
$('.federalist').removeClass('red');
Keeping track of state is hard. jQuery is here to help. What if we were in a position where we want to add a class if an element had it, but remove it if it didn't? jQuery's hasClass method is certainly helpful in this case.
$('.federalist').hasClass('federalist'); // Returns true, obviously.
But, it seems like this is a common pattern and there should be a better way to do this, right?
The other option is to use toggleClass, which will either add or remove the class depending on whether or not the class currently exists.
$('.federalist').toggleClass('red');
(Do this like 17 times for good measure.)
Exercise, Part Two: Style the Presidents


Add the class of red to all of the Republicans.
Add the class of blue to all of the Democrats.
Add the class of yellow to the term column of the table.
Take all the whig presidents and give them a purple background and white text.

Part Three: Filtering and Traversal

Let's talk about a few DOM traversal methods.
Here are some of the all-stars of the DOM traversing world:
parent()

The parent() method will take the currently selected element and go one level up the DOM tree.
See the Pen jQuery Parent by Amy Holt (@ameseee) on CodePen.
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
parents()

This one will include all of the parents—all the way up to the <body> of the page. Additionally, you can pass it a selector. $('.some-selector').parents('.active') will traverse up the DOM, but only return the elements with the class of .active.
See the Pen jQuery Parents by Amy Holt (@ameseee) on CodePen.
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
children()

This method returns all of the direct childen of the given selection. It will not search their children. Like parents(), children() will also take a selector. $('.some-selector').children('.active') will go through the children of the current query and only return the elements with the class of .active.
See the Pen jQuery Children by Amy Holt (@ameseee) on CodePen.
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
siblings()

siblings() will select all of the sibling elements based on the current query. Like its friends, it will also take a selector if you're polite.
See the Pen jQuery Siblings by Amy Holt (@ameseee) on CodePen.
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
find()

One you have queried for some elements using jQuery, you can use find() to drill down a little deeper.
It's useful to think of find() as a more powerful alternative for children(). The children() method will look only one level down the tree. find() will search the children, the grandchildren, the great-grandchildren, and so on. The method will look at anything you currently have selected and then search within those results.
See the Pen jQuery Find by Amy Holt (@ameseee) on CodePen.
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
Which one do you use? It depends, do you want to traverse all the way down the tree or just down one level.
Exercise, Part Three: One-Term Presidents


Add the green class to anyone who served right after a president who died.
Find all of the presidents who only served one term and add the class red.
Add the class of blue to the parent of a checked checkbox.
Add the class of yellow to the siblings of the parent (td, in this case) of an unchecked checkbox.

Part Four: Adding to the DOM

Let's take a look at some approaches of changing content in the DOM.
text()

text() is like using innerText or textContent. There is an important difference. The vanilla DOM manipulation tools allow you to assign the new value to innerText. The jQuery methods on the other hand work on everything as if it were a method.
Let's compare and contrast.
var vanilla = document.querySelector('.some-element');
var jq = $('.some-element');

vanilla.textContent = 'New text.';
jq.text('New text.');
html()

html() is to text() as innerHTML is to innerText. Basically, change the HTML contents of a bigger element, not just the text of it. As a fun experiment, select an element and try to replace the contents to <script>alert('HACKED!');</script> using both text() and html(). Let me know how it goes for you.
append()

html() replaces the entire contents of an element. append() adds new content onto the end of it.
prepend()

html() replaces the entire contents of an element. prepend() adds new content onto the beginning of it.
In order to take both append() and prepend() for a spin, let's try the following code in the exercise below.
See the Pen Append/Prepend by Amy Holt (@ameseee) on CodePen.
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
Exercise, Part Four: Dead Presidents


Find all of the presidents who died in office (hint: they have a died class on their tr).
Append <span class="died">(Died)<span> to the the term column.
Bonus: Add a radio button before the number in each row.