JQuery使用index方法获取Jquery对象数组下标的方法


Posted in Javascript onMay 18, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
AngularJS中的promise用法分析
May 19 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
JQuery中属性过滤选择器用法实例分析
May 18 #Javascript
jquery表单对象属性过滤选择器实例分析
May 18 #Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 #Javascript
JavaScript的9种继承实现方式归纳
May 18 #Javascript
JQuery中上下文选择器实现方法
May 18 #Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 #Javascript
JQuery球队选择实例
May 18 #Javascript
You might like
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
Golang与python线程详解及简单实例
2017/04/27 Python
Python内置函数reversed()用法分析
2018/03/20 Python
python 读入多行数据的实例
2018/04/19 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
python def 定义函数,调用函数方式
2020/06/02 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
党风廉政建设责任书
2014/04/14 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
推广普通话标语
2014/06/27 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
新手初学Java网络编程
2021/07/07 Java/Android
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL