热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQueryeach函数源码分析

jqueryeach函数的使用频率非常高,下面给大家介绍jQueryeach函数源码分析,一起看看吧

jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解:

代码

/*! 
* jQuery源码分析-each函数 
* jQuery版本:1.4.2 
* 
* ---------------------------------------------------------- 
* 函数介绍 
* 
* each函数通过jQuery.extend函数附加到jQuery对象中: 
* jQuery.extend({ 
* each: function() {} 
* }); 
* 如果对jQuery.extend函数源码还不了解,可以参考《jQuery源码分析-extend函数》一文 
* 
* jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理 
* jQuery.each方法可以为处理函数增加附带的参数(带参数与不带参数的回调使用方法不完全一致) 
* 
* ---------------------------------------------------------- 
* 使用说明 
* each函数根据参数的类型实现的效果不完全一致: 
* 1、遍历对象(有附加参数) 
* $.each(Object, function(p1, p2) { 
* this; //这里的this指向每次遍历中Object的当前属性值 
* p1; p2; //访问附加参数 
* }, ['参数1', '参数2']); 
* 
* 2、遍历数组(有附件参数) 
* $.each(Array, function(p1, p2){ 
* this; //这里的this指向每次遍历中Array的当前元素 
* p1; p2; //访问附加参数 
* }, ['参数1', '参数2']); 
* 
* 3、遍历对象(没有附加参数) 
* $.each(Object, function(name, value) { 
* this; //this指向当前属性的值 
* name; //name表示Object当前属性的名称 
* value; //value表示Object当前属性的值 
* }); 
* 
* 4、遍历数组(没有附加参数) 
* $.each(Array, function(i, value) { 
* this; //this指向当前元素 
* i; //i表示Array当前下标 
* value; //value表示Array当前元素 
* }); 
* ---------------------------------------------------------- 
* 
*/ 
//jQuery.each(), $.each() 
//@param {Object}|{Array} object 需要遍历处理的对象或数组 
//@param {Function} callback 遍历处理回调函数 
//@param {Array} args callback回调函数的附加参数 
each: function(object, callback, args){ 
//当需要遍历的是一个对象时,name变量用于记录对象的属性名 
var name, 
//当需要遍历的是一个数组时,i变量用于记录循环的数组下标 
i = 0, 
//遍历数组长度,当需要遍历的对象是一个数组时存储数组长度 
//如果需要遍历的是一个对象,则length === undefined 
length = object.length, 
//检查第1个参数object是否是一个对象 
//根据object.length排除数组类型,根据isFunction排除函数类型(因为函数也是对象) 
isObj = length === undefined || jQuery.isFunction(object); 
//回调函数具有附加参数时,执行第一个分支 
//if(!!args) { 
if (args) { 
//需要遍历的是一个对象 
if (isObj) { 
//遍历对象属性,name是对象的属性名,再函数顶部已声明 
//许多人不太习惯for(var name in object)方式,如果不进行声明,则name就会被定义为全局变量 
for (name in object) { 
//调用callback回调函数,且回调函数的作用域表示为当前属性的值 
//如:callback() { this; //函数中的this指向当前属性值 
//将each的第3个参数args作为回调函数的附加参数 
if (callback.apply(object[name], args) === false) { 
//如果在callback回调函数中使用return false;则不执行下一次循环 
break; 
} 
} 
} 
//需要遍历的是一个数组 
else { 
//循环长度,循环变量i在函数顶部已定义 
//循环变量的自增在循环内部执行 
for (; i 


推荐阅读
  • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • 随着前端技术的发展,越来越多的开发者开始使用react、vue等web框架,但很少有人深入理解这些框架的源码。然而,这些框架底层都是由原生的javascript构建而成。对于初学前端的人来说,可能会认为javascript很容易上手,但实际上只是因为它被高度封装了。与能够使用封装类的人相比,能够理解框架原理的人则处于另一个层面。本文将深入剖析jquery源码,探寻框架底层的原理,帮助读者更好地理解web框架的运行机制。 ... [详细]
  • 本文讨论了如何使用jQuery的load方法来获取被load页面中所有a标签的集合,类似于$("a")的用法。 ... [详细]
  • 本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ... [详细]
  • jQuery实现简单的动画效果及用法详解
    本文详细介绍了使用jQuery实现简单动画效果的方法,包括显示/隐藏、向上收缩/向下展开、淡入/淡出、自定义动画等。同时提供了具体的用法示例,并解释了参数的含义和使用技巧。通过本文的学习,读者可以掌握如何使用jQuery实现各种动画效果,为网页增添生动和互动性。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • jQuery如何判断一个元素是否被点击?
    本文介绍了使用jQuery判断一个元素是否被点击的方法,并通过示例进行了具体说明。注意要指定父级,否则会执行多次。 ... [详细]
  • wpf+mvvm代码组织结构及实现方式
    本文介绍了wpf+mvvm代码组织结构的由来和实现方式。作者回顾了自己大学时期接触wpf开发和mvvm模式的经历,认为mvvm模式使得开发更加专注于业务且高效。与此同时,作者指出mvvm模式相较于mvc模式的优势。文章还提到了当没有mvvm时处理数据和UI交互的例子,以及前后端分离和组件化的概念。作者希望能够只关注原始数据结构,将数据交给UI自行改变,从而解放劳动力,避免加班。 ... [详细]
  • 本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]
  • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
  • Jquery 跨域问题
    为什么80%的码农都做不了架构师?JQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念。当然 ... [详细]
  • 本文介绍了使用jQuery实现图片预加载和等比例缩放的方法,同时提供了演示和相关代码。该方法可以重置图片的宽度和高度,并使图片在水平和垂直方向上居中显示。 ... [详细]
author-avatar
什锦平
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有