我们知道,jQuery.support是jQuery中检测兼容性问题的最重要方法。注意,这里仅仅是检测,其具体的解决兼容性方法是利用其“钩子机制”实现。

  首先来看源码,一窥究竟。

  引用源码:jQuery.1.10.2

jQuery.support = (function( support ) {var all, a, input, select, fragment, opt, eventName, isSupported, i,div = document.createElement("div");// Setupdiv.setAttribute( "className", "t" );div.innerHTML = "  <link/><table></table><a href='/a'>a</a><input type='checkbox'/>";// Finish early in limited (non-browser) environmentsall = div.getElementsByTagName("*") || [];a = div.getElementsByTagName("a")[ 0 ];if ( !a || !a.style || !all.length ) {return support;}// First batch of testsselect = document.createElement("select");opt = select.appendChild( document.createElement("option") );input = div.getElementsByTagName("input")[ 0 ];a.style.cssText = "top:1px;float:left;opacity:.5";// Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)support.getSetAttribute = div.className !== "t";// IE strips leading whitespace when .innerHTML is usedsupport.leadingWhitespace = div.firstChild.nodeType === 3;// Make sure that tbody elements aren't automatically inserted// IE will insert them into empty tablessupport.tbody = !div.getElementsByTagName("tbody").length;// Make sure that link elements get serialized correctly by innerHTML// This requires a wrapper element in IEsupport.htmlSerialize = !!div.getElementsByTagName("link").length;// Get the style information from getAttribute// (IE uses .cssText instead)support.style = /top/.test( a.getAttribute("style") );// Make sure that URLs aren't manipulated// (IE normalizes it by default)support.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 #5145support.opacity = /^0.5/.test( a.style.opacity );// Verify style float existence// (IE uses styleFloat instead of cssFloat)support.cssFloat = !!a.style.cssFloat;// Check the default checkbox/radio value ("" on WebKit; "on" elsewhere)support.checkOn = !!input.value;// 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)support.optSelected = opt.selected;// Tests for enctype support on a form (#6743)support.enctype = !!document.createElement("form").enctype;// Makes sure cloning an html5 element does not cause problems// Where outerHTML is undefined, this still workssupport.html5Clone = document.createElement("nav").cloneNode( true ).outerHTML !== "<:nav></:nav>";// Will be defined latersupport.inlineBlockNeedsLayout = false;support.shrinkWrapBlocks = false;support.pixelPosition = false;support.deleteExpando = true;support.noCloneEvent = true;support.reliableMarginRight = true;support.boxSizingReliable = true;// Make sure checked status is properly clonedinput.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;// Support: IE<9try {delete div.test;} catch( e ) {support.deleteExpando = false;}// Check if we can trust getAttribute("value")input = document.createElement("input");input.setAttribute( "value", "" );support.input = input.getAttribute( "value" ) === "";// Check if an input maintains its value after becoming a radioinput.value = "t";input.setAttribute( "type", "radio" );support.radioValue = input.value === "t";// #11217 - WebKit loses check when the name is after the checked attributeinput.setAttribute( "checked", "t" );input.setAttribute( "name", "t" );fragment = document.createDocumentFragment();fragment.appendChild( input );// Check if a disconnected checkbox will retain its checked// value of true after appended to the DOM (IE6/7)support.appendChecked = input.checked;// WebKit doesn't clone checked state correctly in fragmentssupport.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;// Support: IE<9// Opera does not clone events (and typeof div.attachEvent === undefined).// IE9-10 clones events bound via attachEvent, but they don't trigger with .click()if ( div.attachEvent ) {div.attachEvent( "onclick", function() {support.noCloneEvent = false;});div.cloneNode( true ).click();}// Support: IE<9 (lack submit/change bubble), Firefox 17+ (lack focusin event)// Beware of CSP restrictions (https://developer.mozilla.org/en/Security/CSP)for ( i in { submit: true, change: true, focusin: true }) {div.setAttribute( eventName = "on" + i, "t" );support[ i + "Bubbles" ] = eventName in window || div.attributes[ eventName ].expando === false;}div.style.backgroundClip = "content-box";div.cloneNode( true ).style.backgroundClip = "";support.clearCloneStyle = div.style.backgroundClip === "content-box";// Support: IE<9// Iteration over object's inherited properties before its own.for ( i in jQuery( support ) ) {break;}support.ownLast = i !== "0";// Run tests that need a body at doc readyjQuery(function() {var container, marginDiv, tds,divReset = "padding:0;margin:0;border:0;display:block;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;",body = document.getElementsByTagName("body")[0];if ( !body ) {// Return for frameset docs that don't have a bodyreturn;}container = document.createElement("div");container.style.cssText = "border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px";body.appendChild( container ).appendChild( div );// Support: IE8// 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).div.innerHTML = "<table><tr><td></td><td>t</td></tr></table>";tds = div.getElementsByTagName("td");tds[ 0 ].style.cssText = "padding:0;margin:0;border:0;display:none";isSupported = ( tds[ 0 ].offsetHeight === 0 );tds[ 0 ].style.display = "";tds[ 1 ].style.display = "none";// Support: IE8// Check if empty table cells still have offsetWidth/Heightsupport.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 );// Check box-sizing and margin behavior.div.innerHTML = "";div.style.cssText = "box-sizing:border-box;-moz-box-sizing:border-box;-webkit-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 #13543jQuery.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";// Check if div with explicit width and no margin-right incorrectly// gets computed margin-right based on width of container. (#3333)// Fails in WebKit before Feb 2011 nightlies// WebKit Bug 13343 - getComputedStyle returns wrong value for margin-rightmarginDiv = 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 );}if ( typeof div.style.zoom !== core_strundefined ) {// Support: IE<8// Check if natively block-level elements act like inline-block// elements when setting their display to 'inline' and giving// them layoutdiv.innerHTML = "";div.style.cssText = divReset + "width:1px;padding:1px;display:inline;zoom:1";support.inlineBlockNeedsLayout = ( div.offsetWidth === 3 );// Support: IE6// Check if elements with layout shrink-wrap their childrendiv.style.display = "block";div.innerHTML = "<div></div>";div.firstChild.style.width = "5px";support.shrinkWrapBlocks = ( div.offsetWidth !== 3 );if ( support.inlineBlockNeedsLayout ) {// Prevent IE 6 from affecting layout for positioned elements #11048// Prevent IE from shrinking the body in IE 7 mode #12869// Support: IE<8body.style.zoom = 1;}}body.removeChild( container );// Null elements to avoid leaks in IEcontainer = div = tds = marginDiv = null;});// Null elements to avoid leaks in IEall = select = fragment = opt = a = input = null;return support;
})({});

