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函数用来扩展对象,增加 ...
随机推荐
- Linux C笔记
<Linux C编程一站式学习>笔记 gcc编译 直接编译 gcc main.c a.out 指定可执行文件名 gcc main.c -o main main 提示所有的警告信息 gcc ...
- AngularJS $timeout和 $interval ，定时器手机验证码倒计时
$interval是 window.setInterval的Angular包装形式.$interval指每次延迟时间后执行响应的函数(也可以说:每次执行函数的间隔时间).$interval多数用于计时 ...
- 关于clear与清除浮动
今天看bootstrap突然看到了 .container:after { clear: both; } 好像对clear的用法有点模糊,于是于是又研究一下用法. 上面搜资料总会搜到张鑫旭老师的相关文章 ...
- Java责任链模式
责任链模式 顾名思义,责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这种类型的设计 ...
- [PY3]——内置数据结构(1)——列表及其常用操作
列表及其常用操作_xmind图 about列表 列表是一个序列,用于顺序存储数据 列表分为两种:ArrayList(用数组实现).LinkedList(用链表实现) 定义与初始化 #l ...
- iOS 自定义步骤进度条
新项目要做入驻功能,其中包括一个入住流程,类似登录或者注册流程如下图. 之前想着用自己绘图来做,可是又懒不想多写代码,所以就想着能不能用进度条来做. 1.用进度条做的首先要解决的是进度条的高度问题,可 ...
- docker 安装ElasticSearch 6.x
首先是拉去镜像(或者直接创建容器自然会拉去) docker pull elasticsearch:6.5.4 创建容器 docker run --name elasticsearch --net ho ...
- 【Java】短信信息提取设计
问题产生:当有要求做信息有效性校验的时候,如何提取短信中有用的信息? 举个例子:有这样一条短信消息: [XXXXXX提醒]尊敬的客户,截止03月21日15:29,您本月套餐中包含手机上网国内流量累计1 ...
- HBase—列族数据库的术语
1. 列族数据库的基本组件 键空间,行键,列,列族 2. 什么是键空间 keyspace? 键空间 keyspace 是列族数据库的顶级数据结构,它在逻辑上能够容纳列族,行键以及与之相关的其他数据结构 ...
- POJ 1789（最小生成树）
这题要把给的字符串变成边的权值 #include <cstdio> #include <iostream> #include <queue> #include &l ...