jQuery Basic Selectors usage example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<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;
}
</style>
</head>
<body>
<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">
// 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);
// }
// 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");
</script>
</body>
</html>
No comments :
Post a Comment