jquery-1.2.6 basic selectors usage example

css

table td {
    border: #ddd 1px solid;
}
div {
    min-height: 20px;
    border: #ddd 1px solid;
    margin: 3px;
}
.colored {
    background-color: #919;
}

html

<div id="myID.entry[0]">id="myID.entry[0]"</div>
<div id="myID.entry[1]">id="myID.entry[1]"</div>
<div id="myID.entry[2]">id="myID.entry[2]"</div>
<span>span</span>
<p>p</p>
<p>p</p>
<div>div</div>
<span>span</span>

<p>p</p>
<div>div</div>
<b></b>

<table>
    <tr>
        <td>Row with Index #0</td>
    </tr>
    <tr>
        <td>Row with Index #1</td>
    </tr>
    <tr>
        <td>Row with Index #2</td>
    </tr>
    <tr>
        <td>Row with Index #3</td>
    </tr>
    <tr>
        <td>Row with Index #4</td>
    </tr>
    <tr>
        <td>Row with Index #5</td>
    </tr>
    <tr>
        <td>Row with Index #6</td>
    </tr>
    <tr>
        <td>Row with Index #7</td>
    </tr>
    <tr>
        <td>Row with Index #8</td>
    </tr>
    <tr>
        <td>Row with Index #9</td>
    </tr>
</table>
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

<div>
    <input type="checkbox" name="a" />
    <span>Mary</span>
</div>

<div>
    <input type="checkbox" name="b" />
    <span>Paul</span>

</div>
<div>
    <input type="checkbox" name="c" />

    <span>Peter</span>
</div>

<button id="run">Run</button>
<div></div>
<div id="mover"></div>
<div></div>
<script type="text/javascript" charset="utf-8" src="/lib/jquery/jquery-1.2.6.js"></script>

javascript

// isSimple = /^.[^:#\[\.]*$/;
// if id concludes such as ( :, #, [, ] ), you should backslashed these chararcters.
console.log($("#myID\\.entry\\[0\\]"));
$("#myID\\.entry\\[1\\]").css("border", "3px solid red");


var list = $("div,p,span").map(function() {
    return this.tagName;
}).get().join(", ");
$("b").append(document.createTextNode(list));

function animateIt() {
    // console.log('endless loop');
    $("#mover").slideToggle("slow", animateIt);
}

$("#run").click(function(){
    animateIt();
    $("div:animated").toggleClass("colored");
});

$("tr:even").css("background-color", "#bbf");
$("tr:odd").css("background-color", "#ffb");

// Matches all elements that are headers, like h1, h2, h3 and so on.
$(":header").css({
    background: '#ccc',
    color: 'blue'
});

$("input:last")[0].checked = true;
$("input:not(:checked) + span").css("background-color", "yellow");
$("input").attr("disabled", "disabled");

$("td:lt(4)").css("color", "red");
$("td:gt(4)").css("color", "green");