jquery源码03 (3184 , 3295) support : 功能检测

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="jquery-2.0.3.js"></script>

<script>

$(function(){

    for(var attr in $.support){

        $('body').append( '<div>'+attr+':'+$.support[attr]+'</div>' );

    }

    /* 根据这些属性，判断浏览器类型

    checkOn:true

    optSelected:true

    reliableMarginRight:true

    boxSizingReliable:true

    pixelPosition:false

    noCloneChecked:true

    optDisabled:true

    radioValue:true

    checkClone:true

    focusinBubbles:false

    clearCloneStyle:true

    cors:true

    ajax:true

    */

    var oDiv = document.getElementById('div1');

    oDiv.onfocusin = function(){//鼠标移入事件

        alert(123);

    };

    var div = document.createElement('div');

    div.style.backgroundColor = 'red';

    div.cloneNode(true).style.backgroundColor = '';

    alert( div.style.backgroundColor );

    var div = $('<div>');

    div.css('backgroundColor','red');

    div.clone().css('backgroundColor','');

    alert( div.css('backgroundColor') );

});

</script>

</head>

<body>

<div id="div1">

<input type="text">

</div>

</body>

</html>

//兼容性，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") );

    // input.type默认是text,基本都有，

    if ( !input.type ) {

        return support;

    }

    //改成复选框

    input.type = "checkbox";

    //新版本value的值是'on',老版本value的值是'',所以新本版support.checkOn=true,老版本support.checkOn=false,就可以通过support.checkOn属性值进行浏览器类型判断。

    support.checkOn = input.value !== "";

    // 狐火chrome下拉子项默认是选中的，ie默认不选中。

    support.optSelected = opt.selected;

    // 定义初始值

    support.reliableMarginRight = true;

    support.boxSizingReliable = true;

    support.pixelPosition = false;

    // Make sure checked status is properly cloned

    // Support: IE9, IE10

    //先让input选中，然后克隆，再判断选中状态，火狐chromeIE10以上都是选中的，ie低版本不是选中。

    input.checked = true;

    support.noCloneChecked = input.cloneNode( true ).checked;

    // Make sure that the options inside disabled selects aren't marked as disabled

    // (WebKit marks them as disabled)

    //下拉菜单禁止，子项有没有禁止。

    select.disabled = true;

    support.optDisabled = !opt.disabled;

    // Check if an input maintains its value after becoming a radio

    // Support: IE9, IE10

    input = document.createElement("input");

    input.value = "t";

    input.type = "radio";

    support.radioValue = input.value === "t";

    // #11217 - WebKit loses check when the name is after the checked attribute

    input.setAttribute( "checked", "t" );

    input.setAttribute( "name", "t" );

    fragment.appendChild( input );

    // Support: Safari 5.1, Android 4.x, Android 2.3

    // old WebKit doesn't clone checked state correctly in fragments

    support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;

    // Support: Firefox, Chrome, Safari

    // Beware of CSP restrictions (https://developer.mozilla.org/en/Security/CSP)

    support.focusinBubbles = "onfocusin" in window;

    //首先定义一个div的背景剪切是内容剪切，然后复制一份设置背景剪切为空，然后看原来div的背景剪切还是不是内容剪切。

    div.style.backgroundClip = "content-box";

    div.cloneNode( true ).style.backgroundClip = "";

    support.clearCloneStyle = div.style.backgroundClip === "content-box";

    //下面的需要等dom加载完才能检测

    jQuery(function() {

        var container, marginDiv,

            // Support: Firefox, Android 2.3 (Prefixed box-sizing versions).

            //

            divReset = "padding:0;margin:0;border:0;display:block;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box",

            body = document.getElementsByTagName("body")[ 0 ];

        if ( !body ) {

            // Return for frameset docs that don't have a body

            return;

        }

        //创建一个container来检测

        container = document.createElement("div");

        container.style.cssText = "border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px";

        // Check box-sizing and margin behavior.

        body.appendChild( container ).appendChild( div );

        div.innerHTML = "";

        // Support: Firefox, Android 2.3 (Prefixed box-sizing versions).

        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%";

        // Workaround failing boxSizing test due to offsetWidth returning wrong value

        // with some non-1 values of body zoom, ticket #13543

        jQuery.swap( body, body.style.zoom != null ? { zoom: 1 } : {}, function() {

            support.boxSizing = div.offsetWidth === 4;

        });

        // Use window.getComputedStyle because jsdom on node.js will break without it.

        if ( window.getComputedStyle ) {

            support.pixelPosition = ( window.getComputedStyle( div, null ) || {} ).top !== "1%";

            support.boxSizingReliable = ( window.getComputedStyle( div, null ) || { width: "4px" } ).width === "4px";

            // Support: Android 2.3

            // Check if div with explicit width and no margin-right incorrectly

            // gets computed margin-right based on width of container. (#3333)

            // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right

            marginDiv = div.appendChild( document.createElement("div") );

            marginDiv.style.cssText = div.style.cssText = divReset;

            marginDiv.style.marginRight = marginDiv.style.width = "0";

            div.style.width = "1px";

            support.reliableMarginRight =

                !parseFloat( ( window.getComputedStyle( marginDiv, null ) || {} ).marginRight );

        }

        body.removeChild( container );

    });

    return support;//返回json

})( {} );//实参json

