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

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

赞 (0)

相关推荐

  • 判断一个对象是否为jquery对象的方法

    当我们在用jquery的each做循环遍历的时候常常会使用到this,而有时候我们不知道this所指的到底是什么,因为要使用jquery的方法 前提此对象必须是jquery对象. 另外要判断一个javascript的对象是什么类型,可以使用typeof, 但是typeof只能判断出js的基础对象(string,boolean,number,object) 判断一个对象是否为jquery对象可以用 obj instanceof jQuery 例如: 复制代码 代码如下: var obj = $("

  • jquery对象和DOM对象的任意相互转换

    什么是jQuery对象? ---就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法. 比如: $("#test").html() 意思是指:获取ID为test的元素内的html代码.其中html()是jQuery里的方法 这段代码等同于用DOM实现代码: document.getElementById("id").innerHTML; 虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法

  • jQuery对象的length属性用法实例

    本文实例讲述了jQuery对象的length属性用法.分享给大家供大家参考.具体分析如下: 此属性返回匹配的jQuery对象集合中对象的数目. length属性与size()方法返回相同的值. 语法结构: 复制代码 代码如下: $("selector").length 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <m

  • jquery对象和DOM对象的相互转换详解

    jquery对象和DOM对象的相互转换 在讨论jquery对象和DOM对象的相互转换之前,先约定好定义变量的风格如果获取的是jquery对象,那么在变量前面加上$,例如 var $varible = jquery对象: 如果获取的是DOM对象,则定义如下: var varible = DOM对象: 1.jquery对象转成DOM对象: jquery对象不能使用DOM中的方法,但如果对jquery对象所提供的方法不熟悉,或者没有jquery想封装的方法,不得不使用DOM对象,即[index]和ge

  • jQuery对象与DOM对象之间的相互转换

    1.jQuery对象转换成DOM对象 jQuery对象不能使用DOM中的方法,但如果对jQuery对象所提供的方法不熟悉,或者jQuery没有封装想要的方法,不得不使用DOM对象的时候,有以下两种处理方法: 1.jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象: 复制代码 代码如下: var $cr=$("#cr")          //jQuery对象  var cr=$cr[0]             //DOM对象 2.另一种是jQuer

  • jQuery对象和DOM对象之间相互转换的方法介绍

    在讨论jQuery对象和DOM对象的相互交换之前,先约定好定义变量的风格.如果获取的对象是jQuery对象,那么在变量前加上$,例如: 复制代码 代码如下: var $variable = jQuery对象; 如果获取的是DOM对象,则定义如下: 复制代码 代码如下: var variable = DOM对象: 1.jQuery对象转成DOM对象 jQuery对象不能使用DOM中的方法,但是如果对jQuery对象所提供的方法不熟悉,或者jQuery没有封装想要的方法,不得不实用DOM对象的时候,

  • jQuery对象初始化的传参方式

    jQuery对象初始化的传参方式包括: 1.$(DOMElement) 2.$('<h1>...</h1>'), $('#id'), $('.class') 传入字符串, 这是最常见的形式, 这种传参数经常也传入第二个参数context指定上下文,其中context参数可以为$(...), DOMElement 3.$(function() {}); <===> $(document).ready(function() { }); 4.$({selector : '.c

  • jquery对象和javascript对象即DOM对象相互转换

    jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象. DOM对象就是Javascript 固有的一些对象操作.DOM 对象能使用Javascript 固有的方法,但是不能使用

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

    本文实例讲述了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/xh

  • JS与jQuery实现子窗口获取父窗口元素值的方法

    JS与jQuery实现子窗口获取父窗口元素值的方法

    本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法.分享给大家供大家参考,具体如下: 功能描述:父窗口有一个input,和一个button ,点击button打开子窗口,在子窗口中获取父窗口中input的值,并显示. js: 父窗口: <input type="text" name="currentProjectIDForDetail" id="currentProjectIDForDetail" disabled="

  • jQuery插件jqGrid动态获取列和列字段的方法

    jQuery插件jqGrid动态获取列和列字段的方法

    本文实例讲述了jQuery插件jqGrid动态获取列和列字段的方法.分享给大家供大家参考,具体如下: 1.问题背景 jqGrid表格插件,利用自身方法获取表格的表头和表格字段:获取列名和列字段名显示在弹窗里,用复选框进行勾选 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jqGrid动态获取列和列字段</title> <

  • JQuery中的常用事件、对象属性与使用方法分析

    本文实例讲述了JQuery中的常用事件.对象属性与使用方法.分享给大家供大家参考,具体如下: JQuery中的常用事件 .click() 鼠标单击触发事件,参数可选(data,function) .dblclick() 双击触发,同上 .mousedown()/up() 鼠标按下/弹起触发事件 .mousemove() 鼠标移动事件 .mouseover()/out() 鼠标移入/移出触发事件 .mouseenter()/leave() 鼠标进入/离开触发事件* .hover(func1,fun

  • jQuery简单判断值是否存在于数组中的方法示例

    jQuery简单判断值是否存在于数组中的方法示例

    本文实例讲述了jQuery简单判断值是否存在于数组中的方法.分享给大家供大家参考,具体如下: <!DOCTYPE> <html> <head> <title>jquery判断值是否存在于数组中</title> <meta charset="utf-8"> </head> <body> <script src="http://libs.baidu.com/jquery/2.0.

  • JavaScript获取两个数组交集的方法

    本文实例讲述了JavaScript获取两个数组交集的方法.分享给大家供大家参考.具体如下: 这里传入的数组必须是已经排过序的 /* finds the intersection of * two arrays in a simple fashion. * * PARAMS * a - first array, must already be sorted * b - second array, must already be sorted * * NOTES * * Should have O(

  • Java中对象数组的使用方法详解

    本文实例讲述了Java中对象数组的使用方法.分享给大家供大家参考,具体如下: 一 点睛 对象可以用数组来存放,通过下面两个步骤来实现. 1 声明以类为数据类型的数组变量,并用new分配内存空间给数组. 2 用new产生新的对象,并分配内存空间给它. 下面介绍4种方式来定义对象数组 方式一:静态方式 Person p1[] = { new Person(), new Person(), new Person() }; 方式二:动态初始化化 Person p2[]; p2 = new Person[

  • JFINAL+Ajax传参 array 数组方法 获取request中数组操作

    前台代码js var _list =[]; for (var i = 0; i < array.length; i++) { _list[i] = array[i]; } $.ajax({ type: "post", url: "", data: {"ids": _list }, dataType: "json", success: function(data){ alert("添加成功"); } }

  • Vue执行方法,方法获取data值,设置data值,方法传值操作

    方法写在methods中 v-on:click="run()" @click="run()" 方法获取data中的数据通过this.数据获取 方法设置data中的数据通过this.数据=''设置 例如通过this.list=[1,2,3],设置list的值,让页面出循环list 可通过 @click="run('123')",将值传到方法中 可通过 @click="run($event)",将事件对象传到方法中,然后根据事件对

  • PHP使用array_merge重新排列数组下标的方法

    本文实例讲述了PHP使用array_merge重新排列数组下标的方法.分享给大家供大家参考.具体如下: 用了一个array_unique去除了一个数组里面的重复,但是发现下标保留了原数组的下标,但是php使用for循环需要下标整齐,所以寻找重新排列数组下标的方法array_merge可以解决这个问题 array_merge() 函数把两个或多个数组合并为一个数组. 如果键名有重复,该键的键值为最后一个键名对应的值(后面的覆盖前面的).如果数组是数字索引的,则键名会以连续方式重新索引. 注释:如果

随机推荐