JQuery使用index方法獲取Jquery對象數組下標的方法
更新時間：2015年05月18日 11:54:26 作者：永遠愛好寫程序
這篇文章主要介紹了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程序設計有所幫助。
相關文章
本文章來給大家介紹一款固定底網站底部菜單效果，這里是基于jquery的，大家下載之后把jquery加入即可實現效果了，并且兼容性強。2013-08-08
本文主要介紹了jQuery中$.ajax()方法的具體使用，$.ajax(url,[settings])通過 HTTP 請求加載遠程數據，文中通過示例代碼詳細的介紹了$.ajax()的用法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
AspNet中使用JQuery上傳插件Uploadify詳解
Uploadify是JQuery的一個上傳插件，實現的效果非常不錯，帶進度顯示。不過官方提供的實例時php版本的，本文將詳細介紹Uploadify在Aspnet中的使用2015-05-05
jquery radio 操作代碼，需要的朋友可以參考下。2011-03-03
animate用于創(chuàng)建自定義動畫的函數，這個函數的關鍵在于指定動畫形式及結果樣式屬性對象，接下來為大家介紹下它的使用方法，感興趣的朋友可以參考下哈2013-03-03
本文給大家分享一個自己編寫的使用jquery+javascript實現的國籍控件，效果非常不錯，這里推薦給大家。2015-02-02
jQuery UI Autocomplete 1.8.16 中文輸入修正代碼
jQuery UI Autocomplete 1.8.16 中文輸入修正代碼，使用jQuery UI Autocomplete的朋友可以參考下2012-04-04
基于jQuery+HttpHandler實現圖片裁剪效果代碼(適用于論壇, SNS)
上次發(fā)了幾個jQuery的插件和些心得, 很多園友(也許是自己站上的)發(fā)郵件希望能提供更多的源碼, 正好這次有個同學希望在自己的壇子上掛個圖片裁剪以生成頭像的功能, 于是幫忙寫了這么個插件.也許很多園友用得著, 就一并發(fā)上來啦.2011-09-09
用JQuery操作DOM確實很方便，并且JQuery提供了非常人性化的API應付我們的各種需求，其中選擇器在此示例-“JQuery實現圖片輪播效果”上體現的尤為出色，大大簡化了js的代碼，需要的朋友可以參考下2015-09-09
最近在IE10中開發(fā)jquery，關于jquery中combobox多選不能兼容的問題，進行一些總結，感興趣的朋友可以了解下2013-12-12