jquery源码03 (3184 , 3295) support : 功能检测的更多相关文章

jQuery源码笔记(一)：jQuery的整体结构
jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...
jQuery源码解析资源便签
最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...
jQuery源码逐行分析学习01(jQuery的框架结构简化)
最近在学习jQuery源码,在此,特别做一个分享,把所涉及的内容都记录下来,其中有不妥之处还望大家指出,我会及时改正.望各位大神不吝赐教!同时,这也是我的第一篇前端技术博客,对博客编写还不是很熟悉,美 ...
jQuery源码逐行分析学习02(第一部分：jQuery的一些变量和函数)
第一次尝试使用Office Word,方便程度大大超过网页在线编辑,不过初次使用,一些内容不甚熟悉,望各位大神见谅~ 在上次的文章中,把整个jQuery的结构进行了梳理,得到了整个jQuery的简化结 ...
jquery源码分析(二)——架构设计
要学习一个库首先的理清它整体架构: 1.jQuery源码大致架构如下:(基于 jQuery 1.11 版本,共计8829行源码)(21,94) 定义了一些变量和函数jQu ...
jquery源码学习（一）——jquery结构概述以及如何合适的暴露全局变量
jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jq ...
jQuery源码分析笔记
jquery-2.0.3.js版本源码分析 (function(){ (21,94) 定义了一些变量和函数 jQuery = function(){}; (96,283) 给JQ对象,添加一些方法 ...
jquery源码整体架构
一.对外提供接口对外提供了jQuery. //可以通过jQuery或者$来找到jQuery (function(window,undefined){ //(21,94) 定义了一些变量和函数 jQu ...
jQuery源码分析之整体框架
之前只是知道jQuery怎么使用,但是我觉得有必要认真的阅读一下这个库,在分析jQuery源码之前,很有必要对整个jQuery有个整体的框架概念,才能方便后面对jQuery源码的分析和学习,以下是我总 ...

随机推荐

Nginx下部署TP5项目
标签(空格分隔): linux nginx配置文件: server { listen 81; #listen [::]:80; server_name _; index index.html inde ...
5.不用拷贝的对象可以用ref
#include <iostream> #include <string> #include <boost/bind.hpp> #include <boost ...
package & import
/* * package:声明源文件所在的包,写在程序的第一行. * 每“.”一次,表示一层文件目录. * 包名都要小写. * * import: * 1)显式导入指定包下的类或接口 * 2)写在包的 ...
解析UML用例图中include与extend的区别
UML用例图有很多值得学习的地方,这里向大家简单介绍一下UML用例图中include与extend的区别,希望本文的介绍对你有所帮助. 本文和大家重点讨论一下UML用例图中include与extend ...
Android-加载大图避免OOM
高效加载大图片我们在编写Android程序的时候经常要用到许多图片,不同图片总是会有不同的形状.不同的大小,但在大多数情况下,这些图片都会大于我们程序所需要的大小.比如说系统图片库里展示的图片大都是 ...
php八大设计模式之策略模式
策略模式提供一个虚拟的整体,根据不同的要求(参数)提供不同的"零件"(调用不同的"零件"实现不同的结果). <?php /** * 策略模式 * 跟工厂模 ...
Spring学习总结（13）——Spring+Log4j+ActiveMQ实现远程记录日志
应用场景随着项目的逐渐扩大,日志的增加也变得更快.Log4j是常用的日志记录工具,在有些时候,我们可能需要将Log4j的日志发送到专门用于记录日志的远程服务器,特别是对于稍微大一点的应用.这么做的优 ...
洛谷 P1952 火星上的加法运算_NOI导刊2009提高（3）
P1952 火星上的加法运算_NOI导刊2009提高(3) 题目描述最近欢欢看到一本有关火星的书籍,其中她被一个加法运算所困惑,由于她的运算水平有限.她想向你求助,作为一位优秀的程序员,你当然不会拒 ...
glEnable(GL_DEPTH_TEST)作用
glEnable(GL_DEPTH_TEST): 用来开启更新深度缓冲区的功能,也就是,如果通过比较后深度值发生变化了,会进行更新深度缓冲区的操作.启动它,OpenGL就可以跟踪再Z轴上的像素,这样, ...
【DevExpress】GridControl添加按钮列并添加按钮事件
在GridControl中添加按钮列的步骤如下: 1. 把列的ColumnEdit属性设置为RepositoryItemButtonEdit 2. 把TextEditStyle属性设置为HideTex ...

jquery源码03 (3184 , 3295) support : 功能检测

jquery源码03 (3184 , 3295) support : 功能检测的更多相关文章

随机推荐

热门专题