JQuery使用index方法獲取Jquery對(duì)象數(shù)組下標(biāo)的方法

更新時(shí)間：2015年05月18日 11:54:26 作者：永遠(yuǎn)愛(ài)好寫(xiě)程序

這篇文章主要介紹了JQuery使用index方法獲取Jquery對(duì)象數(shù)組下標(biāo)的方法,涉及jQuery中index方法的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了JQuery使用index方法獲取Jquery對(duì)象數(shù)組下標(biāo)的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!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對(duì)象的數(shù)組下標(biāo)</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))); //獲取元素下標(biāo)
 });
});
</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>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

JQuery
index

相關(guān)文章

jQuery替換節(jié)點(diǎn)元素的操作方法
這篇文章通過(guò)實(shí)例代碼給大家講解了jquery替換節(jié)點(diǎn)元素的操作方法及動(dòng)態(tài)頁(yè)面的實(shí)現(xiàn)代碼，非常不錯(cuò)，需要的朋友參考下吧
2018-03-03
jQuery插件FusionCharts實(shí)現(xiàn)的3D帕累托圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的3D帕累托圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts載入xml數(shù)據(jù)繪制3D帕累托圖的相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
Jquery Easyui選項(xiàng)卡組件Tab使用詳解（10）
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui菜單組件Menu的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
javascript jQuery $.post $.ajax用法
這是一個(gè)簡(jiǎn)單的 POST 請(qǐng)求功能以取代復(fù)雜 $.ajax 。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請(qǐng)使用 $.ajax。
2008-07-07
直接拿來(lái)用的15個(gè)jQuery代碼片段
開(kāi)發(fā)人員利用jQuery代碼不僅能給網(wǎng)站帶來(lái)各種動(dòng)畫(huà)、特效，還會(huì)提高網(wǎng)站的用戶體驗(yàn)。本文總結(jié)了開(kāi)發(fā)者經(jīng)常使用的15個(gè)jQuery代碼片段，大家可以直接拿來(lái)用。
2015-09-09
jquery radio 動(dòng)態(tài)控制選中失效問(wèn)題的解決方法
下面小編就為大家分享一篇jquery radio 動(dòng)態(tài)控制選中失效問(wèn)題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
jQuery 源代碼顯示控件 (Ajax加載方式).
比較不錯(cuò)的用ajax加載css或js等文件的源代碼，以前都是需要把代碼放到網(wǎng)頁(yè)中，使用這個(gè)控件就不需要。
2009-05-05
jquery 中的each()跳出循環(huán)的語(yǔ)句
很多新手朋友們都不知道jquery 中的each()怎么跳出循環(huán)，在each的回調(diào)函數(shù)中使用return false
2014-05-05
jQuery操作CSS樣式
這篇文章介紹了jQuery操作CSS樣式的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-03-03
Jquery插件寫(xiě)法筆記整理
大部分jQuery插件都是這種類型的插件，由于這種插件是將對(duì)象方法封裝起來(lái)，在jQuery選擇器獲取jQuery對(duì)象過(guò)程中進(jìn)行操作，從而發(fā)揮jQuery強(qiáng)大的選擇器優(yōu)勢(shì)
2012-09-09