zoukankan      html  css  js  c++  java
  • 学习JQuery中文文档之index()函数

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

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index()</title>
     6     <style type="text/css">
     7         *{padding:0; margin:0;}
     8         div{width:100px; height:100px; margin:20px; background:#e5e5e5;}
     9     </style>
    10     <script src="js/jquery-1.11.3.min.js"></script>
    11 </head>
    12 <body>
    13     <ul>
    14         <li id="foo"></li>
    15         <li id="bar"></li>
    16         <li id="baz"></li>
    17     </ul>
    18     <div class="links">
    19         <a class="link" href="#"></a>
    20         <a class="link" href="#"></a>
    21         <a class="link" href="#"></a>
    22     </div>
    23     <div class="con"><a href=""></a></div>
    24     <div class="con"><a class="acon" href=""></a></div>
    25     <div class="con"><a class="acon" href=""></a></div>
    26 <script type="text/javascript">
    27         $(function(){
    28             var i1=$("li").index();
    29                 console.log(i1);//不给index()方法传递参数,那么返回值就是这个Jquery对象集合中第一个元素相对其同辈元素的位置。
    30             var i2=$("li").index(document.getElementById("bar"))
    31                 console.log(i2);//给index()传递一个DOM对象,那么返回值就是这个DOM对象在原先集合中的索引位置
    32             var i3=$("div .link").index("a")//给index传递一个选择器,那么返回值就是原先元素相对于选择器匹配元素集合中的索引位置
    33                 console.log(i3);
    34             var i4=$(".acon").index(".con a");
    35                 console.log(i4);//同上
    36             var i5=$(".con a").index($(".acon"));//传递一组JQuery对象,返回这个对象集合中第一个元素在原先集合中的索引位置
    37                 console.log(i5);
    38             /*
    39                 总结:
    40                 1、不传对象,返回对象集合中的第一个元素相对于同辈元素的位置。
    41                 2、传递DOM对象或JQuery对象,返回此对象在原先集合中的索引位置
    42                 3、传递选择符,返回原先对象在匹配选择符集合中的索引位置
    43             */
    44         });
    45     </script>
    46 </body>
    47 </html>
    总结:
    1、不传对象,返回对象集合中的第一个元素相对于同辈元素的位置。
    2、传递DOM对象或JQuery对象,返回此对象在原先集合中的索引位置。
    3、传递选择符,返回原先对象在匹配选择符集合中的索引位置或者原先对象集合中第一个元素在选择符集合中的索引位置。
    放下过去,才能迎接未来! 未来的每一天我都要过的精彩!
  • 相关阅读:
    ACM-ICPC 2018 焦作赛区网络预赛 H题 String and Times(SAM)
    ACM-ICPC 2018 焦作赛区网络预赛 G题 Give Candies
    ACM-ICPC 2018 焦作赛区网络预赛 B题 Mathematical Curse
    2018ACM/ICPC 焦作网络预选赛-A Magic Mirror
    POJ 1966 Cable TV NETWORK(网络流-最小点割集)
    最大权闭合子图
    HihoCoder 1398 网络流
    UVA11324 The Lagest Lique(SCC缩点+DP)
    POJ 2186 Popular cows(SCC 缩点)
    HDU5394 Bomb
  • 原文地址:https://www.cnblogs.com/lilylearning1992/p/4632945.html
Copyright © 2011-2022 走看看