`
snake_hand
  • 浏览: 625009 次
社区版块
存档分类
最新评论

$.each 和$(selector).each()的区别

 
阅读更多

转自：http://blog.csdn.net/on_my_way20xx/article/details/7791769

$.each()

译自官方手册:jQuery.each()

对数组或对对象内容进行循环处理

jQuery.each( collection, callback(indexInArray, valueOfElement) )

collection   遍历的对象或数组

callback(indexInArray, valueOfElement) 在每一个对象上调用的函数

说明

一个通用的遍历函数 , 可以用来遍历对象和数组. 数组和含有一个length属性的伪数组对象 (伪数组对象如function的arguments对象)以数字索引进行遍历,从0到length-1, 其它的对象通过的属性进行遍历.

$.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象—尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数

 1 //例子:———传入数组
 2 <!DOCTYPE html>
 3 <html>
 4 　　<head>
 5 　　<script src=”http://code.jquery.com/jquery-latest.js”></script>
 6 　　</head>
 7 <body>
 8 　　<script>
 9 　　　　$.each([52, 97], function(index, value) {
10 　　　　　　alert(index + ‘: ‘ + value);
11 　　　　});
12 　　</script>
13 </body>
14 </html>
15 //输出
16 0: 52
17 1: 97
 1 //例子:———如果一个映射作为集合使用,回调函数每次传入一个键-值对
 2 <!DOCTYPE html>
 3 <html>
 4 　　<head>
 5 　　　　<script src=”http://code.jquery.com/jquery-latest.js”></script>
 6 　　</head>
 7 <body>
 8 <script>
 9 　　var map = {
10 　　　　‘flammable’: ‘inflammable’,
11 　　　　‘duh’: ‘no duh’
12 　　};
13 　　$.each(map, function(key, value) {
14 　　　　alert(key + ‘: ‘ + value);
15 　　});
16 </script>
17 </body>
18 </html>
19 //输出
20 flammable: inflammable
21 duh: no duh
 1 //例子:———回调函数中 return false时可以退出$.each(), 如果返回一个非false 即会像在for循环中使用continue 一样, 会立即进入下一个遍历
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5   <style>
 6   div { color:blue; }
 7   div#five { color:red; }
 8   </style>
 9   <script src=”http://code.jquery.com/jquery-latest.js”></script>
10 </head>
11 <body>
12   <div id=”one”></div>
13   <div id=”two”></div>
14   <div id=”three”></div>
15   <div id=”four”></div>
16   <div id=”five”></div>
17 <script>
18     var arr = [ "one", "two", "three", "four", "five" ];//数组
19     var obj = { one:1, two:2, three:3, four:4, five:5 }; // 对象
20     jQuery.each(arr, function() {  // this 指定值
21       $(“#” + this).text(“Mine is ” + this + “.”);  // this指向为数组的值, 如one, two
22        return (this != “three”); // 如果this = three 则退出遍历
23    });
24     jQuery.each(obj, function(i, val) {  // i 指向键, val指定值
25       $(“#” + i).append(document.createTextNode(” – ” + val));
26     });
27 </script>
28 </body>
29 </html>
30 // 输出
31 Mine is one. – 1
32 Mine is two. – 2
33 Mine is three. – 3
34 - 4
35 - 5
 1 //例子:———遍历数组的项, 传入index和value
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 　　<script src=”http://code.jquery.com/jquery-latest.js”></script>
 6 </head>
 7 <body>
 8 <script>
 9 　　$.each( ['a','b','c'], function(i, l){
10 　　　　alert( “Index #” + i + “: ” + l );
11 　　});
12 </script>
13 </body>
14 </html>
 1 //例子:———遍历对象的属性,传入 key和value
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 　　<script src=”http://code.jquery.com/jquery-latest.js”></script>
 6 </head>
 7 <body>
 8 <script>
 9 　　$.each( { name: “John”, lang: “JS” }, function(k, v){
10 　　　　alert( “Key: ” + k + “, Value: ” + v );
11 　　});
12 </script>
13 </body>
14 </html>
 1 1. 如果不想输出第一项 (使用retrun true)进入 下一遍历
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 　　<script src=”http://code.jquery.com/jquery-latest.js”></script>
 6 </head>
 7 <body>
 8 <script>
 9 　　var myArray=["skipThis", "dothis", "andThis"];
10 　　$.each(myArray, function(index, value) {
11 　　　　if (index == 0) {
12 　　　　return true; // equivalent to ‘continue’ with a normal for loop
13 　　}
14　　 　　// else do stuff…
15 　　　　alert (index + “: “+ value);
16 　　});
17 </script>
18 </body>
19 </html>

 

 

 

 

2
顶
0
踩
分享到：
| JQuery 回车切换文本焦点
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    深入理解$.each和$(selector).each

    值得注意的是，$.each和$(selector).each的一个区别在于，当使用$(selector).each时，回调函数内的`this`指向的是DOM元素，而不是jQuery对象。这是因为在$.each的源码中，通过`callback.apply()`方法改变了`this`的...

    Jquery实现$.fn.extend和$.extend函数_.docx

    总结来说，`$.fn.extend`和`$.extend`的主要区别在于： 1. `$.fn.extend`扩展的是jQuery实例的原型，使新方法适用于所有jQuery对象。 2. `$.extend`扩展的是jQuery对象本身，增加了全局的静态方法。 完整的代码...

    JQuery中$.each 和$(selector).each()的区别详解

    在JQuery中，有两个经常被用来遍历对象和数组的函数，分别是$.each和$(selector).each()。这两个函数虽然功能相似，但它们的用法和适用范围有所不同。 $.each函数是一个通用的遍历函数，它可以用来遍历数组、对象，...

    jquery的$().each和$.each的区别

    这个函数和之前项目里面用到的遍历数据的函数不是同一个呀（项目里面用到的函 数：$.each(dataresource,function(index,element))），于是，就好好研究了下，果然在JS里面有两个相似的函数，于是也就有了今天的主题...

    jQuery中$.each()函数的用法引申实例

    2. $.each()和`$(selector).each()`不同。前者是对任何集合进行遍历，后者是针对jQuery选择器的结果集进行遍历。 3. 回调函数的参数可以是两个（索引和值），一个（仅索引）或者没有。如果省略参数，`this`关键字会...

    Jquery实现$.fn.extend和$.extend函数

    在jQuery库中，`$.fn.extend` 和 `$.extend` 是两个非常重要的功能，它们用于扩展jQuery的功能和对象。这两个函数虽然名字相似，但作用却截然不同。 首先，`$.fn.extend` 是用于扩展jQuery选择器对象的方法。当你...

    jQuery 1.5 API 中文版

    $.jQuery( selector [, context] ), .jQuery( element ), .jQuery( elementArray ), .jQuery( jQueryObject ), .jQuery( ) $.jQuery( html [, ownerDocument] ), .jQuery( html, props ) $.jQuery( fn ) jQuery ...

    jQueryAPI_CHM.rar

    还支持事件委托，如$.fn.delegate(selector, eventType, handler)，以及$.fn.on()和$.fn.off()来实现更灵活的事件处理。 四、动画与效果 jQuery的动画功能非常强大，$.fn.fadeIn()、$.fn.fadeOut()和$.fn....

    jquery1.3中文文档加js

    6.1 $.each()遍历：$.each()可以遍历数组或对象，如$.each([1, 2, 3], function(index, value) {...})或$.each({key1: "value1", key2: "value2"}, function(key, value) {...})。 6.2 兼容性处理：jQuery 1.3在...

    jquery1.7.2 API.CHM中文版

    jQuery 1.4.1的API文档虽然较旧，但仍包含了大量基础和关键的功能，例如$.each()用于遍历数组或对象，$.extend()用于合并对象，$.grep()用于过滤数组等。 总之，《jQuery 1.7.2 API中文版》和“jQueryAPI-1.41.chm...

    JQuery资源帮助文档

    此外，jQuery还提供了许多实用工具函数，如`$.each()`用于遍历数组或对象，`$.trim()`用于去除字符串首尾的空白，以及`$.extend()`用于合并对象。 **使用JQuery的优势** - **简洁的语法**：jQuery的链式操作和简化...

    JQuery自学第二天.docx

    静态方法直接通过JQuery类调用，如`$.each()`和`$.map()`，而实例方法则是通过JQuery对象调用，如`$(selector).click()`。 `$.each()`是一个常用的静态方法，用于遍历数组或对象，而`$.map()`则用于创建新数组，...

    jQuery1.4 API

    工具浏览器及特性检测 $.support $.browser $.browser.version $.boxModel 数组和对象操作 $.each(object, [callback]) $.extend([d],tgt,obj1,[objN]) $.grep(array, fn, [invert]) $.makeArray(obj) $.map(array, ...

    jquery中$.fn和图片滚动效果实现的必备知识总结

    在JavaScript和jQuery的世界里，实现图片滚动效果是一个常见的需求，而$.fn是jQuery库中用于扩展功能的关键。本文将深入探讨$.fn的用法以及如何利用它来创建一个图片滚动插件，同时涵盖IIFE（立即执行函数表达式）和...

    jQuery编程笔记

    - `$.each()`: 遍历集合中的每个元素，并执行相应的函数。 #### 四、jQuery DOM编程 1. **修改元素属性** - `$.attr()`: 获取或设置属性值。 - `$.removeAttr()`: 移除属性。 - `$.prop()`: 获取或设置属性值...

Magicbox
Global site tag (gtag.js) - Google Analytics