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