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 相关文章推荐
解析Javascript中难以理解的11个问题
Dec 09 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
JS中实现一个下载进度条及播放进度条的代码
Jun 10 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
实现“上一页”和“下一页按钮
2006/10/09 PHP
PHP的PSR规范中文版
2013/09/28 PHP
yii用户注册表单验证实例
2015/12/26 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
javascript编程起步(第五课)
2007/02/27 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
jquery对表单操作2
2011/04/06 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
Python中求对数方法总结
2020/03/10 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
大学生咖啡店创业计划书
2014/01/21 职场文书
仓库组长岗位职责
2014/01/29 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
行政专员求职信范文
2014/05/03 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
基层党支部承诺书
2015/04/30 职场文书
入党申请书怎么写?
2019/06/11 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis