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 相关文章推荐
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
详解vue身份认证管理和租户管理
May 25 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
PHP4.04简明安装
2006/10/09 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
javascript 回调函数详解
2014/11/11 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
Node.js中DNS模块学习总结
2018/02/28 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
Python三级菜单的实例
2017/09/13 Python
python清理子进程机制剖析
2017/11/23 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
python迭代器常见用法实例分析
2019/11/22 Python
python 实现多维数组(array)排序
2020/02/28 Python
python中如何进行连乘计算
2020/05/28 Python
用python批量移动文件
2021/01/14 Python
新东网科技Java笔试题
2012/07/13 面试题
数据库的约束含义
2012/09/09 面试题
硕士研究生自我鉴定
2013/11/08 职场文书
初中体育教学反思
2014/01/14 职场文书
客房领班岗位职责
2015/02/11 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python
Python+pyaudio实现音频控制示例详解
2022/07/23 Python