1、认识
   $().each()遍历当前jQuery对象,并在每一个元素上执行回调函数。其方法内部是通过调用静态方法jQuery.each()来实现的。
   jQuery.each()是一个通用的遍历迭代的静态方法,用于无缝的遍历对象或者数组。如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象—尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数。
2、语法:
    2.1、$(selector).each(function(index,element)
   描述:
function(index,element)

必需。为每个匹配元素规定运行的函数。

  • index - 选择器的 index 位置
  • element - 当前的元素(也可使用 "this" 选择器)
2.2、jQuery.each(collection,callback(indexInArray,valueofElement))
3、$().each()和$.each()实例:
3.1、.each()
描述:输出每个 li 元素的文本:
HTML代码
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>

JS代码:

$(document).ready(function(){
$("li").each(function(){
alert($(this).text())
});
});

结果为:Coffee Milk Soda

3.2、 jQuery.each()
 3.2.1、each处理一维数组
 var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i);
alert(val);
});
alert(i)将输出为:,,
alert(val)将输出为:aaa,bbb,ccc

3.2.2、each处理二维数组  

var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function(i, item){
alert(i);
alert(item);
});
alert(i)将输出为:,,
alert(item)将输出为: ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']

3.2.3、对此二位数组的处理稍作变更之后

  var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
  $.each(arr, function(i, item){
  $.each(item,function(j,val){
     alert(j);
    alert(val);
 });
});
alert(j)输出为:,,,,,,,,
alert(val)输出为:a,aa,aaa,b,bb,bbb,c,cc,ccc
3.2.4、each处理json数据,这个each就有更厉害了,能循环每一个属性  
 var obj = { one:, two:, three:};
$.each(obj, function(key, val) {
alert(key);
alert(val);
});
alert(key)输出为:one two three
alert(val)输出为:
3.2.5、如果不想输出第一项 (使用retrun true)进入 下一遍历
var myArray=["skipThis", "dothis", "andThis"];
$.each(myArray, function(index, value) {
if (index == ) {
return true; // equivalent to ‘continue' with a normal for loop
}
// else do stuff…
alert (index + “: “+ value);
});
结果为::dothis
结果为::andThis
3.2.6、回调函数中 return false时可以退出$.each(), 如果返回一个非false 即会像在for循环中使用continue 一样, 会立即进入下一个遍历.
HTML代码:
<body>
<div id=”one”></div>
<div id=”two”></div>
<div id=”three”></div>
<div id=”four”></div>
<div id=”five”></div>
</body>

JS代码:

 var arr = [ "one", "two", "three", "four", "five" ];//数组
var obj = { one:, two:, three:, four:, five: }; // 对象
jQuery.each(arr, function() { // this 指定值
$(“#” + this).text(“Mine is ” + this + “.”); // this指向为数组的值, 如one, two
return (this != “three”); // 如果this = three 则退出遍历
});
jQuery.each(obj, function(i, val) { // i 指向键, val指定值
$(“#” + i).append(document.createTextNode(” – ” + val));
});

结果为:

Mine is one.
Mine is two.
Mine is three.

-
-
-
-
4、扩展
其实jQuery里的each方法是通过js里的call方法来实现的。
下面简单介绍一下call方法。
call这个方法很奇妙,其实官方的说明是:“调用一个对象的一个方法,以另一个对象替换当前对象。”网上更多的解释是变换上下文环境,也有说是改变上下文this指针。
call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
参数 :thisObj --->可选项。将被用作当前对象的对象。 
参数:arg1, arg2, , argN --->可选项。将被传递方法参数序列。 
 
说明 :
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,,);
这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);
 // 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。 
 
 


 
 
 
 

