jquery each的几种常用的使用方法示例


Posted in Javascript onJanuary 21, 2014

jQuery源码里自己也有很多用到each方法。其实jQuery里的each方法是通过js里的call方法来实现的。下面简单介绍一下call方法。

call这个方法很奇妙,其实官方的说明是:“调用一个对象的一个方法,以另一个对象替换当前对象。”网上更多的解释是变换上下文环境,也有说是改变上下文this指针。

call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

参数

thisObj  可选项。将被用作当前对象的对象。
arg1, arg2,  , argN  可选项。将被传递方法参数序列。

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

例子

function add(a,b)   
{   
    alert(a+b);   
}   
function sub(a,b)   
{   
    alert(a-b);   
}   
add.call(sub,3,1); 

用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);
注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
具体call更深入的就不在这里提了。

下面提一下jQuery的each方法的几种常用的用法

 var arr = [ "one", "two", "three", "four"];     
 $.each(arr, function(){     
    alert(this);     
 });  
 

上面这个each输出的结果分别为:one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     
$.each(arr1, function(i, item){     
   alert(item[0]);     
}); 

其实arr1为一个二维数组,item相当于取每一个一维数组,  
item[0]相对于取每一个一维数组里的第一个值  
所以上面这个each输出分别为:1   4   7    

var obj = { one:1, two:2, three:3, four:4};     
$.each(obj, function(key, val) {     
    alert(obj[key]);           
});  

这个each就有更厉害了,能循环每一个属性    
输出结果为:1   2  3  4

Javascript 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
dwr spring的集成实现代码
Mar 22 Javascript
潜说js对象和数组
May 25 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 #Javascript
javascript break指定标签打破多层循环示例
Jan 20 #Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 #Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 #Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 #Javascript
js取值中form.all和不加all的区别介绍
Jan 20 #Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 #Javascript
You might like
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
Python程序设计入门(3)数组的使用
2014/06/16 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
python字符串反转的四种方法详解
2019/12/02 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
C语言面试题
2013/05/19 面试题
中学教师管理制度
2014/01/14 职场文书
自荐书范文范例
2014/02/13 职场文书
经典促销广告词大全
2014/03/19 职场文书
实习生辞职信范文
2015/03/02 职场文书
工作犯错保证书
2015/05/11 职场文书
工会经费申请报告
2015/05/15 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js