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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
javascript事件问题
Sep 05 Javascript
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
Python 时间处理datetime实例
2008/09/06 Python
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
python实现简单登陆流程的方法
2018/04/22 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python中函数参数调用方式分析
2018/08/09 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
python gdal安装与简单使用
2019/08/01 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
设计部经理的岗位职责
2013/11/16 职场文书
重阳节登山活动方案
2014/02/03 职场文书
大学毕业寄语大全
2014/04/10 职场文书
创建青年文明号材料
2014/05/09 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
高中生逃课检讨书
2014/10/10 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
雨中的树观后感
2015/06/03 职场文书
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android