jQuery的对象访问函数(get,index,size,each)
1.get() 元素集合
取得所有匹配的 DOM 元素集合。 这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,而实际上是元素数组)。 如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。 示例
描述:
选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。 HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代码:
$("img").get().reverse();结果:
[ <img src="test2.jpg"/> <img src="test1.jpg"/> ]
2.get(index) 返回的是DOM元素,类似于[index]。
取得其中一个匹配的元素。 num表示取得第几个匹配的元素。 这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。 参数
indexNumber取得第 index 个位置上的元素 示例
描述: HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代码:
$("img").get(0);结果:
[ <img src="test1.jpg"/> ]
3.index() 查找元素在同辈中位置
搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。
具体请参考示例。
参数
subject (可选)Selector,Element
要搜索的对象
示例
描述:
查找元素的索引值
HTML 代码:
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
jQuery 代码:
$('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1,传递一个jQuery对象
$('li').index($('li:gt(0)')); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1,传递一个选择器,返回#bar在所有li中的做引位置
$('#bar').index(); //1,不传递参数,返回这个元素在同辈中的索引位置。
4.each遍历对象的方法: 循环遍历对象
以每一个匹配的元素作为上下文来执行一个函数。
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
参数
callbackFunction
对于每个匹配的元素所要执行的函数
示例
描述:
迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
HTML 代码:
<img/><img/>
jQuery 代码:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
结果:
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
描述:
如果你想得到 jQuery对象,可以使用 $(this) 函数。
HTML 代码:
<button>Change colors</button>
<span></span>
<div></div>
<div></div> <div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div> <div></div>
<div></div>
jQuery 代码:
$("img").each(function(){
$(this).toggleClass("example");
});
描述:
你可以使用 'return' 来提前跳出 each() 循环。
HTML 代码:
<button>Change colors</button>
<span></span>
<div></div>
<div></div> <div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div> <div></div>
<div></div>
jQuery 代码:
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
5.length属性: 与size()一样
jQuery 对象中元素的个数。
当前匹配的元素个数。 size 将返回相同的值。
示例
描述:
计算文档中所有图片数量
HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代码:
$("img").length;
结果:2
6. selector 返回选择器
jQuery 1.3新增。返回传给jQuery()的原始选择器。
换句话说,就是返回你用什么选择器来找到这个元素的。可以与context一起使用,用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。
示例
描述:
确定查询的选择器
jQuery 代码:
$("ul")
.append("<li>" + $("ul").selector + "</li>")
.append("<li>" + $("ul li").selector + "</li>")
.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
结果:
ul
ul li
div#foo ul:not([class])
7.size() 与length属性一样
jQuery 对象中元素的个数。
这个函数的返回值与 jQuery 对象的'length' 属性一致。
示例
描述:
计算文档中所有图片数量
HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代码:
$("img").size();
结果:
2
jQuery的对象访问函数(get,index,size,each)的更多相关文章
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...
- 知识笔记:jQuery 事件对象属性小结
使用事件自然少不了事件对象.因为不同浏览器之间事件对象的获取,以及事件对象的属性都有差异,导致我们很难跨浏览器使用事件对象.jQuery中统一了事件对象,当绑定事件处理函数时,会将jQuery格式化后 ...
- jquery 事件对象属性小结
使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQue ...
- jquery对象访问
jquery对象访问 方法名 说明 语法 (callback 执行的函数,object指定元素的对象.) each() 用于以当前jQuery对象匹配到的每个元素作为上下文来遍历执行指定的函数 jQu ...
- jQuery1.11源码分析(9)-----初始化jQuery对象的函数和关联节点获取函数
这篇也没什么好说的,初始化jQuery对象的函数要处理多种情况,已经被寒冬吐槽烂了.关联节点获取函数主要基于两个工具函数dir和sibling,前者基于指定的方向遍历,后者则遍历兄弟节点(真的不能合并 ...
- jquery 源码学习(四)构造jQuery对象-工具函数
jQuery源码分析-03构造jQuery对象-工具函数,需要的朋友可以参考下. 作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原 ...
- JQUERY中各个ajax函数
1.$(selecter).load() --- load() 方法从服务器加载数据,并把返回的数据放入被选元素中 2.$.get(url,callback()) 3.$.post(url,d ...
- jQuery ajax() 参数,回调函数,数据类型,发送数据到服务器,高级选项
$.ajax({ options:/*类型:Object; 可选.AJAX 请求设置.所有选项都是可选的.*/ async:/*类型:Boolean; 默认值: true.默认设置下,所有请求均为异 ...
- Python入门之函数的嵌套/名称空间/作用域/函数对象/闭包函数
本篇目录: 一.函数嵌套 二.函数名称空间与作用域 三.函数对象 四.闭包函数 ============================================================ ...
随机推荐
- CF982C Cut 'em all!
思路: 在深搜过程中,贪心地把树划分成若干个连通分支就可以了.划分的条件是某个子树有偶数个节点.注意到在一次划分之后并不需要重新计数,因为一个数加上一个偶数并不影响这个数的奇偶性. 实现: #incl ...
- 从 fn_dbLog 解析操作日志(补充update)
过去经常听到SQL server 日志,可是在提供的界面上看到的Log不是我们想要的,我们想窥探具体的数据操作日志.专业恢复追踪数据库操作日志的软件:ApexSQLLog,偶然发现SQL Server ...
- Axure-计算输入字数
说明:Axure版本为7.0 1.添加多行文本框,设置名称为Input,添加文本框,设置名称为msg,样式如下: 2.为input添加“文本改变时”事件,设置全局变量,如下所示: 3.再添加“设置文本 ...
- ubuntu下php安装目录说明
php当前安装目录 /etc/php5/ apache2: 采用APACHE2HANDLER启动 cli: 采用命令启动 fpm php-fpm启动 fpm2 php-fpm多实例 m ...
- 关于ie的内存泄漏与javascript内存释放
最近做一个公司的业务系统,公司要求能尽可能的与c/s近似,也就是如c/s一样,点击文本框可以弹出此项目的相关内容,进行选择输入. 我使用了弹出窗口,然后在子窗口双击选中项目,把选中的值返回给父 ...
- javascript innerHTML 大数据量加载 导致IE 内存溢出 的解决办法
在做 ajax 滚动加载的时候,越到后面 数据量越大,使用obj.innerHTML+=row添加到页面的时候,出现ie内存不足的情况,此时使用createDocumentFragment,创建一个文 ...
- 洛谷 P2894 [USACO08FEB]酒店Hotel
题目描述 The cows are journeying north to Thunder Bay in Canada to gain cultural enrichment and enjoy a ...
- 洛谷 P1434 滑雪
题目描述 Michael喜欢滑雪.这并不奇怪,因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道在一个区域中最长 ...
- 10道有关ios的题
1.你使用过Objective-C的运行时编程(Runtime Programming)么?如果使用过,你用它做了什么?你还能记得你所使用的相关的头文件或者某些方法的名称吗? 2.你实现过多线程的Co ...
- JSP页面通过c:forEach标签循环遍历List集合
c:forEach>标签有如下属性: 属性 描述 是否必要 默认值items 要被循环的信息 否 无begin 开始的元素(0=第一个元素,1=第二个元素) 否 0end 最后一个元素(0=第一 ...