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