僞類選擇器:
:nth-child的用法:
nth-child是一個css3僞類選擇符,在jQuery中被實現了,在Jquery API中對nth-child的定義是:”匹配其父元素下的第N個子或奇偶元素“。
例 僞類nth-child實現隔行換色
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>jQuery實現隔行變色</title>
- <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <style type="text/css">
- </style>
- <script type="text/javascript">
- $(function(){
- $("#tbEmp tr:nth-child(even)").addClass("trOdd");
- $('#tbEmp tr:nth-child(odd)').css("color","red");
- $('#tbEmp tr:nth-child(even)').css("color","blue");
- });
- </script>
- </head>
- <body>
- <table id="tbEmp" cellpadding="0" cellspacing="0">
- <tbody >
- <tr><td>1</td></tr>
- <tr><td>2</td></tr>
- <tr><td>3</td></tr>
- <tr><td>4</td></tr>
- <tr><td>5</td></tr>
- <tr><td>6</td></tr>
- </tbody>
- </table>
- </body>
- </html>