JQuery使用index方法获取Jquery对象数组下标的方法
本文实例讲述了JQuery使用index方法获取Jquery对象数组下标的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>index方法获取Jquery对象的数组下标</title>
<styletype="text/css">
#main{
width:600px;
border:1pxsolidgreen;
margin:auto;
padding:10px;
}
#tbl{
border-collapse:collapse;
border-top:1pxsolidred;
border-left:1pxsolidred;
margin:auto;
}
#tbltd{
width:60px;
height:60px;
border-collapse:collapse;
border-bottom:1pxsolidred;
border-right:1pxsolidred;
}
</style>
<scriptsrc="jquery-1.6.2.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
varoldColor;
$(function(){
$("#tbltr").hover(
function(){
oldColor=$(this).css("backgroundColor");
$(this).css("backgroundColor","yellow");
},
function(){
$(this).css("backgroundColor",oldColor);
});
$("#tbltr").click(function(){
alert($("#tbltr").index($(this)));//获取元素下标
});
});
</script>
</head>
<body>
<divid="main">
<tableid="tbl">
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<tdclass="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><tdclass="tdClass">4</td>
</tr>
<tr>
<td>5</td><td>5</td><td>5</td>
</tr>
<tr>
<td>6</td><td>6</td><tdclass="tdClass">6</td>
</tr>
</table>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。