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 相关文章推荐
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 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实现paypal整合方法
2010/11/28 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
为你总结一些php系统类函数
2015/10/21 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
python删除文本中行数标签的方法
2018/05/31 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
Python count函数使用方法实例解析
2020/03/23 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
什么是规则表达式
2012/05/03 面试题
周鸿祎:教你写创业计划书
2013/12/30 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
厨房管理计划书
2014/04/27 职场文书
污水处理保证书
2015/05/09 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
《观察物体》教学反思
2016/02/17 职场文书
Python实现滑雪小游戏
2021/09/25 Python