首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery中index()方法用法实例

Posted in Javascript onDecember 27, 2014

本文实例讲述了jQuery中index()方法用法。分享给大家供大家参考。具体分析如下：

此方法可以搜索匹配元素，并返回元素的索引值。
索引值是从0开始的。

语法结构一:

当此方法没有参数的时候，返回值是指定元素在其同辈元素集合中的索引位置。

$(selector).index()

实例代码:

实例一:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<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元素集合中的索引值。

实例二:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<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。

$(selector).index(element)

参数列表:

参数 描述
element 获得index位置的DOM对象或者jQuery对象。

实例代码:

实例一:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<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.

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<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>

语法结构三:

当方法的参数为选择器时，将会从通过此选择器获得的对象集合中查找元素。

$(selector).index(Jqselector)

参数列表:

参数 描述
Jqselector 选择器，将会从通过此选择器获得的对象中查找元素。

实例代码:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<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()方法用法实例

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
js打造数组转json函数
Jan 14 Javascript
javascript 数组操作详解
Jan 29 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
JS实现的进制转换，浮点数相加，数字判断操作示例
Nov 09 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 Javascript
jQuery中get()方法用法实例
Dec 27 #Javascript
jQuery的context属性用法实例
Dec 27 #Javascript
jQuery对象的selector属性用法实例
Dec 27 #Javascript
jQuery对象的length属性用法实例
Dec 27 #Javascript
jQuery中size()方法用法实例
Dec 27 #Javascript
jQuery中each()方法用法实例
Dec 27 #Javascript
jQuery.holdReady()方法用法实例
Dec 27 #Javascript
竞聘书(31) 协议书(568) 意向书(73) 担保书(46) 检举信(8) 公证书(45) 说明书(38) 委托书(259) 承诺书(369) 聘任书(31)
You might like
php多文件上传下载示例分享
2014/02/20 PHP
php中socket通信机制实例详解
2015/01/03 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
两种php实现图片上传的方法
2016/01/22 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
php桥接模式应用案例分析
2019/10/23 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
js 判断 enter 事件
2009/02/12 Javascript
javascript 跨浏览器开发经验总结（五） js 事件
2010/05/19 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
Python 数据结构之堆栈实例代码
2017/01/22 Python
浅谈python可视化包Bokeh
2018/02/07 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行？
2019/05/15 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
函授自我鉴定
2013/11/06 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
内衣营销方案
2014/03/15 职场文书
大学校务公开实施方案
2014/03/31 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
2015年感恩节演讲稿（优选篇）
2015/03/20 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python