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元素

取得其中一个匹配的元素。 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
 
时间: 2024-10-25 05:24:39

jQuery的对象访问函数(get,index,size,each)的相关文章

jquery 源码学习(四)构造jQuery对象-工具函数

jQuery源码分析-03构造jQuery对象-工具函数,需要的朋友可以参考下. 作者:nuysoft/高云 QQ:47214707 EMail:[email protected] 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 读读写写,不对的地方请告诉我,多多交流共同进步,本章的的PDF等本章写完了发布. jQuery源码分析系列的目录请查看 http://nuysoft.iteye.com/blog/1177451,想系统的好好写写,目前还是从我感兴趣的部分开始,如果大家有对哪

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

jQuery事件对象的作用

jQuery事件对象的作用 事件中的Event对象容易被初学者忽略掉,可能大多时候初学者不知道怎么去用它,但有些时候它还是非常有用的 一个标准的"click"点击事件 $(elem).on("click",function(event){ event //事件对象 }) 在不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异.jQuery根据 W3C 标准规范了事件对象,所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象

jQuery碎语(4) 实用函数

6.实用函数 ● 修剪字符串 $('#id').val($.trim($('#someid').val())) ● 遍历集合 可能这样写: var anArray = ['one','two']; for(var n = 0; n < anArray.length; n++){ } 还有可能这样写: var anObject = {one: 1, two: 2}; for(var p in anObject){ } 但有了$.each函数后,就可以这样写了: var anArray = ['on

jQuery 跨域访问问题解决方法

浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明,yahoo js util 的方式解决二级域名跨域访问的问题. 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏

浅谈jQuery的对象构成1

前段时间在阅读javaScript基于原型的面向对象编程相关资料时,对一直在使用的jQuery产生了点疑问,便对其稍作了点研究. 在javascript编程中,生成对象的方式有两种, 第一种,对象字面量方式: var foo = { name : "紅一葉", age : 18 }; 第二种就是通过构造器方式创建对象: function Foo(){ this.name = "紅一葉"; this.age = 18; } var foo = new Foo(); 在

《Javascript语言精粹》的学习(一).对象和函数

最近在学习小马和秦歌翻译的<javascript语言精粹>,果然如传闻般,里面的内容博大精深.有些章节所表达的意思往往需要看到后面的章节内容时才能够突然顿悟,因此,称这本书需要反复的去研究,真的名副其实.这两天看了对象和函数这两章,在这里把自己觉得需要关注的内容做一下笔记: ①对象常量中属性名的命名规范 记得刚开始学习对象常量的时候,觉得它真的很简便.一个对象名,一个大括号,N个“名/值”对,OK,搞定!可是在学习的过程中,也遇到过一些疑惑,比如在一些JS书籍中,在写对象常量时,对象中有的属性

JQuery实践--实用工具函数

实用工具函数,$命名空间的一系列函数,但不操作包装集.它要么操作除DOM元素以外的Javascript对象,要么执行一些非对象相关的操作. JQuery的浏览器检测标志可在任何就绪处理程序执行之前使用这些标志.$.browser :msie,mozilla,safari,opera,version(引擎的版本)$.boxModel: 方框模型,true/false. 决定了元素的内容大小$.styleFloat: float样式的名称,值为字符串,供属性名称使用   element.style[

JQuery $.ajax(); 异步访问完整参数

jquery中的ajax方法参数 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. async: 要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求.如