这是一个闭包自治性函数,返回的是一个support函数。我们把其中的兼容性问题一一列出来。

通过console.log把support打印出来

1,ajax,判断浏览器是否支持XMLHttpRequest对象

这个代码可不是在suppport闭包里。

8648行:xhrSupported = jQuery.ajaxSettings.xhr();

8650行:xhrSupported = jQuery.support.ajax = !!xhrSupported;

2,appendChecked, 检查被添加到 DOM 中的 checkbox 是否仍然保留原来的选中状态。 ie6/7为false

3,boxSizing,检测是否支持box-sizing

4,boxSizingReliable,检测盒子模型是否可靠

5,changeBubbles,检测是否支持changeBubbles事件

6,checkClone,检测选中的元素状态能否被赋值

7,checkOn,检测checkbox值是否为on

8,clearCloneStyle,检测元素的backgroundClip是否被清除

9,cors,检测是否是跨域

7768行:jQuery.support.cors = !!xhrSupported && ( "withCredentials" in xhrSupported );

10,cssFloat,检查 css 样式中的 float 属性是否存在

11,deleteExpando,检查是否允许删除附加在 DOM Element 上的数据。

12,enctype,检查创建form的enctype属性是否存在

13,focusinBubbles,检测是否支持focusinBubbles事件

14,getSetAttribute,检查是否可以设置 div 的 css class

15,hrefNormalized,检查链接的 “href” 属性能否被正常地序列化。

16,html5Clone,验证是否支持html5节点复制

17,htmlSerialize,验证innerHTML插入链接元素是否可被序列化
18,inlineBlockNeedsLayout, 检测块元素在display:inline并拥有layout属性,是否会按inline-block显示
19,input,验证input元素value值

20,leadingWhitespace,检查用 innerHTML 赋值时,是否会保留前面的空白符

21,noCloneChecked, 检查复制 checkbox 时是否连选中状态也一同复制
22,noCloneEvent,检查复制 DOM Element 时是否会连同 event 一起复制
23,opacity, 检查 css 样式中的透明度设置能够被有效支持。
24,optDisabled,获取下拉列表子元素的disabled是否为true
25,optSelected,验证创建的select元素的第一个option元素是否会默认选中

26,ownLast,

27,pixelPosition,检测图层定位(像素位置)是否有误
28,radioValue,检查 input 元素被设为 radio 类型后是否仍然保持原来的值。 
29,reliableHiddenOffsets, 检查 hidden 状态下的  offsetWidth 和 offsetHeight 是否正确。

30,reliableMarginRight,检查 Margin Right 的计算是否可靠

31,shrinkWrapBlocks,表示内部 DOM Element 的样式是否会影响外部 DOM Element 的样式。    IE 6 中为 true , 多数浏览器中为 false 。

32,style,检查是否能通过 “style” 属性获取 DOM Element 的样式。

