jQuery中index()方法用法实例
本文实例讲述了jQuery中index()方法用法。分享给大家供大家参考。具体分析如下：
此方法可以搜索匹配元素，并返回元素的索引值。
索引值是从0开始的。
语法结构一:
当此方法没有参数的时候，返回值是指定元素在其同辈元素集合中的索引位置。
实例代码:
实例一:
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>index()函数-脚本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("span").text($(".qian").index());
})
});
</script>
</head>
<body>
<div>
<ul>
<li>后台专区</li>
<li class="qian">前台专区</li>
<li>数据库专区</li>
<li>站长交流</li>
</ul>
</div>
<div>当前li元素的位置:<span>0</span></div>
<button id="btn">点击查看结果</button>
</body>
</html>
上面代码能够返回类名为qian的li元素在其同辈元素集合中的索引值，看到这里大家可能有这样的疑问，所谓同辈元素是否是同类元素，也就是说li元素在li元素集合中的索引值。
实例二:
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>index()函数-脚本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("#sou").index());
})
});
</script>
</head>
<body>
<div>
<ul>
<li>后台专区</li>
<li id="qian">前台专区</li>
<li>数据库专区</li>
<li>站长交流</li>
<span id="sou">搜索优化</span>
</ul>
</div>
<div>当前li元素的位置:<span class="index">0</span></div>
<button id="btn">点击查看结果</button>
</body>
</html>
由以上的代码可以看出，并非只是同类元素，而是所有的同辈元素。
语法结构二:
当方法的参数为DOM对象或者jQuery对象时，返回值是此DOM对象或者jQuery对象在指定的元素集合中索引。
如果在指定的元素集合中找不到指定的DOM对象或者jQuery对象，那么返回值为-1。
参数列表:
| 参数 | 描述 |
| element | 获得index位置的DOM对象或者jQuery对象。 |
实例代码:
实例一:
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>index()函数-脚本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("span").text($("li").index(document.getElementById("qian")));
})
})
</script>
</head>
<body>
<div>
<ul>
<li>后台专区</li>
<li id="qian">前台专区</li>
<li>数据库专区</li>
<li>站长交流</li>
</ul>
</div>
<div>当前li元素的位置:<span>0</span></div>
<button id="btn">点击查看结果</button>
</body>
</html>
实例二:
因为找不到匹配的元素，所以返回值是-1.
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>index()函数-脚本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("li").index(document.getElementById("sou")));
})
});
</script>
</head>
<body>
<div>
<ul>
<li>后台专区</li>
<li id="qian">前台专区</li>
<li>数据库专区</li>
<li>站长交流</li>
<span id="sou">搜索优化</span>
</ul>
</div>
<div>当前li元素的位置:<span class="index">0</span></div>
<button id="btn">点击查看实例</button>
</body>
</html>
语法结构三:
当方法的参数为选择器时，将会从通过此选择器获得的对象集合中查找元素。
参数列表:
| 参数 | 描述 |
| Jqselector | 选择器，将会从通过此选择器获得的对象中查找元素。 |
实例代码:
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>index()函数-脚本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("#qian").index("li"));
})
});
</script>
</head>
<body>
<div>
<ul>
<li>后台专区</li>
<li id="qian">前台专区</li>
<li>数据库专区</li>
<li>站长交流</li>
<span id="sou">搜索优化</span>
</ul>
</div>
<div>当前li元素的位置:<span class="index">0</span></div>
<button id="btn">点击查看实例</button>
</body>
</html>
上述代码会取得id值为qian的li元素在通过li选择器获得li对象集合中的索引位置。
希望本文所述对大家的jQuery程序设计有所帮助。
jQuery中index()方法用法实例的更多相关文章
- jQuery中on()方法用法实例详解
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...
- jQuery中on()方法用法实例
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- jQuery中attr()方法用法实例
本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...
- jQuery中animate()方法用法实例
本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...
- jQuery中data()方法用法实例
语法结构一: 复制代码代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码代 ...
- 解析jQuery中extend方法--用法《一》
extend方法在jQuery中是一个很重要的方法,jQuey内部用它来扩展属性方法.常用语jQuery插件开发. jQuery提供了两个方法,$.extend和$.fn.extend,两个方法内部实 ...
- jQuery中 index() 方法的使用
假设一个集合中有10个元素,源生js在添加事件的时候,会使用for循环,里面的i的值,就是当前点击元素是集合中的第i个元素.在jquery中,获得i的值的方法如下: <ul id="a ...
- 解析jQuery中extend方法--源码解析以及递归的过程《二》
源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...
随机推荐
- hibernate3.3.2搭建log4j日志环境
日志的框架有很多,hibernate3.3.2用的是slf4j,slf4j简单理解为一个接口,标准.具体的实现可以是不同的实现(如slf4j自己的实现,log4j等).slf就像JDBC,JPA.自己 ...
- PHP 中 strlen 获取中英 字符长度 以作以后对比使用
ANSII编码: 1 长度是3 a 长度是3 ? 长度是3 我 长度是4 ?长度是2 ---------------------------- UTF-8编码: 1 长度是1 a长度是1 ? 长度是1 ...
- sql在insert时判断有无唯一性冲突
sql在insert时判断有无唯一性冲突,存在相同主键或唯一索引,则不创建 INSERT INTO table(field1, field2, fieldn) SELECT 'field1', 'fi ...
- Winform为窗体增加快捷键
1. 定义窗体的 xxx_KeyDown(object sender, EventArgs e) 2. 书写快捷键的代码: //这里的xxx代表你的窗体名 private void xxxx_KeyD ...
- 使用VNC访问Linux桌面
在一个严重依赖Windows的工作环境中,比如电子邮件被限定为Outlook(因为加密要求), VPN软件不支持Linux版本,那么,只使用Linux桌面是不够的,还需要在Linux桌面上跑个虚拟机运 ...
- 09 jdk1.5的并发容器：CopyOnWriteArrayList（转载）
原文链接:http://ifeve.com/java-copy-on-write/ Copy-On-Write简称COW,是一种用于程序设计中的优化策略. 其基本思路是,从一开始大家都在共享同一个内容 ...
- 基础爬虫，谁学谁会，用requests、正则表达式爬取豆瓣Top250电影数据！
爬取豆瓣Top250电影的评分.海报.影评等数据! 本项目是爬虫中最基础的,最简单的一例: 后面会有利用爬虫框架来完成更高级.自动化的爬虫程序. 此项目过程是运用requests请求库来获取h ...
- spring cloud连载第二篇之Spring Cloud Config
Spring Cloud Config Spring Cloud Config为分布式服务提供了服务侧和客户侧的外部配置支持.通过Spring Cloud Config你可以有一个统一的地方来管理所有 ...
- layer关闭弹出层返回值到父页面
1.首先在父页面定义一个空间,Id=layerResult 然后 layer.open({ type: , title: '选择看课件', shadeClose: true, shade: 0.8, ...
- REDIS与MEMCACHED的区别 8大点
如果简单地比较Redis与Memcached的区别,大多数都会得到以下观点:1 Redis不仅仅支持简单的k/v类型的数据,同时还提供list,set,hash等数据结构的存储.2 Redis支持数据 ...