区别和详解:jQuery中的 $().each()和$.each()/jQuery.each()的更多相关文章

  1. java中4种修饰符访问权限的区别及详解全过程

    java中4种修饰符访问权限的区别及详解全过程 http://jingyan.baidu.com/article/fedf0737700b3335ac8977ca.html java中4中修饰符分别为 ...

  2. Windows8 各种版本区别对比详解

    微软的 Windows8 操作系统提供了4个不同的版本,分别是 Windows RT.Windows 8 标准版.Windows 8 Pro 专业版 以及 Windows 8 Enterprise 企 ...

  3. 详解Java中的clone方法

    详解Java中的clone方法 参考:http://blog.csdn.net/zhangjg_blog/article/details/18369201/ 所谓的复制对象,首先要分配一个和源对象同样 ...

  4. 详解CorelDRAW中如何合并与拆分对象

    合并两个或多个对象可以创建带有共同填充和轮廓属性的单个对象,以便将这些对象转换为单个曲线对象.可以合并的对象包括矩形.椭圆形.多边形.星形.螺纹.图形或文本等,本教程将详解CorelDRAW中关于合并 ...

  5. 详解 javascript中offsetleft属性的用法(转)

    详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

  6. shell学习(9)- du和df区别及详解

    清明小长假来加班,总得干点啥吧,今天就说说du 和df的区别. 1.区别 du,disk usage,是通过搜索文件来计算每个文件的大小然后累加,du能看到的文件只是一些当前存在的,没有删除的.他计算 ...

  7. 详解javascript中的this对象

    详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...

  8. Java日志管理:Logger.getLogger()和LogFactory.getLog()的区别(详解Log4j)

    Java日志管理:Logger.getLogger()和LogFactory.getLog()的区别(详解Log4j) 博客分类: Java综合   第一.Logger.getLogger()和Log ...

  9. 详解JavaScript中的原型

    前言 原型.原型链应该是被大多数前端er说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括我自己. 最早一篇原型链文章写于2019年07月,那个时候也是费了老大劲才理解到了七八成,到现在 ...

  10. 《手把手教你》系列技巧篇(二十七)-java+ selenium自动化测试- quit和close的区别(详解教程)

    1.简介 尽管有的小伙伴或者童鞋们觉得很简单,不就是关闭退出浏览器,但是宏哥还是把两个方法的区别说一下,不然遇到坑后根本不会想到是这里的问题. 2.源码 本文介绍webdriver中关于浏览器退出操作 ...

随机推荐

  1. js隐藏或显示某区域

    隐藏: document.getElementById(“keleyi”).style.display = “none”; 显示: document.getElementById(“keleyi”). ...

  2. C程序编译过程浅析

    前几天看了<程序员的自我修养——链接.装载与库>中的第二章“编译和链接”,主要根据其中的内容简单总结一下C程序编译的过程吧. 我现在一般都是用gcc,所以自然以GCC编译hellworld ...

  3. Lua使用心得(2)

    在lua脚本调用中,如果我们碰到一种不好的脚本,例如: while 1 do do end 那我们的程序主线程也会被阻塞住.那我们如何防止这种问题呢?下面就给出一个解决的办法. 首先为了不阻塞主线程, ...

  4. iOS 学习笔记二【cocopods安装使用和安装过程中遇到的问题及解决办法】【20160725更新】

    在osx 10.11之前cocopods问题不多,但是升级到11之后的版本,之前的cocopods大多用不了,需要重新安装,对于我这种使用测试版系统的技术狂来说,每次都需要重新安装很多东西, 当然,c ...

  5. 新平台,新版本,ComponentOne 持续发力

    我们很高兴宣布2016年 V1 版本发布了,可免费下载试用. 今年ComponentOne 将聚焦WinForm.WPF.MVC.UWP平台和核心控件Flex家族. 本次发布主要包括UWP平台:Win ...

  6. virtualbox创建com对象失败(解决方法)

      我的电脑是win7 64bit的,和舍友同时安装virtualbox,她的是win8,安装得很顺利. 我的就比较坎坷了,安装完打开后就出现了这个问题.   试过网上的好几个方法都不行,最后结合了两 ...

  7. Scalaz(51)- scalaz-stream: 资源使用安全-Resource Safety

    scalaz-stream是一个数据流处理工具库,对资源使用,包括:开启文件.连接网络.连接数据库等这些公共资源使用方面都必须确定使用过程的安全:要保证在作业终止时能进行事后处理程序(finalize ...

  8. gcd和ex_gcd

    gcd就是欧几里得算法,可以快速的求出俩个数的最大公因数,进而也可以求其最大公倍数(俩数之积除以最大公因数),比较简单直接看代码就好了,一般用递归版,简短精简,敲得快,但如果数剧奇葩,怕溢出,那就用递 ...

  9. Web-Nginx配置

    #运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log logs/error.log; ...

  10. ORM实现原理

    1.什么是ORM ORM的全称是Object Relational Mapping,即对象关系映射.它的实现思想就是将关系数据库中表的数据映射成为对象,以对象的形式展现,这样开发人员就可以把对数据库的 ...