jquery源码解析:jQuery静态属性对象support详解
jQuery.support是用功能检测的方法来检测浏览器是否支持某些功能。针对jQuery内部使用。
我们先来看一些源码:
jQuery.support = (function( support ) {
......
return support;
})( {} );
jQuery.support其实就是一个json对象。在火狐浏览器下,打印出support对象:
接下来,我们来看它的源码
jQuery.support = (function( support ) {
var input = document.createElement("input"),
fragment = document.createDocumentFragment(),
div = document.createElement("div"),
select = document.createElement("select"),
opt = select.appendChild( document.createElement("option") );
if ( !input.type ) { //如果创建的input元素没有type类型,就直接返回。现在的浏览器都支持type类型,所以不会进入if语句
return support;
}
input.type = "checkbox"; //改变这个input的type类型
support.checkOn = input.value !== ""; //复选框的value值默认是什么,老版本的webkit下,默认值是"",所以它的support.checkOn = false。其他浏览器默认值是on,所以support.checkOn = true。针对这种差异化,jQuery通过hooks来解决,使所有的浏览器返回的值是一样的,解决兼容性问题。
support.optSelected = opt.selected;//创建了一个下拉菜单select,并且在select下创建了一个子项option。在火狐和谷歌浏览器,safari下,第一个子项会被默认选上。但是在所有IE下,不会被默认选中。
support.reliableMarginRight = true; //这三个检测要等DOM加载完才会进行判断,这里只是先定义一下。
support.boxSizingReliable = true;
support.pixelPosition = false;
input.checked = true; //让复选框选中
support.noCloneChecked = input.cloneNode( true ).checked; //克隆出来的新的复选框是否也被选中。火狐下,safari下,chrome下,克隆出来的都是选中的,IE9-10下,克隆出来的并没有被选中。jQuery会用hooks解决这个兼容性问题,让IE9-10下,克隆出来的复选框选中
select.disabled = true; //禁止下拉菜单
support.optDisabled = !opt.disabled; //select下的option应该不受影响,老版本webkit的opt.disabled也会变成true,就是受select影响
input = document.createElement("input"); //创建一个新的input
input.value = "t"; //设置input的value值为"t"。
input.type = "radio"; //再设置input的type类型
support.radioValue = input.value === "t"; //判断input的value值是否等于"t",IE下会等于on,因此IE下返回false
input.setAttribute( "checked", "t" ); //设置input的checked属性值为"t"
input.setAttribute( "name", "t" ); //设置input的name属性值为"t"
fragment.appendChild( input ); //把这个input添加到文档碎片对象中
support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;//在老版本的webkit下,克隆文档碎片,不能返回checked的值,因此等于false。
support.focusinBubbles = "onfocusin" in window; //只有IE下支持这个事件。focus事件不会冒泡,而focusin支持
div.style.backgroundClip = "content-box";//背景剪切
div.cloneNode( true ).style.backgroundClip = "";//克隆出来的div应该不影响原div
support.clearCloneStyle = div.style.backgroundClip === "content-box";//IE下会被影响,变成"",等于false
jQuery(function() { //有些方法需要等到DOM加载完才能通过功能检测判断,意思就是等这些新创建的元素真正的添加到页面中才能进行检测
var container, marginDiv,
divReset = "padding:0;margin:0;border:0;display:block;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box", //content-box是标准模式,border-box是怪异模式。
body = document.getElementsByTagName("body")[ 0 ];
if ( !body ) { //如果body不存在,直接return。
return;
}
container = document.createElement("div");
container.style.cssText = "border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px";
body.appendChild( container ).appendChild( div );
div.innerHTML = "";
div.style.cssText = "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%";
jQuery.swap( body, body.style.zoom != null ? { zoom: 1 } : {}, function() {//zoom是放大页面的属性,等于1的时候,不放大也不缩小
support.boxSizing = div.offsetWidth === 4;//怪异模式下,等于4,支持boxSizing,所有浏览器都支持
});
if ( window.getComputedStyle ) {
support.pixelPosition = ( window.getComputedStyle( div, null ) || {} ).top !== "1%";//safari下返回1%,因此等于false。而其他浏览器会转换成像素值。
support.boxSizingReliable = ( window.getComputedStyle( div, null ) || { width: "4px" } ).width === "4px";//IE下,如果是怪异模式,width不等于4px,需要减去padding,border
marginDiv = div.appendChild( document.createElement("div") );
marginDiv.style.cssText = div.style.cssText = divReset;
marginDiv.style.marginRight = marginDiv.style.width = "0";
div.style.width = "1px";//老版本的webkit下,会让marginDiv的width变成1
support.reliableMarginRight =!parseFloat( ( window.getComputedStyle( marginDiv, null ) || {} ).marginRight );//应该等于0,reliableMarginRight等于true。
}
body.removeChild( container );
});
return support;
})( {} );
在上面打印出来的support对象中还有两个属性没讲,一个是ajax,一个是cors。源码是:
jQuery.support.cors = !!xhrSupported && ( "withCredentials" in xhrSupported );//首先判断ajax对象是否存在,并且是否支持跨域。xhrSupported 就是new XMLHttpRequest()对象,IE9以及以下版本不支持
jQuery.support.ajax = xhrSupported = !!xhrSupported; //是否支持ajax请求。
加油!
jquery源码解析:jQuery静态属性对象support详解的更多相关文章
- jQuery 源码解析(三十) 动画模块 $.animate()详解
jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如 ...
- jQuery 源码分析(十九) DOM遍历模块详解
jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...
- jQuery 源码分析(十) 数据缓存模块 data详解
jQuery的数据缓存模块以一种安全的方式为DOM元素附加任意类型的数据,避免了在JavaScript对象和DOM元素之间出现循环引用,以及由此而导致的内存泄漏. 数据缓存模块为DOM元素和JavaS ...
- jQuery源码分析(九) 异步队列模块 Deferred 详解
deferred对象就是jQuery的回调函数解决方案,它解决了如何处理耗时操作的问题,比如一些Ajax操作,动画操作等.(P.s:紧跟上一节:https://www.cnblogs.com/grea ...
- jquery源码解析:代码结构分析
本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94) 定义了一些变量和函数, jQuery = function() ...
- jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
- JQuery源码解析(一)
写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.j ...
- Celery 源码解析三: Task 对象的实现
Task 的实现在 Celery 中你会发现有两处,一处位于 celery/app/task.py,这是第一个:第二个位于 celery/task/base.py 中,这是第二个.他们之间是有关系的, ...
- jquery源码解析:val方法和valHooks对象详解
这一课,我们将讲解val方法,以及对value属性的兼容性处理,jQuery中通过valHooks对象来处理. 首先,我们先来看下val方法的使用: $("#input1").va ...
随机推荐
- ubuntu tensorflow cpu Faster-RCNN配置参考
https://blog.csdn.net/qq_36652619/article/details/85006559 (参考) https://blog.csdn.net/zcy0xy/art ...
- Python之多进程和多线程
目标: 1.os.fork简单示例 2.使用os.fork多进程测试IP是否在线 3.使用os.fork多进程解决tcpserver多客户端连接问题 4.多线程测试IP地址是否在线 1.os.fork ...
- 磁盘io测试工具
1. ATTO Disk Benchmark 2.DiskSpd磁盘性能测试工具
- 关于sudo apt-get update错误 http://archive.canonical.com natty InRelease
sudo apt-get update 错误 http://archive.canonical.com natty InRelease 错误 http://mirror.rootguide.org n ...
- python3--多目录之间的协作的一些必备知识
# Auther: Aaron Fan # 动态获取执行文件的相对路径路径:print(__file__) #动态获取执行文件的绝对路径:import osfile_path = os.path.ab ...
- bootstrap实现去点列表、内联列表、水平定义列表
内联列表:通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示. 去点列表:通过给无序列表添加一个类名“.list-uns ...
- 斐波那契数列—java实现
最近在面试的时候被问到了斐波那契数列,而且有不同的实现方式,就在这里记录一下. 定义 斐波那契数列指的是这样一个数列 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...
- 从零开始学习前端JAVASCRIPT — 7、JavaScript基础EVENT
1:事件驱动 1)事件:所谓事件就是js侦测到的用户的操作或是页面的一些行为(怎么发生的) 2)事件源对象:引发事件的元素.(发生在谁的身上) 3)事件处理程序:对事件处理的程序或是函数 (发生了什么 ...
- 用Word 写csdn blog
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- 设置emacs启动窗口的两种方法
1. 设置位置和大小 ;;设置窗口位置为屏库左上角(0,0) (set-frame-position (selected-frame) 0 0) ;;设置宽和高 (set-frame-width (s ...