<!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 id="divMsg">Hello world!</div>
<input type="button" id="btnShow" value="顯示" />
<div id="divParent"><div id="divChild">ddddd</div><div id="div1">ddddd</div><input type="button" id="btnHide" value="隱藏" /></div>
<input type="button" id="btnChange" value="修改後的結果爲hello world,too！" />
<input type="button" id="alterColor" value="改變紅色顏色"/>
<input type="button" id="Button3" value="改變爲藍色"/>
<input type="button" id="alterTableColor" title="13" value="改變表格的顏色"/>
<input type="button" id="testBT" value="測試基本過濾器"/>
<input type="checkbox" id="ck" value="是" checked="checked"/>
<input type="button" id="testCK" value="測試ck" />
<input type="button" id="Button2" title="13" value="dddd"/>
<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 id="CF">aa內容過濾器的測試</div>
<input id="testCf" type="button" value="內容過濾器測試"/>
<input id="testCF" type="button" value="內容過濾器測試2"/>
<div id="aadiv11">
<div>dddddddddd
<div>ddddddddd</div>
<div>ddddddddd</div>
</div>
</div>
<div id="aadiv22">gfffffffffff
<div>ddddddd
<div>ddddddddd</div>
<div>ddddd</div>
</div>
</div>
<div id="bbdiv22" class="divclass">gfffffffffff
<div>ddddddd
<div>ddddddddd</div>
<div>ddddd</div>
</div>
</div>
<input id="testAF" type="button" value="屬性過濾器測試含有id的變色"/>
<input id="testAF1" type="button" value="屬性過濾器測試1id爲aadiv22的變色"/>
<input id="testAF2" type="button" value="屬性過濾器測試2id不爲aa的變色"/>
<input id="testAF3" type="button" value="屬性過濾器測試3含有以name結尾的input變色"/>
<input id="testAF4" type="button" value="屬性過濾器測試4"/>
<input id="testAF5" type="button" value="屬性過濾器測試5選擇所有含有id爲div的變色"/>
<input id="testAF6" value="屬性過濾器測試5選擇所有含有id爲div的變色" type="button"/>
<input id="testButton" value="表單選擇器" type="button"/>
</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>