最初认识index()是在轮播图中,获取当前点击对象在数组中的位置。那时候,对index()的使用只有eq($(this).index()),看了文档之后,才知道自己有多幼稚!

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index()</title>
<style type="text/css">
*{padding:0; margin:0;}
div{width:100px; height:100px; margin:20px; background:#e5e5e5;}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li id="foo"></li>
<li id="bar"></li>
<li id="baz"></li>
</ul>
<div class="links">
<a class="link" href="#"></a>
<a class="link" href="#"></a>
<a class="link" href="#"></a>
</div>
<div class="con"><a href=""></a></div>
<div class="con"><a class="acon" href=""></a></div>
<div class="con"><a class="acon" href=""></a></div>
<script type="text/javascript">
$(function(){
var i1=$("li").index();
console.log(i1);//不给index()方法传递参数,那么返回值就是这个Jquery对象集合中第一个元素相对其同辈元素的位置。
var i2=$("li").index(document.getElementById("bar"))
console.log(i2);//给index()传递一个DOM对象,那么返回值就是这个DOM对象在原先集合中的索引位置
var i3=$("div .link").index("a")//给index传递一个选择器,那么返回值就是原先元素相对于选择器匹配元素集合中的索引位置
console.log(i3);
var i4=$(".acon").index(".con a");
console.log(i4);//同上
var i5=$(".con a").index($(".acon"));//传递一组JQuery对象,返回这个对象集合中第一个元素在原先集合中的索引位置
console.log(i5);
/*
总结:
1、不传对象,返回对象集合中的第一个元素相对于同辈元素的位置。
2、传递DOM对象或JQuery对象,返回此对象在原先集合中的索引位置
3、传递选择符,返回原先对象在匹配选择符集合中的索引位置
*/
});
</script>
</body>
</html>
总结:
1、不传对象,返回对象集合中的第一个元素相对于同辈元素的位置。
2、传递DOM对象或JQuery对象,返回此对象在原先集合中的索引位置。
3、传递选择符,返回原先对象在匹配选择符集合中的索引位置或者原先对象集合中第一个元素在选择符集合中的索引位置。

学习JQuery中文文档之index()函数的更多相关文章

  1. 学习JQuery中文文档之get()函数

    前端大神群的群主告诉我们:学习一个框架最好的方法是去把官方文档研究一遍. 现在正式开始我的前端之路,从JQuery的中文文档开始. 基础不牢固,看起来有点慢,但是我会一直坚持下去的.把遇到的问题都记录 ...

  2. 学习JQuery中文文档之map()函数和get()函数

    今天学到一个新的函数map(). map(callback) 官方概述: 将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值.属性还是CSS样式,或者其他特别形式 ...

  3. java冒泡排序-选择排序-插入排序-使用API中文文档直接调用函数

    import java.util.Arrays; public class ArrayDemo2_3 { public static void main(String []args) { //---- ...

  4. (十)unity4.6学习Ugui中文文档-------參考-UGUI Canvas Components

     大家好,我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unit ...

  5. (二十二)unity4.6学习Ugui中文文档-------交互-Eventsystem &amp; Binding

    大家好,我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unityma ...

  6. unity4.6学习Ugui中文文档-------参考-UGUI Rect Transform

    1 . Rect Transform Rect Transform 是 2D 与 3D 图形的 Transform 组件对应.它用来指定用户界面系统中的大小. 位置和旋转的控件 Properties ...

  7. (二十一)unity4.6学习Ugui中文文档-------交互-Supported Events &amp; Raycasters

    大家好,我是孙广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:mod=guide&view=m ...

  8. (九)unity4.6学习Ugui中文文档-------參考-UGUI Rect Transform

     大家好.我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unit ...

  9. jQuery中文文档

    http://www.jquery123.com/ http://www.shifone.cc/

随机推荐

  1. 给产品经理讲技术,不得不懂的TCP和UDP

    TCP/IP协议,你一定经常听说吧,其中TCP(Transmission Control Protocol)称为传输控制协议,IP(Internet Protocol)称为因特网互联协议,好吧,这都是 ...

  2. 七:zookeeper与paxos的分析

    zookeeper是什么 官方说辞:Zookeeper 分布式服务框架是Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务 ...

  3. 垂直的TextView

    所先声明一下这个类是我从网上找到的一篇文章,只是保留并没有侵权的意思. public class TextViewVertical extends View { public static final ...

  4. 无法启动ArcSDE服务

    ArcSDE服务启动错误:Error (-327), No ArcSDE server license found解决方法:>sdesetup -o update_key -d oracle10 ...

  5. mysql Access denied for user \'root\'@\'localhost\'”解决办法总结,下面我们对常见的出现的一些错误代码进行分析并给出解决办法,有需要的朋友可参考一下。

    mysql Access denied for user \'root\'@\'localhost\'”解决办法总结,下面我们对常见的出现的一些错误代码进行分析并给出解决办法,有需要的朋友可参考一下. ...

  6. RedHat 5 配置CentOS yum 更新源

    YUM是Redhat Linux在线安装更新及软件的工具,但是这是RHEL5的收费功能,如果没有购买Redhat的服务时不能使用RHEL5的更新源的,会提示注册. 由于CentOS是从Redhat演化 ...

  7. DouNet学习_代码生成器

    string conn = "Data Source={0};Initial Catalog={1};User Id={2};Password={3}"; //点击链接 priva ...

  8. 【Python学习笔记】循环和迭代

    for和while基本语法 break和continue else的使用 enumerate和zip在循环中的应用 for和while基本语法 Python中的的循环使用for和while语句来实现, ...

  9. http://www.blogjava.net/nokiaguy/category/37087.html

    http://www.blogjava.net/nokiaguy/category/37087.html

  10. proguard 混淆android代码

    官网 http://proguard.sourceforge.net/#manual/examples.html android 2.3后,新建的project默认就有一个project.proper ...