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 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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创建PDF中文文档
2006/10/09 PHP
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
php购物车实现方法
2015/01/03 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
Javascript 面向对象特性
2009/12/28 Javascript
移动节点的jquery代码
2014/01/13 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
移动端界面的适配
2017/01/11 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
高二英语教学反思
2014/01/19 职场文书
采购意向书范本
2014/03/31 职场文书
安全责任书怎么写
2014/07/28 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
《日月潭》教学反思
2016/02/20 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript