Exercise - jQuery

Selectors

by Jennifer Piccione

HTML

<div id="container">
    
    <h1>Selector time</h1>
    
    <form id="user-registration">
        
        <input type="hidden" value="1" name="id" />
        
        <fieldset>
            
            <h2>Basic Details</h2>
                
            <input type="text" name="username" placeholder="username" />
            
            <input type="text" name="email" placeholder="email address" id="email-field" />

        </fieldset>
        
        <fieldset>
            
            <h2>Other Details</h2>
                
            <input type="date" name="birthdate" />
            
            <input type="submit" value="submit" />
            
        </fieldset>
        
    </form>
    
    <p></p>
    
    <table>
        <thead>
            <tr><th>First</th>
                <th>Second</th>
                <th>Third</th></tr>
        </thead>
        <tbody>
            <tr><td>one</td><td>two</td><td>three</td></tr>
            <tr><td>one</td><td>two</td><td>three</td></tr>
            <tr><td>one</td><td>two</td><td>three</td></tr>
        </tbody>
    </table>
    
    <div class="footer">
        <p>copyright</p>
        <ul>
            <li>Contact <p>Me</p></li>
            <li>Info
                <ul>
                    <li>Your info</li>
                    <li>My info</li>
                </ul>
            </li>
            <li>Junk</li>
        </ul>
    </div>
    
</div>

CSS

table{
    border:1px solid #666;
}
th{
    background-color:#666;
    color:#fff;
}
td {
    background-color:#f9f9f9;
    padding:2px;
}

#container{
    border:1px solid #ccc;
    padding:5px;
    border-radius:5px;
}

fieldset{
    outline:none;
    border:1px solid #666;
    border-radius:5px;
    padding:5px;
    margin:0 0 5px 0;
}

.footer ul p{
    display:inline;
}

.footer > p{
    text-align:center;
    font-size:10px;
    color:#999;
}

td:nth-child(2) {
    font-style:italic;
}

JavaScript

// Selector Matching
//
// Use jQuery to select the element 
// confirm your match by setting the background
// on the element
//
// You can use this pattern to set the color:
// $("selector").css("backgroundColor", "red");
// 

// 1) the container div
//$("div#container").css("backgroundColor", "red");

// 2) the heading (h1)
//$("h1").css("backgroundColor", "red");

// 3) the form
//$("form").css("backgroundColor", "red");

// 4) all hidden inputs
//$(":hidden").attr('type', 'text').css("backgroundColor", "red");

// 5) all fieldsets
//$("fieldset").css("backgroundColor", "red");

// 6) Just the first fieldset
//$("fieldset:first").css("backgroundColor", "red");

// 7) the username input field
//$("fieldset input:first").css("backgroundColor", "red");

// 8) the email input field
//$("fieldset input#email-field").css("backgroundColor", "red");

// 9) the second fieldset only
//$("fieldset:nth-child(3)").css("backgroundColor", "red");
//$("fieldset:eq(1)").css("backgroundColor", "red");

// 10) all input fields
//$("input").css("backgroundColor", "red");

// 11) all inputs in the second fieldset
//$("fieldset:nth-child(3) input").css("backgroundColor", "red");

// 12) all paragraphs in the footer
//$("div.footer p").css("backgroundColor", "red");

// 13) the table header row
//$("th").css("backgroundColor", "red");

// 14) the first cell in the first row of the table body
//$("table tbody td:first").css("backgroundColor", "red");

// 15) the third cell in the second row of the table
//$("table tbody td:eq(5)").css("backgroundColor", "red");

// 16) the second column in the table (hint:you will use "nth-child()")
//$("table tbody td:nth-child(2)").css("backgroundColor", "red");

// 17) all odd rows in the table
//$("table tbody tr:even td").css("backgroundColor", "red");

// 18) all unordered lists within an unordered list
//$("ul ul").css("backgroundColor", "red");

// 19) only paragraphs that are a direct child of the footer div
//$("div.footer >...