首页
所有分类
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 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
countup.js实现数字动态叠加效果
Oct 17 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
塑料(1) 天问一号(1) 火星(2) 夸克(1) 酶(1) 人造肉(1) NASA(1) 太空(1) 毅力号(1) 国际空间站(1)
You might like
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
PHP实现简易图形计算器
2020/08/28 PHP
非常好的js代码
2006/06/27 Javascript
关于图片验证码设计的思考
2007/01/29 Javascript
js兼容标准的表格变色效果
2008/06/28 Javascript
javaScript 简单验证代码（用户名，密码，邮箱)
2009/09/28 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
13个PHP函数超实用
2015/10/21 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（二）
2017/05/11 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python实现学校管理系统
2018/01/11 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
Python数据可视化实现正态分布（高斯分布）
2019/08/21 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
保送生自荐信范文
2013/10/06 职场文书
调查研究项目计划书
2014/04/29 职场文书
学习计划书怎么写
2014/09/15 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
2014年质检工作总结
2014/11/26 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
公司介绍信范文
2015/01/31 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python