<!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. vuejs v-model

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. MFC 创建新项目

    本文主要介绍如何是使用vc++创建MFC项目,并简单介绍整个项目的基本框架.文件–>新建,会弹出以下新建文件(项目)类型的界面,如下 按上图的步骤u,创建一个MFC工程.其中步骤3中的CardD ...

  3. LeetCode（6）ZigZag Conversion

    题目如下: C++代码: #include <iostream> #include <string> using namespace std; class Solution { ...

  4. 紫书 习题 10-9 UVa 294（正约数个数）

    一个数的正约数个数等于这个数的质因数分解后 每一项幂+1的积 因为每个质因数的幂可以为0, 1, 2--(注意可以为0) 所以就每个质因数配一个幂任意组合就可得一个正因数,根据乘法原理可得正约数个数. ...

  5. oracle基础入门（四）

    一:其实oracle的语法跟sql servce 挺像的只有一些个别的差异而已 1):安装Oracle的数据库一般它的表中会自带了两站表: 是 emp(员工表) , dept(部门) 单表查询 sel ...

  6. 03016_DBCP连接池

    1.连接池概述 (1)用池来管理Connection,这样可以重复使用Connection: (2)有了池,所以我们就不用自己来创建Connection,而是通过池来获取Connection对象: ( ...

  7. UMeditor百度富文本编辑器的使用

    批量上传的图片在线管理没法查看图片 是因为jar包本身的Bug,这里暂时做了个替换展示.就是找到Img.js  然后搜索 img.set 替换下就好了 var url=list[i].url ;    ...

  8. 【LeetCode-面试算法经典-Java实现】【063-Unique Paths II（唯一路径问题II）】

    [063-Unique Paths II(唯一路径问题II)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Follow up for "Unique Pa ...

  9. 九度OJ 1070 今年的第几天？（模拟）

    题目1070:今年的第几天? 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3491 解决:1936 题目描写叙述: 输入年.月.日,计算该天是本年的第几天. 输入: 包含三个整数年(1& ...

  10. Sqlite 命令行导出、导入数据（直接支持CSV）

    打开命令行 导出数据到data.csv D:\project>sqlite3.exe old.db SQLite version 3.21.0 2017-10-24 18:55:49 Enter ...