JQuery Selectors - Basic 2

by limd

HTML

<div>
    <li><a href="http://api.jquery.com/category/selectors/">Selectors Documentation</a></li>
    <li><a href="http://codylindley.com/jqueryselectors/">Selectors Examples</a></li>        
</div>
<form>
    <br/ > text1: <input type="text" name="text1" value="Hello" />
    <br/ > text2: <input type="text" name="text2" value="GoodBye" />
    <br/ > disabled text: <input type="text" name="text2" disabled="disabled" />
    <br/ > radio: <input type="radio" name="radio1" />
    <br /> textarea <textarea></textarea>   
</form>
<br />
<table>
    <tr><td>1</td><td>a</td></tr>
    <tr><td>2</td><td>a</td></tr>
    <tr><td>3</td><td>a</td></tr>
    <tr><td>4</td><td>a</td></tr>
    <tr><td>5</td><td>a</td></tr>
</table>

CSS

table{width: 20em;}
.RedBackground {background-color: Red;}
.yellowBorder{border: 1px solid Yellow ;}
.disabledTextBox{border: 1px solid Green;}


.tableRow{background-color: #efefef}
.tableAltRow{background-color: #ababab}
.firstCell{font-size:1.1em;}
.firstCellHover{font-size:1.5em;}

JavaScript

$(document).ready(function(){    
    
    // ----------------------------------------------------------------------------
        /* ATTRIBUTE SELECTORS */
    // ---------------------------------------------------------------------------    
    
    // select all input type text
    $('input[type="text"]').addClass('yellowBorder');
        
    // select input tags with disabled attribute
    $('input[disabled]').addClass('disabledTextBox');
    
    // special input selector - includes textarea,select etc
    var allInputs = $(':input');
    //alert(allInputs.length);
    
    $(':input').each(function()
                     {
                         var elem = $(this);
                        // alert(elem.val());
                     });
    
    // ----------------------------------------------------------------------------
        /* descendent SELECTORS */
    // ---------------------------------------------------------------------------     
    $('tr:even').addClass('tableRow');
    $('tr:odd').addClass('tableAltRow');
    
    $("table tr td:first-child")
        .addClass('firstCell')
        .hover(function () {
              $(this).removeClass('firstCell').addClass("firstCellHover");
            }, function () {
              $(this).removeClass("firstCellHover").addClass("firstCell");
            });
    
});