jQuery瀏覽器功能測試support -- DOM測試（15個）源碼分析

其中爲1.1~1.15 15個DOM兼容性測試

jQuery.support = (function() {

    var support,
        all,
        a,
        select,
        opt,
        input,
        marginDiv,
        fragment,
        tds,
        events,
        eventName,
        i,
        isSupported,
        div = document.createElement( "div" ),
        documentElement = document.documentElement;

    // Preliminary tests
    div.setAttribute("className", "t");
    div.innerHTML = "   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>";

    all = div.getElementsByTagName( "*" );
    a = div.getElementsByTagName( "a" )[ 0 ];

    // Can't get basic test support
    if ( !all || !all.length || !a ) {
        return {};
    }

    // First batch of supports tests
    select = document.createElement( "select" );
    opt = select.appendChild( document.createElement("option") );
    input = div.getElementsByTagName( "input" )[ 0 ];

    support = {
        // IE strips leading whitespace when .innerHTML is used
        // 1.1. 檢測第一個子元素是不是文本節點
        leadingWhitespace: ( firstChild.div.nodeType === 3 ),

        // Make sure that tbody elements aren't automatically inserted
        // IE will insert them into empty tables
        // 1.2 按照HTML規範，子元素tbody是可選的，所以在大部分瀏覽器中，測試項tbody爲true, 而在IE6, IE7中，瀏覽器會自動爲空table元素插入空tbody元素。若是瀏覽器自動插入tbody元素，則個數爲1，測試項tbody爲false;若是不自動插入，則個數爲0，測試項tbody爲true
        tbody: !div.getElementsByTagName("tbody").length,

        // Make sure that link elements get serialized correctly by innerHTML
        // This requires a wrapper element in IE
        // 1.3 若是瀏覽器能正確的序列化link標籤，則個數爲1,測試項htmlSerialize爲true, 不然爲false
        htmlSerialize: !!div.getElementsByTagName("link").length,

        // Get the style information from getAttribute
        // (IE uses .cssText instead)
        style: /top/.test( a.getAttribute("style") ),

        // Make sure that URLs aren't manipulated
        // (IE normalizes it by default)
        // 1.4 若是經過原生方法getAttribute("href")的返回值與設置的相對路勁是否相等，來測試測試項hrefNormalized爲true
        hrefNormalized: ( a.getAttribute("href") === "/a" ),

        // Make sure that element opacity exists
        // (IE uses filter instead)
        // Use a regex to work around a WebKit issue. See #5145
        opacity: /^0.55/.test( a.style.opacity ),

        // Verify style float existence
        // (IE uses styleFloat instead of cssFloat)
        cssFloat: !!a.style.cssFloat,

        // Make sure that if no value is specified for a checkbox
        // that it defaults to "on".
        // (WebKit defaults to "" instead)
        // 1.5 若是複選框的屬性value的默認值是"on"，則測試項checkOn爲true
        // 在safari中，複選框的屬性value的默認值是空字符串，此時測試項checkOn爲false; 在其餘瀏覽器中，默認值是字符串"on"，此時測試項checkOn爲true
        checkOn: ( input.value === "on" ),

        // Make sure that a selected-by-default option has a working selected property.
        // (WebKit defaults to false instead of true, IE too, if it's in an optgroup)
        // 在IE和早期的Safari中，默認選中的option元素的屬性seleted爲false, 測試項optSelected爲false,
        optSelected: opt.selected,

        // Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)
        // 1.9 若是原生方法getAttribute()、setAttribute()、removeAttribute()能夠正確地設置、讀取和移除HTML屬性。則測試項getSetAttribute爲true
        // 在IE6， IE7中，執行方法getAttribute()、setAttribute()、removeAttribute()時須要傳入DOM屬性做爲參數而不是HTML屬性，此時測試項getSetAttribute爲false
        getSetAttribute: div.className !== "t",

        // Tests for enctype support on a form(#6743)
        // 1.11 若是表單元素支持屬性enctype, 則測試項enctype爲true
        // 屬性enctype用於規定在將表單數據發送到服務器以前應該如何對其進行編碼，它與屬性encoding是等價的，可是在一些老版本里的瀏覽器中只支持屬性encoding
        // 這裏經過兩個邏輯非運算符(!)把屬性enctpe的值轉換爲布爾值。
        enctype: !!document.createElement("form").enctype,

        // Makes sure cloning an html5 element does not cause problems
        // Where outerHTML is undefined, this still works
        // 1.12 若是瀏覽器可以正確地複製HTML5元素，則測試項HTML5Clone爲true
        // 在IE6， IE7， IE8中，沒法正確地複製HTML5元素，測試項html5Clone爲false, 在IE9+和其餘瀏覽器中則爲true
        html5Clone: document.createElement("nav").cloneNode( true ).outerHTML !== "<:nav></:nav>",

        // Will be defined later
        submitBubbles: true,
        changeBubbles: true,
        focusinBubbles: false,
        deleteExpando: true,
        noCloneEvent: true,
        inlineBlockNeedsLayout: false,
        shrinkWrapBlocks: false,
        reliableMarginRight: true
    };

    // Make sure checked status is properly cloned
    input.checked = true;
    // 1.6 在IE 中，複製DOM元素時不會複製屬性checked, 測試項noCloneChecked爲false,在其餘瀏覽器中，會複製屬性checked, 測試項noCloneChecked爲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;
    // 1.8 在早期的Safari中，若是元素select被禁用，則子元素option會被自動禁用，此時測試項optDisabled爲false; 在其餘瀏覽器中，則不會自被自動禁用，測試項optDisabled則爲true
    support.optDisabled = !opt.disabled;

    // Test to see if it's possible to delete an expando from an element
    // Fails in Internet Explorer
    // 1.10 若是瀏覽器容許刪除DOM元素的屬性，則測試項delteEXpando爲true
    // 在IE6， IE7， IE8中，刪除DOM元素上的屬性會拋出異常，此時測試項deleteExpando爲false
    // 嘗試在div元素上執行delete div.test, 若是拋出異常，則測試項deleteExpando爲false
    try {
        delete div.test;
    } catch( e ) {
        support.deleteExpando = false;
    }

    if ( !div.addEventListener && div.attachEvent && div.fireEvent ) {
        div.attachEvent( "onclick", function() {
            // Cloning a node shouldn't copy over any
            // bound event handlers (IE does this)
            support.noCloneEvent = false;
        });
        div.cloneNode( true ).fireEvent( "onclick" );
    }

    // Check if a radio maintains its value
    // after being appended to the DOM
    // 1.13 若是設置input元素的屬性type爲"radio"不會致使屬性value的值丟失，則測試項radioValue爲true
    // 在IE中，設置input元素的屬性type爲"radio"會致使屬性value的值丟失，測試項radioValue爲false, 在其餘瀏覽器中則爲true
    input = document.createElement("input");
    input.value = "t";
    input.setAttribute("type", "radio");
    support.radioValue = input.value === "t";
    // 若是瀏覽器再文檔片斷中能正確複製單選按鈕和複選框的選中狀態（即屬性checked），則測試項checkClone爲true
    // 在IE6， IE7中，複製文檔片斷會丟失其中單選按鈕和複選框的屬性checked，此時測試項checkClone爲false, 在IE8+和其餘瀏覽器中則爲true
    input.setAttribute("checked", "checked");
    div.appendChild( input );
    fragment = document.createDocumentFragment();
    fragment.appendChild( div.lastChild );

    // WebKit doesn't clone checked state correctly in fragments
    support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;

    // Check if a disconnected checkbox will retain its checked
    // value of true after appended to the DOM (IE6/7)
    // 1.15已選中的單選按鈕和複選按框添加到DOM樹中後，若是仍然爲選中狀態，則測試項appendChecked爲true
    // 在IE6， IE7中，把已選中的單選按鈕和複選框添加到DOM樹中後會丟失選中狀態，測試項appendChecked爲false
    support.appendChecked = input.checked;

    fragment.removeChild( input );
    fragment.appendChild( div );

    div.innerHTML = "";

    // Check if div with explicit width and no margin-right incorrectly
    // gets computed margin-right based on width of container. For more
    // info see bug #3333
    // Fails in WebKit before Feb 2011 nightlies
    // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
    if ( window.getComputedStyle ) {
        marginDiv = document.createElement( "div" );
        marginDiv.style.width = "0";
        marginDiv.style.marginRight = "0";
        div.style.width = "2px";
        div.appendChild( marginDiv );
        support.reliableMarginRight =
            ( parseInt( ( window.getComputedStyle( marginDiv, null ) || { marginRight: 0 } ).marginRight, 10 ) || 0 ) === 0;
    }

    // Technique from Juriy Zaytsev
    // http://perfectionkills.com/detecting-event-support-without-browser-sniffing/
    // We only care about the case where non-standard event systems
    // are used, namely in IE. Short-circuiting here helps us to
    // avoid an eval call (in setAttribute) which can cause CSP
    // to go haywire. See: https://developer.mozilla.org/en/Security/CSP
    if ( div.attachEvent ) {
        for( i in {
            submit: 1,
            change: 1,
            focusin: 1
        }) {
            eventName = "on" + i;
            isSupported = ( eventName in div );
            if ( !isSupported ) {
                div.setAttribute( eventName, "return;" );
                isSupported = ( typeof div[ eventName ] === "function" );
            }
            support[ i + "Bubbles" ] = isSupported;
        }
    }

    fragment.removeChild( div );

    // Null elements to avoid leaks in IE
    fragment = select = opt = marginDiv = div = input = null;

    return support;
})();