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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
微信小程序进入广告实现代码实例
Sep 19 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
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
用Flash图形化数据(一)
2006/10/09 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
JS跨域总结
2012/08/30 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Python多项式回归的实现方法
2019/03/11 Python
python3实现弹弹球小游戏
2019/11/25 Python
对python中各个response的使用说明
2020/03/28 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
函数指针的定义是什么
2016/08/14 面试题
大四自我鉴定
2014/02/08 职场文书
学校师德师风整改方案
2014/10/28 职场文书
Python访问Redis的详细操作
2021/06/26 Python
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers