深入理解$.each和$(selector).each


Posted in Javascript onMay 15, 2016

$.each:该方法用于遍历任何集合,包括数组和对象

$(selector).each:该方法用于遍历Jquery对象

语法:$.each(obj,callback,args)

①遍历数组

var arry = ["a","b","c","d",…];

$.each(arry,function(index,value){…})

回调函数中:index 代表数组的索引 ,value 代表数组中的值

②遍历Json对象

var json = {key1:value1, key2:value2, key3:value3}

$.each(json, function(key,value){…})

回调函数中:key 代表json对象中的key, value 代表json对象中的value

③遍历Jquery对象

var doms = $("div");//Jquery对象本身是一个集合,通过索引的方式可以将Jquery对象转换为Dom对象

$.each(doms, function(index,value){..})

回调函数中:index 代表Jquery对象中的索引, value 代表Jquery对象中的dom对象,也可以通过this得到同样的dom对象

对于③还有另外一种写法就是 $("div").each(function(index,value){…})

对于$.each方法可以通过在回调函数中return false退出循环,如果return true 则相当于for循环中的continue

疑问:为什么$().each回调函数中的this不是Jquery对象 而是Dom对象

由于$().each方法的本质是通过调用$.each实现的,通过分析$.each源码可知,我们可以看到callback.apply(object[i++],args)这段代码

对于$().each传进去的object正是Jquery对象,而object[i++]将Jquery对象转换为dom对象,再根据apply方法劫持对象的特性,那么回调函数中的this就被改变成了dom对象

我们经常在Jquery插件中看到这种写法,通过上面的分析,我想就应该懂了

$.fn.test = function(option){

return this.each(function(){//这个this是Jquery对象

alert(this);//而这个this却是Dom对象

})

}

以上这篇深入理解$.each和$(selector).each就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 模拟用户单击事件
Dec 31 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
js中最容易被忽视的事件问题大总结
May 15 #Javascript
jquery点击改变class并toggle的实现代码
May 15 #Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 #Javascript
浅析js绑定事件的常用方法
May 15 #Javascript
js添加事件的通用方法推荐
May 15 #Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 #Javascript
JQuery validate插件Remote用法大全
May 15 #Javascript
You might like
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
php实现可运算的验证码
2015/11/10 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
图片按比例缩放函数
2006/06/26 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
浅析使用Python操作文件
2017/07/31 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
python面试题小结附答案实例代码
2019/04/11 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
浅谈react路由传参的几种方式
2021/03/23 Javascript
销售工作人员的自我评价分享
2013/11/10 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
法制工作总结2015
2015/07/23 职场文书