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源码的分析和学习,以下是我总 ...

随机推荐

HDU 4324 Triangle LOVE【拓扑排序】
题意:给出n个人,如果a喜欢b,那么b一定不喜欢a,如果b不喜欢a,那么a一定喜欢b 就是这n个点里面的任意两点都存在一条单向的边, 所以如果这n个点不能构成拓扑序列的话,就一定成环了,成环的话就一定 ...
SSD-tensorflow-2 evaluation
测试就是用voc2007的test set来测试已经训练好的checkpoint的mAP,github上提供了三个已经训练好的model的checkpoint checkpoint 里面已有的300_ ...
MNIST手写数字数据集
下载python源代码之后,使用: import input_data mnist = input_data.read_data_sets('MNIST_data/',one_hot=True) 下载 ...
CF 986A Fair（多源BFS）
题目描述一些公司将在Byteland举办商品交易会(or博览会?).在Byteland有 nnn 个城市,城市间有 mmm 条双向道路.当然,城镇之间两两连通. Byteland生产的货物有 kkk ...
[NOIP2015提高组]子串
题目:洛谷P2679.Vijos P1982.codevs4560.UOJ#149. 题目大意:有长度为n的A串和长度为m的B串.现在要从A串中取出k个互不重叠的子串,使它们按顺序相连后得到B串.问有 ...
HAOI树上染色
Description : 有一棵点数为 N 的树,树边有边权.给你一个在 0~ N 之内的正整数 K ,你要在这棵树中选择 K个点,将其染成黑色,并将其他的N-K个点染成白色 . 将所有点染色后, ...
如何使用Java创建Excel(.xls 和 .xlsx)文件并写入数据
1,需要依赖的jar包,  <!-- the version of the following POI packag ...
CRC校验原理及步骤
什么是CRC校验? CRC即循环冗余校验码:是数据通信领域中最常用的一种查错校验码,其特征是信息字段和校验字段的长度可以任意选定.循环冗余检查(CRC)是一种数据传输检错功能,对数据进行多项式计算,并 ...
【Henu ACM Round#19 B】 Luxurious Houses
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 从右往左维护最大值. 看到比最大值小(或等于)的话.就递增到比最大值大1就好. [代码] #include <bits/std ...
ti-sdk-evm-am335x-05.07 uboot分析(MLO跳转到u-boot之前)
-------------------------------------------------------------------------------- ...

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

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

随机推荐

热门专题