<!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>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<title>Hello query！！</title>
<style type="text/css">
#Button2
{
width: 359px;
}
.style2
{
width: 32px;
}
.style3
{
width: 28px;
}
.style4
{
width: 24px;
}
</style>
<script type="text/javascript">
var dom = document.getElementById("btnHide");
jquery = $(dom);
$("#btnShow").bind("click", function (event) { $("#divMsg").show(); });
jquery.bind("click", function (event) { $("#divMsg").hide(); });
$("#btnChange").bind("click", function (envent) { $("#divMsg").html("Hello World, too!"); });
$("#Button3").click(function () { $("#divParent+input").css("background", "blue"); }); //下面的按钮可以控制上面的以下所有的按钮
$("#alterColor").click(function () { $("#Button3~[id]").css("background", "red"); });
$("#alterTableColor").click(function () { $(".tab tr:first td").css("background", "green"); });
$("#testBT").click(function () { $("body input:odd").css("background", "red"); });
$("#testCK").click(function () { $("input:checked").css("background", "red"); });
$("#testCf").click(function () { $("div:contains('aa')").css("background", "red"); });
$("#testCF").click(function () { $("td:parent").css("background", "red"); });
$("#testAF").click(function () { $("div[id]").css("background", "red"); });
$("#testAF1").click(function () { $("div[id='aadiv22']").css("background", "#EDE"); });
$("#testAF2").click(function () { $("div[id='aadiv22']").css("background", "#EAE"); });
$("#testAF3").click(function () { $("input[name$='bb']").css("background", "#EHE"); });
$("#testAF4").click(function () { $("div[id$='11']").css("background", "#EUE"); });
</script>
</head>
<body>
<div >Hello world!</div>
<input type="button" />
<div /></div>
<input type="button" />
<input type="button" />
<input type="button" />
<input type="button" />
<input type="button" />
<input type="checkbox" />
<input type="button" />
<input type="button" />
<table class="tab">
<tr>
<td class="style2">
</td>
<td class="style3">
</td>
<td class="style4">
</td>
<td>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td class="style3">
</td>
<td class="style4">
</td>
<td>
<div>djjjjjjjj</div></td>
</tr>
<tr>
<td class="style2">
</td>
<td class="style3">
</td>
<td class="style4">
</td>
<td>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td class="style3">
</td>
<td class="style4">
</td>
<td>
</td>
</tr>
</table>
<div >aa内容过滤器的测试</div>
<input />
<input />
<div >
<div>dddddddddd
<div>ddddddddd</div>
<div>ddddddddd</div>
</div>
</div>
<div >gfffffffffff
<div>ddddddd
<div>ddddddddd</div>
<div>ddddd</div>
</div>
</div>
<div >gfffffffffff
<div>ddddddd
<div>ddddddddd</div>
<div>ddddd</div>
</div>
</div>
<input />
<input />
<input />
<input />
<input />
<input />
<input />
<input />
</body>
</html>
<script type="text/javascript">
var dom = document.getElementById("btnHide");
jquery = $(dom);
$("#btnShow").bind("click", function (event) { $("#divMsg").show(); });
jquery.bind("click", function (event) { $("#divMsg").hide(); });
$("#btnChange").bind("click", function (envent) { $("#divMsg").html("Hello World, too!"); });
$("#Button3").click(function () { $("#divParent+input").css("background", "blue"); }); //下面的按钮可以控制上面的以下所有的按钮
$("#alterColor").click(function () { $("#Button3~[id]").css("background", "red"); });
$("#alterTableColor").click(function () { $(".tab tr:first td").css("background", "green"); });
$("#testBT").click(function () { $("body input:odd").css("background", "red"); });
$("#testCK").click(function () { $("input:checked").css("background", "red"); });
$("#testCf").click(function () { $("div:contains('aa')").css("background", "red"); });
$("#testCF").click(function () { $("td:parent").css("background", "red"); });
$("#testAF").click(function () { $("div[id]").css("background", "red"); });
$("#testAF1").click(function () { $("div[id='aadiv22']").css("background", "#EDE"); });
$("#testAF2").click(function () { $("div[id!='aa']").css("background", "#EAE"); });
$("#testAF3").click(function () { $("div[id^='aa']").css("background", "#aaaddd"); });
$("#testAF4").click(function () { $("div[id$='22']").css("background", "#aaa111"); });
$("#testAF5").click(function () { $("div[id*='div']").css("background", "#aaa111"); });
$("#testAF6").click(function () { $("div[class][id^='bb']").css("background", "#aaa111"); });
$("#testButton").click(function () { $("input").css("background", "red"); });
</script>