這篇文章主要介紹了JQuery使用index方法獲取Jquery對象數組下標的方法,涉及jQuery中index方法的使用技巧,需要的朋友可以參考下
本文實例講述了JQuery使用index方法獲取Jquery對象數組下標的方法。分享給大家供大家參考。具體實現方法如下:
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>index方法獲取Jquery對象的數組下標</title>
- <style type="text/css">
- #main{
- width:600px;
- border:1px solid green;
- margin:auto;
- padding:10px;
- }
- #tbl{
- border-collapse:collapse;
- border-top:1px solid red;
- border-left:1px solid red;
- margin:auto;
- }
- #tbl td{
- width:60px;
- height:60px;
- border-collapse:collapse;
- border-bottom:1px solid red;
- border-right:1px solid red;
- }
- </style>
- <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- var oldColor;
- $(function () {
- $("#tbl tr").hover(
- function () {
- oldColor = $(this).css("backgroundColor");
- $(this).css("backgroundColor", "yellow");
- },
- function () {
- $(this).css("backgroundColor", oldColor);
- });
- $("#tbl tr").click(function () {
- alert($("#tbl tr").index($(this))); //獲取元素下標
- });
- });
- </script>
- </head>
- <body>
- <div id="main">
- <table id="tbl">
- <tr>
- <td>1</td><td>1</td><td>1</td>
- </tr>
- <tr>
- <td class="tdClass">2</td><td>2</td><td>2</td>
- </tr>
- <tr>
- <td>3</td><td>3</td><td>3</td>
- </tr>
- <tr>
- <td>4</td><td>4</td><td class="tdClass">4</td>
- </tr>
- <tr>
- <td>5</td><td>5</td><td>5</td>
- </tr>
- <tr>
- <td>6</td><td>6</td><td class="tdClass">6</td>
- </tr>
- </table>
- </div>
- </body>
- </html>
希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
圖片精選