jquery 学习之一 对象访问


Posted in Javascript onNovember 23, 2010

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
Javascript 相关文章推荐
Javascript读取cookie函数代码
Oct 16 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 #Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 #Javascript
基于jquery的滑动样例代码
Nov 20 #Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 #Javascript
简单实用的js调试logger组件实现代码
Nov 20 #Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 #Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 #Javascript
You might like
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
微信小程序实战之轮播图(3)
2017/04/17 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
使用python为mysql实现restful接口
2018/01/05 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
先进事迹报告会主持词
2014/04/02 职场文书
水电维修专业推荐信
2014/09/06 职场文书
课题研究阶段性总结
2015/08/13 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
css3新特性的应用示例分析
2022/03/16 HTML / CSS
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS