Exercise - jQuery

Selectors

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
//$(insert your selector).css("backgroundColor", "red");
$("#container").css("backgroundColor", "red");

// 2) the heading (h1)
$("h1").css("color", "green");

// 3) the form
$("form").css("border", "1px solid #f90");

// 4) the #container div (div with the id container)
$("#container");

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

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

// 7) the username input field
$("input[name='username']").css("border", "5px solid #ccc");

// 8) the email input field
$("input[name='email']").css("border", "5px solid #f90");

// 9) the second fieldset only
$("fieldset:nth-child(2)");

// 10) all input fields
$(":input");

// 11) all inputs in the second fieldset
$("fieldset:nth-of-type(2) input").css("backgroundColor", "orange");

// 12) all paragraphs in the footer
$(".footer p");

// 13) the table header row
$("thead tr th");

// 14) the first cell in the first row of the table body

$("tbody tr:first td:first").css("backgroundColor", "green");

// 15) the third cell in the second row of the table
$("tbody tr:nth-child(2) td:nth-child(3)").css("backgroundColor", "red");

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

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

// 18) all unordered lists within an unordered list
$("ul ul");

// 19) only paragraphs that are a direct child of the footer div
$(".footer > p").css("color", "yellow");

// 20) the last list item of the inner unordered list ("My Info")
$("ul li:last").css("color", "yellow");

// Bonus) all hidden inputs
//$(insert your...