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 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
Vue SSR 组件加载问题
May 02 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
JS自定义滚动条效果
Mar 13 Javascript
vue created钩子函数与mounted钩子函数的用法区别
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
php include和require的区别深入解析
2013/06/17 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python中pygame安装方法图文详解
2015/11/11 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
商务日语毕业生自荐信
2013/11/23 职场文书
库房主管岗位职责
2013/12/31 职场文书
公证委托书格式
2014/09/13 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
Python实现生活常识解答机器人
2021/06/28 Python
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android