在第二层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. awk 根据外部变量匹配某一域值

    shell>> i='a' awk '$1 ~ /'$i'/ {print $0}' test.txt awk中,变量 增加单引号即可

  2. 【MongoDB学习-在.NET中的简单操作类】

    1.新建MVC项目, 管理NuGet包,进入下载MongDB.net库文件 2.新增项目DAL数据访问层,引用以下库文件: 3.C# 访问MongoDB通用方法类: using MongoDB.Dri ...

  3. hdu-5749 Colmerauer(单调栈)

    题目链接: Colmerauer Time Limit: 10000/5000 MS (Java/Others)     Memory Limit: 131072/131072 K (Java/Oth ...

  4. 【转载】rageagainstthecage.c源码以及注释

    如下: //头文件包含 #include <stdio.h> #include <sys/types.h> #include <sys/time.h> #inclu ...

  5. js格式

    /** * Created by admin on 2017/9/22. */ // 分号后不要再有多余的空格 var name = "North"; var name = &qu ...

  6. bzoj2117

    动态电分治+二分 肯定要枚举所有点对,那么我们建出点分树降低树高,然后每个点存下点分树中所有子树到这个点的距离,然后二分+lower_bound就行了. #include<bits/stdc++ ...

  7. bzoj3489

    kdtree 3维kdtree,就是三个维度轮换着切,我们把每个元素看成一个点,坐标是上次出现的位置,下次出现的位置,自己的位置,第一个<l,第二个>r,第三个[l,r],然后kdtree ...

  8. PHPstorm相同变量标识

    setting-> plugins-> Browse Repositories 输入BrowseWordAtCaret 搜索,安装,然后重启

  9. Foreign Postcards

    题意: 给定 n 张排成一堆的的卡片,每一次从堆顶上等概率随机取出 [1~当前卡片数] 个卡片,如果堆顶的卡片是反面朝上, 则将所有取出的卡片翻转,求问期望取出多少个反面朝上的卡片. 解法: 考虑dp ...

  10. python使用xlrd操作Excel文件

    一.xlrd读取Excel文件 用xlrd进行读取比较方便,流程和平常手动操作Excel一样,打开工作簿(Workbook),选择工作表(sheets),然后操作单元格(cell). 例子:要打开当前 ...