<html>
<head runat="server">
<title></title>
<style type="text/css">
div, span, p
{
width: 140px;
height: 140px;
margin: ==5px;
background: #aaaa;
border: #0001pxsolid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini
{
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide
{
display: none;
}
div.test
{
display: none;
}
</style>
<script src="scripts/jquery-1.3.2.js" type="text/javascript"></script>
</head>
<body>
<div class="test">
<h1>
在櫪蟈蟈枷</h1>
<h2>
你個大癢癢</h2>
<div class="one" id="one">
id爲one，class爲one的div
<div class="mini">
class爲mini</div>
</div>
<div class="one" id="two" title="test">
id爲two,class爲one,title爲test的div
<div class="mini" title="other">
class爲mini,title爲other</div>
<div class="mini" title="test">
class爲mini,title爲test</div>
</div>
<div class="one">
<div class="mini">
class爲mini</div>
<div class="mini">
class爲mini</div>
<div class="mini">
class爲mini</div>
<div class="mini">
</div>
</div>
<div class="one">
<div class="mini">
class爲mini</div>
<div class="mini">
class爲mini</div>
<div class="mini">
class爲mini</div>
<div class="mini" title="tesst">
class爲mini,title爲tesst</div>
</div>
<div style="display: none;" class="none">
style的display爲"None"的div
</div>
<div class="hide">
class爲hide的div</div>
<div>
包含input的type爲“hidden”的div<input type="hidden" size="8" />
</div>
<span id="mover">正在執行動畫的span元素</span>
</div>
<form id="form1" action="#">
可用元素：<input name="add" value="可用文本" /><br />
不可用元素：<input name="email" disabled="disabled" value="不可用文本" /><br />
可用元素：<input name="che" value="可用文本" /><br />
不可用元素：<input name="name" disabled="disabled" value="不可用文本" /><br />
多選框:<br />
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<div>
</div>
<br />
<br />
下拉列表1:<br />
<select name="test" multiple="multiple" style="height: 100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北涼</option>
<option selected="selected">天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<br />
<br />
下拉列表2：<br />
<select>
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北涼</option>
<option>天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<div>
</div>
</form>
</body>
</html>
<script type="text/javascript" language="javascript">
//一、基本選擇器
//$('#one').css("background", "#bbffaa");
//$('.mini').css("background", "#bbffaa");
//$('div').css("background", "#bbffaa");
//$('*').css("background", "#bbffaa");
//二、層次選擇器
//$('span,#two').css("background", "#bbffaa");
//$('body div').css("background", "#bbffaa"); //〈body>內所有<div>的背景色
//$('body > div').css("background", "#bbffaa"); //改變body內<div>的子元素背景色
//$('.one+div').css("background", "#bbffaa"); //改變class爲one的下一個<div>元素背景色(等價)==$('.one').next('div');
//$('#two~div').css("background", "#bbffaa");//改變id爲two之後的所有兄弟爲div的背景色(等價)==$('#two').nextAll('div');
//$('#two').siblings('div').css("background", "#bbffaa");//改變id爲two的所有兄弟爲div的背景色(所有同輩元素)
//三、過濾選擇器
//1.基本過濾選擇器
//$('div:first').css("background", "#bbffaa"); //改變第一個<div>元素的背景色
//$('div:last').css("background", "#bbffaa"); //改變最後一個<div>元素的背景色
//$('div:not(.one)').css("background", "#bbffaa");//改變class不爲one的<div>元素背景色
//$('div:even').css("background", "#bbffaa"); //改變索引值爲偶數的<div>元素背景色
//$('div:odd').css("background", "#bbffaa"); //改變索引值爲奇數的<div>元素背景色
//$('div:eq(3)').css("background", "#bbffaa"); //改變索引值爲3的<div>元素背景色
//$('div:gt(3)').css("background", "#bbffaa"); //改變索引值爲大於3的<div>元素背景色
//$('div:lt(3)').css("background", "#bbffaa"); //改變索引值爲小於3的<div>元素背景色
//$(':header').css("background", "#bbffaa"); //改變所有標題如<h1><h2><h3>等元素背景色
//????????????$(':animated').css("background", "#bbffaa"); //改變正在執行動畫元素的背景色
//2.內容過濾選擇器
//$('div:contains(di)').css("background", "#bbffaa"); //改變含有文本"di"的<div>元素的背景色
//$('div:empty').css("background", "#bbffaa"); //改變不包括子元素（文本）的<div>爲空元素的背景色
//????????????$('div:has(mini)').css("background", "#bbffaa");//改變含有class爲mini的<div>元素的背景色
//$('div:parent').css("background", "#bbffaa")//改變含有子元素(文本元素)的背景色
//3.可見性過濾選擇器
//$('div:visible').css("background", "#ff6500");//改變所有可見的<div>元素背景色
//$('div:hidden').show(30000);//顯示隱藏的<div>元素show()JQuery方法
//4.屬性過濾選擇器
// $('div[title]').css("background", "#bbffaa"); //含有屬性title的<div>元素背景色
// $('div[title=test]').css("background", "#bbffaa"); //含有屬性title爲test值的<div>元素背景色
//$('div[title^=te]').css("background", "#bbffaa"); //含有屬性title爲te開頭的<div>元素背景色
//$('div[title$=est]').css("background", "#bbffaa"); //含有屬性title爲est結尾的<div>元素背景色
//$('div[title*=es]').css("background", "#bbffaa"); //含有屬性title爲含有es值的<div>元素背景色
//$('div[id][title*=es]').css("background", "#bbffaa);//結合使用
//5.子元素過濾選擇器
// $('div.one :nth-child(2)').css("background", "#bbffaa"); //class爲one的所有div元素(必須空格)
// $('div.one :frist-child').css("background", "#bbffaa"); //注意空格的區別.第一個
// $('div.one :last-child').css("background", "#bbffaa"); //注意空格的區別，最後一個
// $('div.one :only-child').css("background", "#bbffaa"); //注意空格的區別,惟一一個
//6.表單對象屬性過濾器
// $("#form1 input:enabled").val("這裏變化");//改變可用的input元素值
// $("#form1 input:disabled").val("這裏變化"); ; //改變不可用的input元素值
// alert($("input:checked").length); //;//獲取多選框選中的個數
//alert( $("select :selected").text());//獲取下拉框選中的內容
//四、表單選擇器
</script>
