suchen

Heim >Web-Frontend >js-Tutorial >JQuery verwendet die Indexmethode, um den Index des JQuery-Objekts array_jquery abzurufen

JQuery verwendet die Indexmethode, um den Index des JQuery-Objekts array_jquery abzurufen

WBOY
WBOYOriginal
2016-05-16 15:58:392314Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie JQuery die Indexmethode verwendet, um den Index des JQuery-Objektarrays abzurufen. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt: 

<!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>

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：TypeError document.getElementById(...) ist null Fehlergrund_Javascript-FähigkeitenNächster Artikel：TypeError document.getElementById(...) ist null Fehlergrund_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen