深入理解$.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 相关文章推荐
js不是基础的基础
Dec 24 Javascript
js继承 Base类的源码解析
Dec 30 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
微信小程序登录换取token的教程
May 31 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
理解JavaScript中的对象
Aug 25 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
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
php桌面中心(二) 数据库写入
2007/03/11 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
php格式文件打开的四种方法
2018/02/24 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
jQuery事件对象总结
2016/10/17 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
Python中super关键字用法实例分析
2015/05/28 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
PyTorch的torch.cat用法
2020/06/28 Python
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
Java程序员面试题
2016/09/27 面试题
怎样写好自我鉴定
2013/12/04 职场文书
打架检讨书50字
2014/01/11 职场文书
给面试官的感谢信
2014/02/01 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
年终工作总结范文2014
2014/11/27 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
Python内置数据结构列表与元组示例详解
2021/08/04 Python
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android