In the past I wrote my JavaScript code directly talking to the DOM or via script libraries like Scriptaculous. Today I fell in love with jQuery. Since I just started using the library, here’s a little reminder on how to use some basic jQuery selectors.

<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        // Selectors by tag name
        var a = $('img'); // all images
        var b = $('img, p, div'); // all images, paragraphs and divs
        b.css('background-color', 'silver'); // set the background to silvergray

        // Selectors by id
        var c = $('#theButton'); // Select the button with id callServiceButton 
        c.val('Clicked'); // Set the button textvalue

        // Selectors by class name
        var d = $('.alertClass'); // Select elements with class .alertClass
        var e = $('div .alertClass'); // Select only div elements with class .alertClass
        e.css('border', '1px solid black'); // set the border of all found elements

        // Selectors by attribute value
        var f = $('div[title]'); // Select all divs with a title attribute
        var g = $('div[title="Alert title"]'); // where title is "Alert title"
        var h = $('input[type="Text"]'); // Select all textboxes
        g.html('<h1>Hello header one</h1>'); // set the divs innerHTML contents
        h.val('Hello input text'); // set the textbox value

        var i = $('div[title *= "alert"]'); // Containing alert
        var j = $('div[title ^= "alert"]'); // Starts with alert
        var k = $('div[title $= "alert"]'); // Ends with alert
        var l = $('tr:odd'); // Odd table rows

        // Input selectors
        var l = $(':input'); // Select all form asociated input elements
        var m = $('#myForm :input'); // within myForm
        j.each(function myfunction() { // show each of their values
            alert($(this).val());
        });
    });
</script>

<div id="alertId" title="Alert title" class="alertClass">HELP! I need a border</div>
<div id="myForm">
    <form action="/" method="post">
        <input type="text" name="textBox" value="I'm a textbox" />
        <textarea id="someTextArea">I'm a textarea</textarea>
        <input id="theButton" type="button" name="aButton" value="I'm a button" />
        <select>
            <option value="the selection">I'm a selection</option>
            <option value="not selected">Selection two</option>
        </select>
    </form>
</div>