使用jQuery基本过滤器选择器选择元素


示例代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>使用jQuery基本过滤选择器</title>  
  5.     <script language="javascript" type="text/javascript"   
  6.            src="../Jscript/jquery-1.5.2.js"></script>  
  7.     <style type="text/css">  
  8.            body{font-size:12px;text-align:center}  
  9.            div{width:241px;height:83px;border:solid 1px #eee}  
  10.            h1{font-size:13px}  
  11.            ul{list-style-type:none;padding:0px}  
  12.            .DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left;  
  13.            border-top:solid 1px #eee;border-bottom:solid 1px #eee}  
  14.            .GetFocus{width:58px;border:solid 1px #666;background-color:#eee}  
  15.            #spnMove{width:238px;height:23px;line-height:23px;}  
  16.     </style>  
  17.     <script type="text/javascript">  
  18.             $(function(){ //增加第一个元素的类别，获取第一个元素   返回值单个元素  
  19.               $("li:first").addClass("GetFocus");  
  20.             })  
  21.             $(function(){ //增加最后一个元素的类别，获取最后一个元素   返回值单个元素  
  22.               $("li:last").addClass("GetFocus");  
  23.             })  
  24.             $(function(){ //增加去除所有与给定选择器匹配的元素类别   返回值元素集合   
  25.               $("li:not(.NotClass)").addClass("GetFocus");  
  26.             })  
  27.             $(function(){ //增加所有索引值为偶数的元素类别,从0开始计数  返回值元素集合   
  28.               $("li:even").addClass("GetFocus");  
  29.             })  
  30.             $(function(){ //增加所有索引值为奇数的元素类别,从0开始计数   返回值元素集合   
  31.               $("li:odd").addClass("GetFocus");  
  32.             })  
  33.             $(function(){ //增加一个给定索引值的元素类别,从0开始计数   返回值单个元素  
  34.               $("li:eq(1)").addClass("GetFocus");  
  35.             })  
  36.             $(function(){ //增加所有大于给定索引值的元素类别,从0开始计数  返回值元素集合   
  37.               $("li:gt(1)").addClass("GetFocus");  
  38.             })  
  39.             $(function(){ //增加所有小于给定索引值的元素类别,从0开始计数  返回值元素集合  
  40.               $("li:lt(4)").addClass("GetFocus");  
  41.             })  
  42.             $(function(){ //增加标题类元素类别  
  43.               $("div h1").css("width","238");  
  44.               $(":header").addClass("GetFocus");  
  45.             })  
  46.             $(function(){   
  47.               animateIt(); //增加动画效果元素类别  
  48.               $("#spnMove:animated").addClass("GetFocus");  
  49.             })  
  50.             function animateIt() { //动画效果     
  51.               $("#spnMove").slideToggle("slow", animateIt);     
  52.             }  
  53.     </script>  
  54. </head>  
  55. <body>  
  56.     <div>  
  57.         <h1>基本过滤选择器</h1>  
  58.         <ul>  
  59.            <li class="DefClass">Item 0</li>  
  60.            <li class="DefClass">Item 1</li>  
  61.            <li class="NotClass">Item 2</li>  
  62.            <li class="DefClass">Item 3</li>  
  63.         </ul>  
  64.         <span id="spnMove">Span Move</span>  
  65.     </div>  
  66. </body>  
  67. </html>  
说明：选择器animated在捕捉动画效果元素时，先自定义一个动画效果函数animateIt（），然后执行该函数，选择器才能获取动画效果，并增加其类别。

相关内容