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在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
webpack4 升级迁移的实现
Sep 12 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
js正则表达式简单校验方法
Jan 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 使用file_get_contents读取大文件的方法
2014/11/13 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
JS的get和set使用示例
2014/02/20 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
Python迭代用法实例教程
2014/09/08 Python
Python lambda和Python def区别分析
2014/11/30 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
浅析python函数式编程
2020/09/26 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
2014年开学第一课活动方案
2014/03/06 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
敬老院活动总结
2014/04/28 职场文书
优秀求职信
2014/05/29 职场文书
学校2014年度工作总结
2014/12/06 职场文书
个人学习总结范文
2015/02/15 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle