学习JQuery中文文档之index()函数
最初认识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()函数的更多相关文章
- 学习JQuery中文文档之get()函数
前端大神群的群主告诉我们:学习一个框架最好的方法是去把官方文档研究一遍. 现在正式开始我的前端之路,从JQuery的中文文档开始. 基础不牢固,看起来有点慢,但是我会一直坚持下去的.把遇到的问题都记录 ...
- 学习JQuery中文文档之map()函数和get()函数
今天学到一个新的函数map(). map(callback) 官方概述: 将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值.属性还是CSS样式,或者其他特别形式 ...
- java冒泡排序-选择排序-插入排序-使用API中文文档直接调用函数
import java.util.Arrays; public class ArrayDemo2_3 { public static void main(String []args) { //---- ...
- (十)unity4.6学习Ugui中文文档-------參考-UGUI Canvas Components
大家好,我是孙广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unit ...
- (二十二)unity4.6学习Ugui中文文档-------交互-Eventsystem & Binding
大家好,我是孙广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unityma ...
- unity4.6学习Ugui中文文档-------参考-UGUI Rect Transform
1 . Rect Transform Rect Transform 是 2D 与 3D 图形的 Transform 组件对应.它用来指定用户界面系统中的大小. 位置和旋转的控件 Properties ...
- (二十一)unity4.6学习Ugui中文文档-------交互-Supported Events & Raycasters
大家好,我是孙广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:mod=guide&view=m ...
- (九)unity4.6学习Ugui中文文档-------參考-UGUI Rect Transform
大家好.我是孙广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unit ...
- jQuery中文文档
http://www.jquery123.com/ http://www.shifone.cc/
随机推荐
- Android RecyclerView使用详解(二)
在上一篇(RecyclerView使用详解(一))文章中简单的介绍了RecyclerView的基本用法,接下来要来讲讲RecyclerView的更多用法,要实现不同的功能效果,大部分都还是在于Recy ...
- Java 中无参无返回值方法的使用
如果方法不包含参数,且没有返回值,我们称为无参无返回值的方法. 方法的使用分两步: 第一步,定义方法 例如:下面代码定义了一个方法名为 show ,没有参数,且没有返回值的方法,执行的操作为输出 “ ...
- 使用服务器端控制AJAX页面缓存
你知道 response.setHeader("Cache-Control","no-cache"); 这条语句是干什么的吗? 这是用来防止浏览器缓存动态内容生 ...
- Linux free -m 详细说明
一.free命令 free命令由procps.*.rpm提供(在Redhat系列的OS上).free命令的所有输出值都是从/proc/meminfo中读出的. 在系统上可能有meminfo(2)这个函 ...
- Jquery图片随滚动条加载
很久以前的写的Jquery图片随滚动条加载,现在不是什么新技术,应用也很广泛,大大提高图片多的页面打开速度! 有需要的朋友看看吧!有什么意见或建议欢迎留言交流! Demo.html 源码: < ...
- c/c++ 数字转成字符串, 字符串转成数字
c/c++ 数字转成字符串, 字符串转成数字 ------转帖 数字转字符串: 用C++的streanstream: #include <sstream> #Include <str ...
- C# int.Parse()、int.TryParse()与Convert.ToInt32()的区别
1.(int)是一种类型转换:当我们觟nt类型到long,float,double,decimal类型,可以使用隐式转换,但是当我们从long类型到int类型就需要使用显式转换,否则会产生编译错误. ...
- 图书简介:Spring Batch批处理框架
大数据时代批处理利器,国内首度原创解析Spring Batch框架. 内容简介: <Spring Batch 批处理框架>全面.系统地介绍了批处理框架Spring Batch,通过详尽的实 ...
- 麒麟OS剽窃
今年对于我们的IT行业来说可以算是耻辱的一年. 首先是“汉芯丑闻”,上海交大研制了一个所谓的国内第一个完全拥有自主知识产 权的DSP芯片(数字信号微处理器)——“汉芯”,研制人陈进教授以此领取政府一亿 ...
- 第二百二十八天 how can I 坚持
hibernate 还有好多不会搞啊,本来很简单的东西,没用过就不会. 今天... 只是感觉很累,昨天爬山爬的,不知道该写点啥了,买的羽绒服到了,还行吧,凑合穿吧. 睡觉了.今天貌似又发脾气了.哎.. ...