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 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
JS实现纵向轮播图(初级版)
Jan 18 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
PHP生成带有雪花背景的验证码
2008/09/28 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
jquery为页面增加快捷键示例
2014/01/31 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
JS实现手风琴特效
2020/11/08 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python根据文件大小打log日志
2014/10/09 Python
python通过smpt发送邮件的方法
2015/04/30 Python
Django REST framework视图的用法
2019/01/16 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
python如何实现图片压缩
2020/09/11 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
蛋白质世界:Protein World
2017/11/23 全球购物
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
大学生党员个人剖析材料
2014/10/08 职场文书
复试通知单模板
2015/04/24 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
如何在Python项目中引入日志
2021/05/31 Python