Posts - 58,
Articles - 0,
Comments - 28
低调的做每一件事情！厚积薄发！
19:31 by 默念默, ... 阅读,
本文实例讲述了jQuery中index()方法用法。分享给大家供大家参考。具体分析如下：
此方法可以搜索匹配元素，并返回元素的索引值。索引值是从0开始的。
语法结构一:
当此方法没有参数的时候，返回值是指定元素在其同辈元素集合中的索引位置。
复制代码代码如下:
$(selector).index()
复制代码代码如下:
&!DOCTYPE HTML&&html&&head&&meta charset="utf-8"/&&meta name="author" content="http://www.jb51.net/" /&&title&index()函数-脚本之家&/title&&style type="text/css"&span{& color:}&/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="http://www.jb51.net/" /&&title&index()函数-脚本之家&/title&&style type="text/css"&span{& color:}&/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)
获得index位置的DOM对象或者jQuery对象。
复制代码代码如下:
&!DOCTYPE HTML&&html&&head&&meta charset="utf-8"/&&meta name="author" content="http://www.jb51.net/" /&&title&index()函数-脚本之家&/title&&style type="text/css"&span{& color:}&/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="http://www.jb51.net/" /&&title&index()函数-脚本之家&/title&&style type="text/css"&span{& color:}&/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="http://www.jb51.net/" /&&title&index()函数-脚本之家&/title&&style type="text/css"&span{& color:}&/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程序设计有所帮助。css xpath规范里面只有下面三个，没有eq
:first-child
:nth-child(n)
:last-child
所以选择器里的eq,需要由jquery去解析实现，无法实现原生dom方法querySelectorAll()，所以官方也更推荐eq()函数
简单案例顶部导航和侧边导航同步效果jquery代码如下：
$(function() {
$(&a.tooltip-top-nav&).click(function () {
var number=$(this).index('a.btn.tooltip-top-nav');//index()方法中的参数要指代清楚，要不返回的是0
$(&.tooltip-side-nav&).eq(number).addClass(&select&).parent().siblings().children().removeClass(&select&);
$(&.tooltip-side-nav&).eq(number).removeClass(&default&).parent().siblings().children().addClass(&default&);
$(function() {
$(&.tooltip-side-nav&).click(function () {
$(this).addClass(&select&).parent().siblings().children().removeClass(&select&);
console.log($(&.tooltip-side-nav&));
$(this).removeClass(&default&).parent().siblings().children().addClass(&default&);
});HTML如下
顶部导航条
&&ul class=&nav navbar-nav&&
& & & & & & & & & & &li&&a class=&btn tooltip-top-nav & href=&#page1&&科比简介&/a&&/li&
& & & & & & & & & & &li&&a class=&btn tooltip-top-nav& href=&#page2&&巅峰时刻&/a&&/li&
& & & & & & & & & & &li&&a class=&btn tooltip-top-nav& href=&#page3&&职业生涯&/a&&/li&
& & & & & & & & & & &li&&a class=&btn tooltip-top-nav& href=&#page4&&经典战靴&/a&&/li&
& & & & & & & & & & &li&&a class=&btn tooltip-top-nav& href=&#page5&&篮球人生&/a&&/li&
& & & & & & & & &/ul&
&ul class=&nav-side-nav&&
&li&&a class=&tooltip-side-nav select one& href=&#page1& title=&科比简介&& &/a&&/li&
&li&&a class=&tooltip-side-nav default two& href=&#page2& title=&巅峰时刻&& &/a&&/li&
&li&&a class=&tooltip-side-nav default three& href=&#page3&title=&职业生涯&& &/a&&/li&
&li&&a class=&tooltip-side-nav default four& href=&#page4& title=&经典战靴&& &/a&&/li&
&li&&a class=&tooltip-side-nav default five& href=&#page5& title=&篮球人生&& &/a&&/li&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4719次
排名：千里之外
转载：19篇
(4)(6)(17)(1)下次自动登录
现在的位置:
& 综合 & 正文
使用jQuery中的each(data,function(){});函数
version added:
jQuery.each( collection, callback(indexInArray, valueOfElement) )
collectionThe object or array to iterate over.
callback(indexInArray, valueOfElement)The function that will be executed on every object.
The $.each() function is not the same as , which is used to iterate, exclusively, over a jQuery object. The$.each() function can be used to iterate over any collection, whether it is a map (JavaScript object) or an array. In the case of an array, the callback is
passed an array index and a corresponding array value each time. (The value can also be accessed through thethis keyword, but Javascript will always wrap thethis value as anObject even if it is a simple string or number
value.) The method returns its first argument, the object that was iterated.
jQuery AJAX 请求
$(selector).load(url,data,callback)
把远程数据加载到被选的元素中
$.ajax(options)
把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type)
使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type)
使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback)
使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback)
加载并执行远程的 JavaScript 文件
&&&&推荐文章:
【上篇】【下篇】jquery的each()函数用法_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
jquery的each()函数用法
总评分3.9|
用知识赚钱
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩3页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