33,submitBubbles,检查是否支持submitBubbles事件
34,tbody ,检查是否会自动为 table 插入 tbody 
以上把jQuery中所有的support属性全部列出来了,具体的使用要针对具体的工作。

转载于:https://www.cnblogs.com/pfzeng/p/4479293.html

通过jQuery.support看javascript中的兼容性问题相关推荐

  1. html5页面引入jquery,如何在javascript中引入jQuery?

    jquery是一个用来代替JavaScript来快捷书写前端脚本语言的库,jquery可以大大的简化复杂的js代码,使开发人员专注于实现页面的效果. jquery的导入方式有两种,一种是本地导入,一种 ...

  2. html $符号的作用,javascript 中$符号是代表什么意思!

    $符号在php中是表示变量的特征字符, 在js中它也有很多作用, 一般我们用来命名一个函数名称,获取id的 1. 首先可以用来表示变量, 比如变量 var s='asdsd'或var $s='asda ...

  3. JavaScript 中的函数式编程实践

    为什么80%的码农都做不了架构师?>>>    基础知识 函数式编程简介 说到函数式编程,人们的第一印象往往是其学院派,晦涩难懂,大概只有那些蓬头散发,不修边幅,甚至有些神经质的大学 ...

  4. JavaScript中的六种错误类型

    刚入前端坑,英语又不太好的同学,是不是还在为控制台的错误抓耳挠腮?今天就带大家看一看JavaScript中常见的错误类型. js中的控制台的报错信息主要分为两大类,第一类是语法错误,这一类错误在预解析 ...

  5. jQuery中的read 和JavaScript中 的onload函数的区别

    2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript中,onload函数是最经常用到的,这个函数的作用是等待网页完全加载之后再去执行代码块中的语句,因为按照 ...

  6. 在jQuery和JavaScript中,实现转跳

    在jQuery和JavaScript中,实现转跳 隐藏转跳,浏览器不产生历史记录(replace).代码片段: window.location.replace("http://insus.c ...

  7. 以及其任何超类对此上下文都是未知的_web前端入门到实战:Javascript 中的「上下文」你只需要看这一篇

    正文 上下文 是Javascript 中的一个比较重要的概念, 可能很多朋友对这个概念并不是很熟悉, 那换成「作用域」 和 「闭包」呢?是不是就很亲切了. 「作用域」和「闭包」 都是和「执行上下文」密 ...

  8. 了解JavaScript中的Memoization以提高性能,再看React的应用

    英文: Understanding Memoization in JavaScript to Improve Performance 中文: 了解JavaScript中的Memoization以提高性 ...

  9. javascript中的onpropertychange事件 与 jquery中的propertychange事件

    2019独角兽企业重金招聘Python工程师标准>>> jquery 中的propertychange事件不兼容IE9  而javascript中的onpropertychange事 ...

最新文章

  1. Windows 8.1 Preview(Windows Blue)预览版简体中文官方下载(ISO完整版镜像)
  2. 哪个更快:while(1)或while(2)?
  3. 2招按摩轻松解除黑眼圈 - 生活至上,美容至尚!
  4. early z optimization
  5. OS_CORE.C(5)
  6. java文件file字符集_获取文件字符集(或文件编码) 的工具类
  7. java集合根据值排序_Java 8:对集合中的值进行排序
  8. php期末作业经验,期末作业.php
  9. JAVA高并发工作笔记0002---高并发编程之使用ThreadFactory来创建新的线程
  10. 【渝粤教育】电大中专药剂学基础知识作业 题库
  11. GIS和开源见解(摘录)
  12. 仿京东商城主页(静态代码)
  13. 51单片机汇编学习例程(6)——74HC573数码管篇
  14. Java程序员月薪20k的涨薪秘籍,没点绝活敢跳槽吗?
  15. drcom宽带认证登录超时_DrCOM客户端常见问题解决方法
  16. vue项目中通过WebSocket实现实时消息提示及遇到的问题
  17. [RK3288][Android6.0] 调试笔记 --- 设置中文为默认输入法
  18. 微信小程序+PHP 从零写一个微信小程序
  19. CIPP非开挖修复技术|UV紫外光与传统水翻CIPP修复对比分析
  20. 自然语言处理中的Character Embedding技术

热门文章

  1. 英特尔玩VR有多认真?看看Project Alloy的细节就知道了
  2. Nginx日志配置及分割
  3. zabbix的源码安装
  4. 在Linux上安装Chef工作站
  5. 【BUG解析】调用PagerAdapter.notifyDataSetChanged()不更新
  6. 区块链安全的奥秘之一:非对称加密
  7. 爬取人力资源社保局咨询问题
  8. Don’t Worry.Be Scruffy.
  9. Unity 可重复随机数
  10. 用一句位运算判断两个整数的大小并返回较大者