jquery選擇器之僞類選擇器

僞類選擇器:

:nth-child的用法:

nth-child是一個css3僞類選擇符,在jQuery中被實現了,在Jquery API中對nth-child的定義是:”匹配其父元素下的第N個子或奇偶元素“。

例  僞類nth-child實現隔行換色

[html] view plaincopy
  1. <html xmlns="http://www.w3.org/1999/xhtml">   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4. <title>jQuery實現隔行變色</title>   
  5. <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>   
  6. <style type="text/css">   
  7.   
  8. </style>   
  9. <script type="text/javascript">   
  10. $(function(){   
  11.     $("#tbEmp tr:nth-child(even)").addClass("trOdd");   
  12.     $('#tbEmp tr:nth-child(odd)').css("color","red");  
  13.     $('#tbEmp tr:nth-child(even)').css("color","blue");  
  14. });   
  15. </script>   
  16.    
  17. </head>   
  18.    
  19. <body>   
  20. <table id="tbEmp" cellpadding="0" cellspacing="0">   
  21.     <tbody >   
  22.         <tr><td>1</td></tr>   
  23.         <tr><td>2</td></tr>   
  24.         <tr><td>3</td></tr>   
  25.         <tr><td>4</td></tr>   
  26.         <tr><td>5</td></tr>   
  27.         <tr><td>6</td></tr>   
  28.     </tbody>   
  29. </table>   
  30. </body>   
  31. </html>  
轉載於:ling811

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章