Exercise - jQuery

Selectors

by Nithi Nadar

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:

// change h2 color to green
$("h2").css("backgroundColor", "green");

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

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

// 3) the form
$("#user-registration").css("backgroundColor", "gray");
  
// 4) all hidden inputs
$("input[type='hidden']").attr('type', 'text').css("backgroundColor", "turquoise");

// 5) all fieldsets
$("fieldset").css("backgroundColor", "purple");
  
// 6) Just the first fieldset
$("fieldset:first").css("backgroundColor", "black");

// 7) the username input field
$("input[name='username']").attr('value','Thangathamizhnithi');

// 8) the email input field
var $emailField = $("input[name='email']");
$emailField.attr('value','[email protected]');
$emailField.css("backgroundColor", "#eedd90");

// 9) the second fieldset only: MUST use nth-of-type not nth-child
$("fieldset:nth-of-type(2)").css("backgroundColor", "pink");

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

// 12) all paragraphs in the footer
$("p", ".footer").css("backgroundColor", "#847482");
    
// 13) the table header row
$("tr th").css("backgroundColor", "magenta");
  
// 14) the first cell in the first row of the table body
$("tbody tr:nth-child(1) td:first").css("backgroundColor", "coral");
    
// 15) the third cell in the second row of the table
$("tbody tr:nth-child(2) td:nth-child(3) ").css("backgroundColor", "tomato");

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

// 17) all odd rows in the table
$("tbody tr:nth-child(1) td:first").css("backgroundColor", "coral");

// 18) all unordered...