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 相关文章推荐
js左侧三级菜单导航实例代码
Sep 13 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
学习Node.js模块机制
Oct 17 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 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中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
php操作redis缓存方法分享
2015/06/03 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Python中List.count()方法的使用教程
2015/05/20 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
股权收购意向书
2014/04/01 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记