7. jQuery基本過濾選擇器
阿新 • • 發佈：2018-12-09
<!DOCTYPE html> <html> <head> <title>使用jQuery基本過濾選擇器選擇元素</title> <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> </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> <script src="../jquery.min.js"></script> <script type="text/javascript"> $(function(){ //增加動畫效果元素類別 animateIt(); $("#spnMove:animated").addClass("GetFocus"); }) function animateIt() { //動畫效果 $("#spnMove").slideToggle("slow", animateIt); } /* $(function(){ //增加標題類元素類別 $("div h1").css("width", "238"); $(":header").addClass("GetFocus"); }) */ /* $(function(){ //增加所有小於給定索引值的元素類別,從零開始計數 $("li:lt(3)").addClass("GetFocus"); }) */ /* $(function(){ //增加所有大於給定索引值的元素類別,從零開始計數 $("li:gt(1)").addClass("GetFocus"); }) */ /* $(function(){ //增加一個給定索引值元素類別,從零開始計數 $("li:eq(1)").addClass("GetFocus"); }) */ /* $(function(){ //增加所有索引值為奇數的元素類別,從零開始計數 $("li:odd").addClass("GetFocus"); })*/ /* $(function(){ //增加所有索引值為偶數的元素類別,從零開始計數 $("li:even").addClass("GetFocus"); }) */ /* $(function(){ //增加去除所有與給定選擇器匹配的元素類別 $("li:not(.NotClass)").addClass("GetFocus"); }) */ /* $(function(){ //增加最後一個元素的類別 $("li:last").addClass("GetFocus"); }) */ /* $(function(){ //增加第一個元素的類別 $("li:first").addClass("GetFocus"); }) */ </script> </body> </html>