<!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 : 功能检测的更多相关文章

  1. jQuery源码笔记(一)：jQuery的整体结构

    jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...

  2. jQuery源码解析资源便签

    最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...

  3. jQuery源码逐行分析学习01(jQuery的框架结构简化)

    最近在学习jQuery源码,在此,特别做一个分享,把所涉及的内容都记录下来,其中有不妥之处还望大家指出,我会及时改正.望各位大神不吝赐教!同时,这也是我的第一篇前端技术博客,对博客编写还不是很熟悉,美 ...

  4. jQuery源码逐行分析学习02(第一部分：jQuery的一些变量和函数)

    第一次尝试使用Office Word,方便程度大大超过网页在线编辑,不过初次使用,一些内容不甚熟悉,望各位大神见谅~ 在上次的文章中,把整个jQuery的结构进行了梳理,得到了整个jQuery的简化结 ...

  5. jquery源码分析(二)——架构设计

    要学习一个库首先的理清它整体架构: 1.jQuery源码大致架构如下:(基于 jQuery 1.11 版本,共计8829行源码)(21,94)                定义了一些变量和函数jQu ...

  6. jquery源码学习（一）——jquery结构概述以及如何合适的暴露全局变量

    jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦 我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jq ...

  7. jQuery源码分析笔记

    jquery-2.0.3.js版本源码分析 (function(){  (21,94) 定义了一些变量和函数 jQuery = function(){};  (96,283) 给JQ对象,添加一些方法 ...

  8. jquery源码 整体架构

    一.对外提供接口 对外提供了jQuery. //可以通过jQuery或者$来找到jQuery (function(window,undefined){ //(21,94) 定义了一些变量和函数 jQu ...

  9. jQuery源码分析之整体框架

    之前只是知道jQuery怎么使用,但是我觉得有必要认真的阅读一下这个库,在分析jQuery源码之前,很有必要对整个jQuery有个整体的框架概念,才能方便后面对jQuery源码的分析和学习,以下是我总 ...

随机推荐

  1. Vue Syntax Highlight

    Vue Syntax Highlight https://github.com/vuejs/vue-syntax-highlight

  2. AvtiveMQ 参考

    推荐学习:https://www.cnblogs.com/zhuxiaojie/p/5564187.html#autoid-2-1-0

  3. python中修改函数内部的变量会发生什么

    最近写python遇到个函数内部变量使用外部变量的问题,现在总结下吧 #!/usr/bin/env python a = 100def su(): a = a + 1 print(a) s = su( ...

  4. 在Ubuntu上创建一个可以启动的U盘

    1.概观 使用可启动的Ubuntu USB盘,您可以: 安装或升级Ubuntu 在不触及PC配置的情况下测试Ubuntu桌面体验 在借来的机器或网吧上启动到Ubuntu 使用USB盘上默认安装的工具来 ...

  5. 洛谷3933 Chtholly Nota Seniorious 二分答案+贪心

    题目链接 题意 给你一个N*M的矩阵 (N,M <=2000)  把他分成两部分 使两部分的极差较大的一个最小  求这个最小值.然后分矩阵的要求是:每个部分内部的方块之间,可以通过上下左右相互到 ...

  6. python 异步IO

    参考链接:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143208573 ...

  7. P2420 让我们异或吧(树链剖分)

    题目描述 异或是一种神奇的运算,大部分人把它总结成不进位加法. 在生活中-xor运算也很常见.比如,对于一个问题的回答,是为1,否为0.那么: (A是否是男生 )xor( B是否是男生)＝A和B是否能 ...

  8. 【Henu ACM Round#19 A】 Vasya the Hipster

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟题. 两个一起用->min(a,b); 剩下的除2加上去就好 [代码] #include <bits/stdc++. ...

  9. Use Uncertainty As a Driver

     Use Uncertainty As a Driver Kevlin Henney ConFRonTEd WiTH TWo opTionS, most people think that the ...

  10. POJ 3070 Fibonacci 矩阵高速求法

    就是Fibonacci的矩阵算法.只是添加一点就是由于数字非常大,所以须要取10000模,计算矩阵的时候取模就能够了. 本题数据不强,只是数值本来就限制整数,故此能够0ms秒了. 以下程序十分清晰了, ...