each（）

each(callback)

以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。

而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整形）。

返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

Execute a function within the context of every matched element.
This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element.

Additionally, the function, when executed, is passed a single argument representing the position of the element in the matched set (integer, zero-index).

Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with a normal loop).

返回值

jQuery

参数

callback (Function) : 对于每个匹配的元素所要执行的函数

示例

迭代两个图像，并设置它们的 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) 函数。

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;   } });});

--------------------------------------------------------------------------------------------------------------------------------

size()

jQuery 对象中元素的个数。
这个函数的返回值与 jQuery 对象的'length' 属性一致。
The number of elements in the jQuery object.
This returns the same number as the 'length' property of the jQuery object.

返回值

Number

示例

计算文档中所有图片数量

HTML 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>

jQuery 代码:

$("img").size();

结果:

2
-------------------------------------------------------------------------------------------------------------------------

length

jQuery 对象中元素的个数。
当前匹配的元素个数。 size 将返回相同的值。
The number of elements in the jQuery object.
The number of elements currently matched. The size function will return the same value.

返回值

Number

示例

计算文档中所有图片数量

HTML 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>

jQuery 代码:

$("img").length;

结果:

2
---------------------------------------------------------------------------------------------------------------------------------------

get()

取得所有匹配的 DOM 元素集合。

这是取得所有匹配元素的一种向后兼容的方式（不同于jQuery对象，而实际上是元素数组）。

如果你想要直接操作 DOM 对象而不是 jQuery 对象，这个函数非常有用。

Access all matched DOM elements.
This serves as a backwards-compatible way of accessing all matched elements (other than the jQuery object itself, which is, in fact, an array of elements). It is useful if you need to operate on the DOM elements themselves instead of using built-in jQuery functions.

返回值

Array<Element>

示例

选择文档中所有图像作为元素数组，并用数组内建的 reverse 方法将数组反向。

HTML 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>

jQuery 代码:

$("img").get().reverse();

结果:

[ <img src="test2.jpg"/> <img src="test1.jpg"/> ]
---------------------------------------------------------------------------------------------------------------------------------------

get(index)

取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
Access a single matched DOM element at a specified index in the matched set.
This allows you to extract the actual DOM element and operate on it directly without necessarily using jQuery functionality on it. This function called as $(this).get(0) is the equivalent of using square bracket notation on the jQuery object itself like $(this)[0].

返回值

Element

参数

index (Number) :取得第 index 个位置上的元素

示例

HTML 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>

jQuery 代码:

$("img").get(0);

结果:

[ <img src="test1.jpg"/> ]

---------------------------------------------------------------------------------------------------------------------------------------

index(subject)

搜索与参数表示的对象匹配的元素，并返回相应元素的索引值值。
如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1。
Searches every matched element for the object and returns the index of the element, if found, starting with zero.
Returns -1 if the object wasn't found.

返回值

Number

参数

subject (Element) : 要搜索的对象

示例

返回ID值为foobar的元素的索引值值。

HTML 代码:

<div id="foobar"><b></b><span id="foo"></span></div>

jQuery 代码:

$("*").index($('#foobar')[0])

结果:

5

转载于:https://www.cnblogs.com/EWall/archive/2010/11/23/1885323.html

jquery 学习之一 对象访问相关推荐

  1. 【jQuery学习】—jQuery对象的访问

    [jQuery学习]-jQuery对象的访问 一.each方法 作用:遍历jQuery对象中的元素 格式:jQuery对象.each(function(index, ele){}); 注意:index ...

  2. Java虚拟机学习（6）：对象访问

    对象访问会涉及到Java栈.Java堆.方法区这三个内存区域. 如下面这句代码: 1 Object objectRef = new Object(); 假设这句代码出现在方法体中,"Obje ...

  3. jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例

    day03 - jQuery 学习目标: 能够说出4种常见的注册事件 能够说出 on 绑定事件的优势 能够说出 jQuery 事件委派的优点以及方式 能够说出绑定事件与解绑事件 能够说出 jQuery ...

  4. jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）

    day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...

  5. 【jQuery学习】—jQuery对象的串联

    [jQuery学习]-jQuery对象的串联 一.add方法 作用:把表达式匹配的元素添加到jQuery中 格式:jQuery对象.add(表达式); 二.contents方法 作用:查找匹配元素内部 ...

  6. 【jQuery学习】—jQuery对象的过滤

    [jQuery学习]-jQuery对象的过滤 一.eq方法 作用:获取对应下标的jQuery对象 格式:jQuery对象集合.eq(下标) 二.first方法 作用:获取匹配元素集合中的第一个元素 格 ...

  7. jQuery学习（十二）—jQuery中对象的查找方法总结

    jQuery学习(十二)-jQuery中对象的查找方法总结 一.find方法 作用:在元素1中查找元素2,类似于选择器中的后代选择器 格式:元素1.find(元素2),元素2为CSS选择器或者jQue ...

  8. jQuery学习（六）—jQuery对象的创建

    jQuery学习(六)-jQuery对象的创建

  9. jQuery学习（二）—jQuery对象的获取

    jQuery学习(二)-jQuery对象的获取

最新文章

  1. web项目错误页面友好处理404,500等
  2. 【多网段切换导致DNS域名解析失败问题处理】
  3. html div圆滑效果,美化网页div -让边框拥有阴影，边角变得圆滑
  4. 详细图文演示——排除启动类故障以及Linux操作系统引导、运行级别和优化启动等相关知识
  5. Android开发人员的10大抱怨
  6. flink 本地_Flink 01 | 十分钟搭建第一个Flink应用和本地集群
  7. linux端口连通性测试telnet、wget、ssh、curl
  8. Linux中DHCP主配置文件解析
  9. Redis详细安装教程与启动redis
  10. 【转】Pickit 3 Programmer使用说明及 烧写程序步骤
  11. 显示计算机配置的命令是,查看电脑配置命令
  12. 关于Chrome浏览器主页被2345篡改
  13. 草枯树荣，让生命活得云淡风轻
  14. 从Spring为什么要用IoC的支点，我撬动了整个Spring的源码脉络
  15. refresh是什么？Spring refresh的12个步骤
  16. 为什么可以做Shopyy独立站
  17. 学会ipad当作电脑扩展屏方法
  18. Python实现坦克大战(TankWar)游戏
  19. 游码编程之Python代码应用
  20. 哈佛体系结构 哈佛体系结构

热门文章

  1. php如何编写通信协议,定制通讯协议
  2. python画画bup_Python中的高效Vector / Point类
  3. 160 - 11 Andrnalin.4
  4. 《LeetcodeHot100非困难题补录》
  5. LeetCode 100. 相同的树 思考分析
  6. Java IdentityHashMap putAll（）方法与示例
  7. 6.824 RPC lesson2 2020(二）
  8. C++ 使用extern C简单使用
  9. 括号匹配问题（c和c++版本实现）
  10. 【c】写头文件要加#ifndef，#define， #endif