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 相关文章推荐
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
jquery获取radio值实例
Oct 16 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
node.js实现快速截图
Aug 27 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 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
轻松修复Discuz!数据库
2008/05/03 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
JS字符串函数扩展代码
2011/09/13 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
jquery easyui使用心得
2014/07/07 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
小程序调用微信支付的方法
2019/09/26 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
django创建自定义模板处理器的实例详解
2017/08/14 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
解析Python的缩进规则的使用
2019/01/16 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
采购人员的个人自我评价
2014/01/16 职场文书
创先争优一句话承诺
2014/05/29 职场文书
新教师培训方案
2014/06/08 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript