`
haiyupeter
  • 浏览: 427540 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jQuery中的support对象

 
阅读更多
jQuery.support是为了替换jQuery.browser而来。

browser带着版本号的信息,浏览器有更新(IE10)时,很多以前的判断条件都不生效,所以更改为对特性的支持,以此来区分浏览器的不同。

(function( jQuery ) {  
  
jQuery.support = (function() {  
  
    var support,  
        all,  
        a,  
        select,  
        opt,  
        input,  
        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  
    // 如果不支持getElementsByTagName()方法,则支持返回空对象,  
    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  
        // IE下.innerHTML将左右空格去除,得到的nodeType === 1  
        leadingWhitespace: ( div.firstChild.nodeType === 3 ),  
  
        // Make sure that tbody elements aren't automatically inserted  
        // IE will insert them into empty tables  
        // IE往空的table添加tbody标签  
        tbody: !div.getElementsByTagName("tbody").length,  
  
        // Make sure that link elements get serialized correctly by innerHTML  
        // This requires a wrapper element in IE  
        // 在IE下查找link的长度为0,需要将link内容包含在dom元素中  
        htmlSerialize: !!div.getElementsByTagName("link").length,  
  
        // Get the style information from getAttribute  
        // (IE uses .cssText instead)  
        // IE中使用a.getAttribute("style").cssText来获取style中的文本信息  
        style: /top/.test( a.getAttribute("style") ),  
  
        // Make sure that URLs aren't manipulated  
        // (IE normalizes it by default)  
        // IE中a的getAttribute方法默认将href属性转义成绝对路径,网上有个网页分析得非常得当  
        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)  
        // 在chrome中 defaults为on,是否jQuery中有存在问题  
        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)  
        optSelected: opt.selected,  
  
        // Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)  
        // 测试是否支持驼峰式的样式,如果支持,在IE6和IE7的get/setAttribute方法中采用attrFixes修正  
        getSetAttribute: div.className !== "t",  
  
        // Tests for enctype support on a form(#6743)  
        // 测试form是否支持enctype  
        enctype: !!document.createElement("form").enctype,  
  
        // Makes sure cloning an html5 element does not cause problems  
        // Where outerHTML is undefined, this still works  
        // 确保克隆一个html5元素时不会导致问题  
        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,  
        pixelMargin: true  
    };  
  
    // jQuery.boxModel DEPRECATED in 1.3, use jQuery.support.boxModel instead  
    jQuery.boxModel = support.boxModel = (document.compatMode === "CSS1Compat");  
  
    // Make sure checked status is properly cloned  
    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;  
  
    // Test to see if it's possible to delete an expando from an element  
    // Fails in Internet Explorer  
    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  
    // 加入一个radio后,查看是否仍保留它的值  
    input = document.createElement("input");  
    input.value = "t";  
    input.setAttribute("type", "radio");  
    support.radioValue = input.value === "t";  
  
    input.setAttribute("checked", "checked");  
  
    // #11217 - WebKit loses check when the name is after the checked attribute  
    input.setAttribute( "name", "t" );  
  
    div.appendChild( input );  
    fragment = document.createDocumentFragment();  
    fragment.appendChild( div.lastChild );  
  
    // WebKit doesn't clone checked state correctly in fragments  
    // WebKit克隆时不支持checked状态  
    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)  
    support.appendChecked = input.checked;  
  
    fragment.removeChild( input );  
    fragment.appendChild( div );  
  
    // 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 = div = input = null;  
  
    // Run tests that need a body at doc ready  
    jQuery(function() {  
        var container, outer, inner, table, td, offsetSupport,  
            marginDiv, conMarginTop, style, html, positionTopLeftWidthHeight,  
            paddingMarginBorderVisibility, paddingMarginBorder,  
            body = document.getElementsByTagName("body")[0];  
  
        if ( !body ) {  
            // Return for frameset docs that don't have a body  
            return;  
        }  
  
        conMarginTop = 1;  
        paddingMarginBorder = "padding:0;margin:0;border:";  
        positionTopLeftWidthHeight = "position:absolute;top:0;left:0;width:1px;height:1px;";  
        paddingMarginBorderVisibility = paddingMarginBorder + "0;visibility:hidden;";  
        style = "style='" + positionTopLeftWidthHeight + paddingMarginBorder + "5px solid #000;";  
        html = "<div " + style + "display:block;'><div style='" + paddingMarginBorder + "0;display:block;overflow:hidden;'></div></div>" +  
            "<table " + style + "' cellpadding='0' cellspacing='0'>" +  
            "<tr><td></td></tr></table>";  
  
        container = document.createElement("div");  
        container.style.cssText = paddingMarginBorderVisibility + "width:0;height:0;position:static;top:0;margin-top:" + conMarginTop + "px";  
        body.insertBefore( container, body.firstChild );  
  
        // Construct the test element  
        div = document.createElement("div");  
        container.appendChild( div );  
  
        // Check if table cells still have offsetWidth/Height when they are set  
        // to display:none and there are still other visible table cells in a  
        // table row; if so, offsetWidth/Height are not reliable for use when  
        // determining if an element has been hidden directly using  
        // display:none (it is still safe to use offsets if a parent element is  
        // hidden; don safety goggles and see bug #4512 for more information).  
        // (only IE 8 fails this test)  
        div.innerHTML = "<table><tr><td style='" + paddingMarginBorder + "0;display:none'></td><td>t</td></tr></table>";  
        tds = div.getElementsByTagName( "td" );  
        isSupported = ( tds[ 0 ].offsetHeight === 0 );  
  
        tds[ 0 ].style.display = "";  
        tds[ 1 ].style.display = "none";  
  
        // Check if empty table cells still have offsetWidth/Height  
        // (IE <= 8 fail this test)  
        support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 );  
  
        // 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 ) {  
            div.innerHTML = "";  
            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;  
        }  
  
        if ( typeof div.style.zoom !== "undefined" ) {  
            // Check if natively block-level elements act like inline-block  
            // elements when setting their display to 'inline' and giving  
            // them layout  
            // (IE < 8 does this)  
            div.innerHTML = "";  
            div.style.width = div.style.padding = "1px";  
            div.style.border = 0;  
            div.style.overflow = "hidden";  
            div.style.display = "inline";  
            div.style.zoom = 1;  
            support.inlineBlockNeedsLayout = ( div.offsetWidth === 3 );  
  
            // Check if elements with layout shrink-wrap their children  
            // (IE 6 does this)  
            div.style.display = "block";  
            div.style.overflow = "visible";  
            div.innerHTML = "<div style='width:5px;'></div>";  
            support.shrinkWrapBlocks = ( div.offsetWidth !== 3 );  
        }  
  
        div.style.cssText = positionTopLeftWidthHeight + paddingMarginBorderVisibility;  
        div.innerHTML = html;  
  
        outer = div.firstChild;  
        inner = outer.firstChild;  
        td = outer.nextSibling.firstChild.firstChild;  
  
        offsetSupport = {  
            doesNotAddBorder: ( inner.offsetTop !== 5 ),  
            doesAddBorderForTableAndCells: ( td.offsetTop === 5 )  
        };  
  
        inner.style.position = "fixed";  
        inner.style.top = "20px";  
  
        // safari subtracts parent border width here which is 5px  
        offsetSupport.fixedPosition = ( inner.offsetTop === 20 || inner.offsetTop === 15 );  
        inner.style.position = inner.style.top = "";  
  
        outer.style.overflow = "hidden";  
        outer.style.position = "relative";  
  
        offsetSupport.subtractsBorderForOverflowNotVisible = ( inner.offsetTop === -5 );  
        offsetSupport.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== conMarginTop );  
  
        if ( window.getComputedStyle ) {  
            div.style.marginTop = "1%";  
            support.pixelMargin = ( window.getComputedStyle( div, null ) || { marginTop: 0 } ).marginTop !== "1%";  
        }  
  
        if ( typeof container.style.zoom !== "undefined" ) {  
            container.style.zoom = 1;  
        }  
  
        body.removeChild( container );  
        marginDiv = div = container = null;  
  
        jQuery.extend( support, offsetSupport );  
    });  
  
    return support;  
})();  
  
})( jQuery );  
分享到:
评论

相关推荐

    jQuery.support 的实现方式

    在这个例子中,我们检查`document.body.style`对象中是否存在`transition`属性。如果存在,说明浏览器支持CSS3过渡效果,`jQuery.support.cssTransitions` 就会被设置为`true`。 jQuery的源码中,`jQuery.support` ...

    jQuery 1.4.1 中文参考

    - `get()`和`get(index)`:获取jQuery对象中对应索引的DOM元素,无参数时返回所有元素的数组。 - `index([subject])`:返回元素在兄弟元素中的相对位置,或相对于指定元素的位置。 **数据缓存** - `data([name])`...

    jQuery 源码分析笔记(5) jQuery.support

    在`jQuery.support`模块中,包含了一系列的浏览器特性检测,这些检测包括但不限于: - ajax:检测浏览器是否支持原生的`XMLHttpRequest`对象。 - boxModel:确定浏览器是否遵循W3C CSS盒模型。 - changeBubbles:...

    jQuery1.3中文参考文档

    3. **$.support对象**:这个对象在1.3版本中被引入,用于检测浏览器的特性支持,帮助开发者编写兼容性良好的代码。 4. **更多的选择器**:jQuery1.3扩展了选择器,包括`:even`、`:odd`、`:eq()`、`:gt()`、`:lt()`...

    jQuery 1.10 中文 chm

    例如,这个版本改进了事件处理的效率,减少了内存占用,还引入了新的API,如`$.support`对象,用于检测浏览器特性和兼容性。 在使用《jQuery 1.10 中文 chm》帮助手册时,你可以通过搜索功能快速找到特定的API或...

    jQuery 1.4 中文手册(速查表) chm

    - **遍历**: `each()` 方法允许遍历jQuery对象中的每个元素。 - **DOM操作**: `appendTo()`、`appendTo()`、`before()` 和 `after()` 方法用于插入元素。 - **事件**: `bind()`、`unbind()`、`trigger()` 用于事件...

    jquery1.7.2中文手册

    jQuery提供了一系列的特性检测函数,如`$.support`对象,帮助开发者判断浏览器是否支持特定的CSS属性、DOM操作或JavaScript特性。 8. **性能优化(Performance Optimization)** 在1.7.2版本中,jQuery对DOM操作...

    jquery1.7 中文帮助文档 chm

    5. **AJAX(Ajax)**:jQuery的`$.ajax()`方法是进行异步数据请求的核心,1.7版本加强了错误处理和Promise对象的支持,使得异步编程更加易用。 6. **插件(Plugins)**:jQuery的生态系统中,插件是其重要组成部分...

    jQuery-1.12.4.js和jQuery-1.8.3.min.js

    1.8系列引入了重要的$.support对象,用于检测浏览器特性,还优化了$.each方法,提升了性能。尽管这个版本可能不包含最新的功能,但它对早期浏览器的支持和较小的体积,使其在某些情况下仍然是一个不错的选择,特别是...

    jQuery1.7 中文手册.chm

    7. **插件支持(Plugin Support)**:jQuery拥有丰富的插件生态系统,1.7版本中,开发者可以通过`$.fn.extend()`来扩展jQuery对象,创建自己的插件,以满足各种定制需求。 8. **版本兼容性(Version Compatibility...

    jquery1.6中文帮助文档_AIR

    - **$.support对象**: 1.6引入了`$.support`对象,用于检测浏览器对某些特性或行为的支持情况,方便开发者编写兼容性代码。 ### 使用Adobe AIR运行 为了运行这个“JQAPI1.6_air”程序,你需要首先安装Adobe AIR,...

    jQuery技术内幕 深入解析jQuery架构设计与实现原理

    进而通过“构造jquery对象”章节分析了构造函数jquery()的各种用法和内部构造过程;接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support...

    jQuery 1.9.1源码分析系列(十四)之常用jQuery工具

    最后,jQuery.globalEval()函数可以全局执行一段JavaScript代码,与eval()函数相似,但其作用域是全局的,而jQuery.map()函数则用于将数组或对象中的每个元素映射到新的数组中,根据回调函数返回值重新构建数组。...

    jQuery源码

    源码中的`jQuery.support`对象记录了浏览器的特性,`jQuery.browser`则提供了浏览器信息,这些都是为了确保在各种环境下稳定运行。 10. **性能优化** jQuery 1.12版本在性能优化上下了不少功夫,如缓存DOM查询结果...

    jQuery1.10.3 中文完全参考手册.zip

    8. **API接口**:jQuery 1.10.3 API文档详细列出了所有可用的方法、属性和事件,如`$.each()`用于迭代对象或数组,`$.isFunction()`判断是否为函数类型,`$.support`对象提供了浏览器特性检测。 通过学习这份...

    jquery-migrate-1.2.1.min.js

    3. **$.support**: 这个对象用来检测浏览器的特性,`jQuery Migrate` 会更新一些不再自动检测的特性。 4. **Event特殊事件**: 一些旧的事件处理方式可能在新版本中被移除,`jQuery Migrate` 会恢复它们。 使用 `...

    jquery1.7版本

    `$.support`对象在jQuery 1.7中进行了更新,包含了更多关于浏览器特性的检测,帮助开发者更好地了解用户所使用的浏览器是否支持特定的功能。 8. **$.each() 的优化** `$.each()`方法在1.7中进行了性能优化,处理...

    jquery 1.8+1.7

    2. **$.support对象**:对`.support`对象进行了调整,提供了更多关于浏览器特性的检测,帮助开发者判断当前环境是否支持特定功能。 3. **$.trim()**:改进了字符串修剪功能,处理空格和换行更加准确。 4. **$....

    jquery1.7+jquery1.8 API文档CHM格式

    1. **$.support**: 在1.7版本中,$.support对象新增了一些属性,用于检测浏览器特性,如`$.support.leadingWhitespace`用来检测浏览器是否支持元素的leading whitespace。 2. **$.Callbacks**: 引入了新的回调函数...

    jquery1.6 中文帮助

    4. **$.support对象的改进**:$.support对象新增了一些属性,用于检测浏览器特性,帮助开发者判断哪些功能在目标浏览器中可用。 ### JavaScript 1.4到1.6.1 API帮助 这部分内容可能包括了JavaScript语言从1.4版本到...

Global site tag (gtag.js) - Google Analytics