Exercise - jQuery

Selectors

by Vijay Venkatan

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three <span>Spot</span></li>
</ul>

<div id="container">
    
    <h1>Selector time</h1>
    
    <p>Welcome</p>
    
    <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" />
            
            <input type="text" name="username" placeholder="username"  />

        </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;
}

ul{
    list-style:none;
    margin:0;
    padding:0;
    overflow:auto;
}

ul li{
    float:left;
    padding:0 10px 0 0;
}

JavaScript

// Advanced selectors
// And Modifying selections
//
// This exercise is intended to give you
// a feel for using modifiers on selections
// as well as the context selector
// 
// Follow the instructions below to select each
// element and apply a style change to them
//
// .css("border", "1px solid red");
// 

// 1.
// Get the unordered list (ul) that is NOT
// in #container
//$("ul").not("#container").css("border", "1px solid red");
// 2.
// Get the unordered list that has a "span"
// inside it
$("ul").has("span").find("span").css("border", "5px solid red");
// 3.
// Get the unordered list that is in #container
// Do so with the "context selector"
$("ul", "#container");
// 4a.
// Select all inputs and store them in a variable
var inputArray = $("input");
console.log(inputArray.length);

// 4b.
// Within the input results, filter it for all text inputs
var textInputArray = inputArray.filter("[type=\"text\"]");

// 4c. 
// Add input types of "date" to your previous selection
console.log("Hello : " , textInputArray.add("input[type=\"date\"]"));
// 5a.
// Get all fieldsets (store this for use later)
var fieldsetArray = $("fieldset");
console.log(fieldsetArray);
// 5b.
// Find all h2 elements inside the fieldset result from 5a
var h2Array = fieldsetArray.find("h2");
console.log(h2Array);
// 5c.
// Write the above as a "context selection" instead
var fieldsetArrayUsingContext = $("h2", "fieldset");
console.log(fieldsetArrayUsingContext);