<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>JQuery Selector</title>
<script type=”text/javascript” src=”jquery-1.3.2.js”></script>
<script type=”text/javascript”>
$(function(){
$(“h1,h2”).css(“color”,”Red”); //element selector
$(“.warning”).css(“font-style”,”italic”); //class selecotr
$(“p.warning”).css(“color”,”Red”);
$(“p.big.warning”).css(“font-size”,”x-large”);//multi-class selector
$(“*[id]”).css(“color”,”red”); //attribute selector
$(“p[class]”).css(“color”,”blue”);
$(“p[class][id]”).css(“font-size”,”x-large”);
$(“div[title=’title’]”).css(“font-weight”,”bold”);
$(“div[title^=’title’]”).css(“color”,”red”);
$(“div[title$=’World’]”).css(“color”,”blue”);
$(“div[title~=’Hello’]”).css(“font-size”,”x-large”);
$(“div[title*=’Hello’]”).css(“font-style”,”italic”);
$(“div[title|=’Hello’]”).css(“background-color”,”silver”);
$(“p .warning”).css(“font-size”,”x-large”); //decendent selector
$(“body > .warning”).css(“border”,”1px solid”); //child selector
});
</script>
</head>
<body>
<h1>
This is H1</h1>
<h2>
This is H2</h2>
<h3>
This is H3</h3>
<p class=”warning”>
Real Warning!</p>
<span class=”warning”>Common Worning</span>
<p class=”big warning “>
Warning and Big</p>
<div id=”title”>
I am title</div>
<p class=”warning”>
Real Warning!</p>
<p id=”idp1″ class=”myclass”>
P with an ID and class</p>
<p>
The last line.</p>
<p id=”idp2″>
P with an ID</p>
<div title=”title” >I am title</div>
<div title=”title2″>I am title2</div>
<div title=”Hello World”>Hello World</div>
<div title=”HelloWorld”>HelloWorld</div>
<div title=”Hello-World”>Hello-World</div>
<p><span class=”warning”>Class warning inside p</span></p>
