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函数用来扩展对象,增加 ...
随机推荐
- Hive的Shell里hive> 执行操作时，出现FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask错误的解决办法（图文详解）
不多说,直接上干货! 这个问题,得非 你的hive和hbase是不是同样都是CDH版本,还是一个是apache版本,一个是CDH版本. 问题详情 [kfk@bigdata-pro01 apache-h ...
- HTTP访问的两种方式:HttpURLConnection和HTTPClient的比较
http://blog.sina.com.cn/s/blog_87216a0001014sm7.html http://www.2cto.com/kf/201305/208770.html ----- ...
- redis数据类型（五）set类型
一. set类型 set是无序集合,最大可以包含(2 的 32 次方-1)个元素. set 的是通过 hash table 实现的,所以添加,删除,查找的复杂度都是 O(1). hash table ...
- Python(2):创建函数模块
说明: 在使用python的时候我们除了使用内置的函数之外,可能还需要使用一些别人写的函数.或者我们写的代码也希望可以给其他人使用.要实现这样的功能,我们就需要按照下面的步骤来定义自己的模块: Ste ...
- js中json对象数组按对象属性排序
在实际工作经常会出现这样一个问题:后台返回一个数组中有i个json数据,需要我们根据json中某一项进行数组的排序. 例如返回的数据结构大概是这样: { result:[ {id:,name:'中国银 ...
- Android四大组件--服务（Service）
1. startService和bindService的区别 1. startService: 生命周期: onCreate---onStartCommand---onDestory 与服务的通讯: ...
- [转]Android Studio SQLite Database Example
本文转自:http://instinctcoder.com/android-studio-sqlite-database-example/ BY TAN WOON HOW · PUBLISHED AP ...
- 撩课-Java每天5道面试题第21天
136.请解释Spring Bean的生命周期? 首先说一下Servlet的生命周期: 实例化, 初始init, 接收请求service, 销毁destroy: Spring上下文中的Bean生命周期 ...
- redisTemplate 总结
依赖jar包 jackson <dependency> <groupId>com.fasterxml.jackson.core</groupId> <arti ...
- groovy实现循环、交换变量、多赋值、？.运算符
/** * Created by Jxy on 2019/1/3 10:01 * 1.实现循环的方式 * 2.安全导航操作符---?. * 3.一次性赋值给多个变量 */ 0.upto(2){ pri ...