<!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. struts2入门（搭建环境、配置、示例）

    转自:https://blog.csdn.net/u012862311/article/details/53412716 1.下载Struts2的jar包 下载地址:http://archive.ap ...

  2. PostgreSQL Replication之第二章 理解PostgreSQL的事务日志（5）

    2.5 XLOG的内部结构 我们将使用事务贯穿本书,并让您在技术层面上更深地洞察事情是如果工作的,我们已经增加了这部分专门处理XLOG的内部工作机制.我们会尽量避免前往下降到C级,因为这将超出本书的范 ...

  3. asp.net导出execl和图片

    个人常用导出execl方法: #region "导出文档" /// <summary> /// Export("application/ms-excel&qu ...

  4. Host status showing red icon in chronograph, Chronograf主机列表页显示主机状态为红色标志

    刚开始全部装好的时候主机显示的状态是绿色的,过了些日子我再打开看的时候就变成红色的了,点击主机进去查看的时候没有了图表数据,大概是这样子的, 在influxdb数据库主机上执行命令curl " ...

  5. 从Chrome源码看audio/video流媒体实现二（转）

    第一篇主要介绍了Chrome加载音视频的缓冲控制机制和编解码基础,本篇将比较深入地介绍解码播放的过程.以Chromium 69版本做研究. 由于Chromium默认不能播放Mp4,所以需要需要改一下源 ...

  6. NodeJS学习笔记 (16)子进程-child_process(ok)

    原文: https://github.com/chyingp/nodejs-learning-guide/blob/master/README.md 自己的跟进学习: 父进程,子进程,线程之间的关系 ...

  7. wall---向系统当前所有打开的终端上输出信息

    wall命令用于向系统当前所有打开的终端上输出信息.通过wall命令可将信息发送给每位同意接收公众信息的终端机用户,若不给予其信息内容,则wall命令会从标准输入设备读取数据,然后再把所得到的数据传送 ...

  8. 虚构造函数与prototype

    注意,构造函数不能是虚的,不然不会生效?(构造函数里面调用虚的函数,也不会生效). 而虚构造函数,指的是通过一个虚函数,来调用clone方法,生成一个新的实例.而这个clone里面,一般调用的是拷贝构 ...

  9. [Python] Read and plot data from csv file

    Install: pip install pandas pip install matplotlib # check out the doc from site import pandas as pd ...

  10. vim插件之marks

    最近在看源码的过程中,发现一点很不方便的地方,就是当我在几个相关的类来回跳转的时候,之前定位的关键代码很容易找不到,结果进程需要重复查找关键点.虽然当时想到了可以通过marks来标志,但是,因为mar ...