在第二层each,传入的对象以height举例是这样的,
{padding:innerHeight,content:height,"":outerHeight}
对它遍历调用function(defaultExtra,funcName),也就是说传入的defaultExtra是键 padding/content/"",而funcName是对应的innerHeight,height,outerHeight。 jQuery.fn[funcName]内部有四个分支:
1、$(window).height()
这时直接返回window.document.documentElement.clientHeight 2、$(document).height()
                    return Math.max(
elem.body[ "scroll" + name ], doc[ "scroll" + name ],
elem.body[ "offset" + name ], doc[ "offset" + name ],
doc[ "client" + name ]
);

显而易见,它返回的是这5个值中的最大值。

3、如果取值,调用jQuery.css()

4、如果是赋值,调用jQuery.style()

最后这两个分支内部比较复杂,jQuery.css,cssHooks,cssProps是重点= =,等以后详细看的时候再写吧。

jQuery.each( { Height: "height", Width: "width" }, function( name, type ) {
jQuery.each( { padding: "inner" + name, content: type, "": "outer" + name }, function( defaultExtra, funcName ) {
// Margin is only for outerHeight, outerWidth
jQuery.fn[ funcName ] = function( margin, value ) {
var chainable = arguments.length && ( defaultExtra || typeof margin !== "boolean" ),
extra = defaultExtra || ( margin === true || value === true ? "margin" : "border" );
return access( this, function( elem, type, value ) {
var doc; if ( jQuery.isWindow( elem ) ) {
// As of 5/8/2012 this will yield incorrect results for Mobile Safari, but there
// isn't a whole lot we can do. See pull request at this URL for discussion:
// https://github.com/jquery/jquery/pull/764
return elem.document.documentElement[ "client" + name ];
} // Get document width or height
if ( elem.nodeType === 9 ) {
doc = elem.documentElement; // Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height],
// whichever is greatest
return Math.max(
elem.body[ "scroll" + name ], doc[ "scroll" + name ],
elem.body[ "offset" + name ], doc[ "offset" + name ],
doc[ "client" + name ]
);
}
return value === undefined ?
// Get width or height on the element, requesting but not forcing parseFloat
jQuery.css( elem, type, extra ) : // Set width or height on the element
jQuery.style( elem, type, value, extra );
}, type, chainable ? margin : undefined, chainable, null );
};
});
});

jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读的更多相关文章

  1. jQuery中【width(),innerWidth(),outerWidth()】

    这个问题,已经别扭我多年了,今天终于彻底解决了,拿出来庆贺一下.jquery作为开源项目,无论从思路上,还是从严谨性上,让人崇敬. 随着时间的流逝,jquery的一些功能被逐渐挖掘出来.通过jQuer ...

  2. jQuery.Callbacks 源码解读二

    一.参数标记 /* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中,确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false,则 ...

  3. 第二十五课:jQuery.event.trigger的源码解读

    本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...

  4. 第二十四课:jQuery.event.remove,dispatch的源码解读

    本课还是来讲解一下jQuery是如何实现它的事件系统的.这一课我们先来讲一下jQuery.event.remove的源码解读. remove方法的目的是,根据用户传参,找到事件队列,从里面把匹配的ha ...

  5. 第二十三课:jQuery.event.add的原理以及源码解读

    本课主要来讲解一下jQuery是如何实现它的事件系统的. 我们先来看一个问题: 如果有一个表格有100个tr元素,每个都要绑定mouseover/mouseout事件,改成事件代理的方式,可以节省99 ...

  6. SDWebImage源码解读之SDWebImageDownloaderOperation

    第七篇 前言 本篇文章主要讲解下载操作的相关知识,SDWebImageDownloaderOperation的主要任务是把一张图片从服务器下载到内存中.下载数据并不难,如何对下载这一系列的任务进行设计 ...

  7. SDWebImage源码解读 之 UIImage+GIF

    第二篇 前言 本篇是和GIF相关的一个UIImage的分类.主要提供了三个方法: + (UIImage *)sd_animatedGIFNamed:(NSString *)name ----- 根据名 ...

  8. SDWebImage源码解读_之SDWebImageDecoder

    第四篇 前言 首先,我们要弄明白一个问题? 为什么要对UIImage进行解码呢?难道不能直接使用吗? 其实不解码也是可以使用的,假如说我们通过imageNamed:来加载image,系统默认会在主线程 ...

  9. SDWebImage源码解读之SDWebImageCache(下)

    第六篇 前言 我们在SDWebImageCache(上)中了解了这个缓存类大概的功能是什么?那么接下来就要看看这些功能是如何实现的? 再次强调,不管是图片的缓存还是其他各种不同形式的缓存,在原理上都极 ...

随机推荐

  1. Linux常用命令之scp

    目录 1.拷贝远程文件到本地 2.拷贝远程文件夹到本地 3.拷贝本地文件到远程 4.拷贝本地文件夹到远程 1.拷贝远程文件到本地 scp root@101.132.169.194:/home/wwwr ...

  2. html5--3.9 input元素(8)

    html5--3.9 input元素(8) 学习要点 input元素及其属性 input元素 用来设置表单中的内容项,比如输入内容的文本框,按钮等 不仅可以布置在表单中,也可以在表单之外的元素使用 i ...

  3. Django中使用静态资源/文件

    Django中常需要引用js,css,小图像文件,一般我们把这一类文件称为静态文件,放置在static文件夹中,接下来,对Django中配置静态文件进行下傻瓜式的步骤介绍 在工程目录下新建static ...

  4. CodeForces - 597C:Subsequences (主席树+DP)

    For the given sequence with n different elements find the number of increasing subsequences with k + ...

  5. 激活层和pooling的作用

    激活层: 激活函数其中一个重要的作用是加入非线性因素的,将特征映射到高维的非线性区间进行解释,解决线性模型所不能解决的问题 pooling层: 1. invariance(不变性),这种不变性包括tr ...

  6. Objective-C 中nil/Nil/NULL/NSNull

    转自:http://nshipster.cn/nil/ 理解"不存在"的概念不仅仅是一个哲学的问题,也是一个实际的问题.我们是有形宇宙的居民,而原因在于逻辑宇宙的存在不确定性.作为 ...

  7. TCP连接状态变化

    TCP连接状态变化 参考文章:TCP连接的状态详解以及故障排查 TCP建立连接--三次握手 CLOSED:起始状态,无任何连接. LISTEN:服务端建立socket之后需要listen进入LISTE ...

  8. docker学习 (三) Windows 10 安装Docker

    Docker CE: 社区版,免费. Docker EE: 企业版,收费. 安装:             Windows 10 Pro 64, 必须开启Hyper-v 下载:Docker for W ...

  9. 1.8-1.10 大数据仓库的数据收集架构及监控日志目录日志数据,实时抽取之hdfs系统上

    一.数据仓库架构 二.flume收集数据存储到hdfs 文档:http://flume.apache.org/releases/content/1.9.0/FlumeUserGuide.html#hd ...

  10. 【Hadoop】MapReduce笔记(三):MapReduce的Shuffle和Sort阶段详解

    一.MapReduce 总体架构 整体的Shuffle过程包含以下几个部分:Map端Shuffle.Sort阶段.Reduce端Shuffle.即是说:Shuffle 过程横跨 map 和 reduc ...