Wednesday, October 01, 2008

jQuery Basic Selectors usage example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="/lib/jquery/jquery-1.2.6.js"></script>
<style type="text/css" media="screen">
table td {
border: #ddd 1px solid;
div {
min-height: 20px;
border: #ddd 1px solid;
margin: 3px;
.colored {
background-color: #919;
<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>


<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>
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

<input type="checkbox" name="a" />

<input type="checkbox" name="b" />

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


<button id="run">Run</button>
<div id="mover"></div>

<script type="text/javascript" charset="utf-8">
// isSimple = /^.[^:#\[\.]*$/; // if id concludes such as ( :, #, [, ] ), you should backslashed these chararcters.
$("#myID\\.entry\\[1\\]").css("border","3px solid red");

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

// function animateIt() {
// // console.log('endless loop');
// $("#mover").slideToggle("slow", animateIt);
// }
// animateIt();
// $("#run").click(function(){
// $("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");


No comments :