示例代碼如下:
- <!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基本過濾選擇器</title>
- <script language="javascript" type="text/javascript"
- src="../Jscript/jquery-1.5.2.js"></script>
- <style type="text/css">
- body{font-size:12px;text-align:center}
- div{width:241px;height:83px;border:solid 1px #eee}
- h1{font-size:13px}
- ul{list-style-type:none;padding:0px}
- .DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left;
- border-top:solid 1px #eee;border-bottom:solid 1px #eee}
- .GetFocus{width:58px;border:solid 1px #666;background-color:#eee}
- #spnMove{width:238px;height:23px;line-height:23px;}
- </style>
- <script type="text/javascript">
- $(function(){ //增加第一個元素的類別,獲取第一個元素 返回值單個元素
- $("li:first").addClass("GetFocus");
- })
- $(function(){ //增加最後一個元素的類別,獲取最後一個元素 返回值單個元素
- $("li:last").addClass("GetFocus");
- })
- $(function(){ //增加去除所有與給定選擇器匹配的元素類別 返回值元素集合
- $("li:not(.NotClass)").addClass("GetFocus");
- })
- $(function(){ //增加所有索引值為偶數的元素類別,從0開始計數 返回值元素集合
- $("li:even").addClass("GetFocus");
- })
- $(function(){ //增加所有索引值為奇數的元素類別,從0開始計數 返回值元素集合
- $("li:odd").addClass("GetFocus");
- })
- $(function(){ //增加一個給定索引值的元素類別,從0開始計數 返回值單個元素
- $("li:eq(1)").addClass("GetFocus");
- })
- $(function(){ //增加所有大於給定索引值的元素類別,從0開始計數 返回值元素集合
- $("li:gt(1)").addClass("GetFocus");
- })
- $(function(){ //增加所有小於給定索引值的元素類別,從0開始計數 返回值元素集合
- $("li:lt(4)").addClass("GetFocus");
- })
- $(function(){ //增加標題類元素類別
- $("div h1").css("width","238");
- $(":header").addClass("GetFocus");
- })
- $(function(){
- animateIt(); //增加動畫效果元素類別
- $("#spnMove:animated").addClass("GetFocus");
- })
- function animateIt() { //動畫效果
- $("#spnMove").slideToggle("slow", animateIt);
- }
- </script>
- </head>
- <body>
- <div>
- <h1>基本過濾選擇器</h1>
- <ul>
- <li class="DefClass">Item 0</li>
- <li class="DefClass">Item 1</li>
- <li class="NotClass">Item 2</li>
- <li class="DefClass">Item 3</li>
- </ul>
- <span id="spnMove">Span Move</span>
- </div>
- </body>
- </html>
說明:選擇器animated在捕捉動畫效果元素時,先自定義一個動畫效果函數animateIt(),然後執行該函數,選擇器才能獲取動畫效果,並增加其類別。