通过jQuery.support看javascript中的兼容性问题
我们知道,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节点复制
转载于:https://www.cnblogs.com/pfzeng/p/4479293.html
通过jQuery.support看javascript中的兼容性问题相关推荐
- html5页面引入jquery,如何在javascript中引入jQuery?
jquery是一个用来代替JavaScript来快捷书写前端脚本语言的库,jquery可以大大的简化复杂的js代码,使开发人员专注于实现页面的效果. jquery的导入方式有两种,一种是本地导入,一种 ...
- html $符号的作用,javascript 中$符号是代表什么意思!
$符号在php中是表示变量的特征字符, 在js中它也有很多作用, 一般我们用来命名一个函数名称,获取id的 1. 首先可以用来表示变量, 比如变量 var s='asdsd'或var $s='asda ...
- JavaScript 中的函数式编程实践
为什么80%的码农都做不了架构师?>>> 基础知识 函数式编程简介 说到函数式编程,人们的第一印象往往是其学院派,晦涩难懂,大概只有那些蓬头散发,不修边幅,甚至有些神经质的大学 ...
- JavaScript中的六种错误类型
刚入前端坑,英语又不太好的同学,是不是还在为控制台的错误抓耳挠腮?今天就带大家看一看JavaScript中常见的错误类型. js中的控制台的报错信息主要分为两大类,第一类是语法错误,这一类错误在预解析 ...
- jQuery中的read 和JavaScript中 的onload函数的区别
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript中,onload函数是最经常用到的,这个函数的作用是等待网页完全加载之后再去执行代码块中的语句,因为按照 ...
- 在jQuery和JavaScript中,实现转跳
在jQuery和JavaScript中,实现转跳 隐藏转跳,浏览器不产生历史记录(replace).代码片段: window.location.replace("http://insus.c ...
- 以及其任何超类对此上下文都是未知的_web前端入门到实战:Javascript 中的「上下文」你只需要看这一篇
正文 上下文 是Javascript 中的一个比较重要的概念, 可能很多朋友对这个概念并不是很熟悉, 那换成「作用域」 和 「闭包」呢?是不是就很亲切了. 「作用域」和「闭包」 都是和「执行上下文」密 ...
- 了解JavaScript中的Memoization以提高性能,再看React的应用
英文: Understanding Memoization in JavaScript to Improve Performance 中文: 了解JavaScript中的Memoization以提高性 ...
- javascript中的onpropertychange事件 与 jquery中的propertychange事件
2019独角兽企业重金招聘Python工程师标准>>> jquery 中的propertychange事件不兼容IE9 而javascript中的onpropertychange事 ...
最新文章
- Windows 8.1 Preview(Windows Blue)预览版简体中文官方下载(ISO完整版镜像)
- 哪个更快:while(1)或while(2)?
- 2招按摩轻松解除黑眼圈 - 生活至上,美容至尚!
- early z optimization
- OS_CORE.C(5)
- java文件file字符集_获取文件字符集(或文件编码) 的工具类
- java集合根据值排序_Java 8:对集合中的值进行排序
- php期末作业经验,期末作业.php
- JAVA高并发工作笔记0002---高并发编程之使用ThreadFactory来创建新的线程
- 【渝粤教育】电大中专药剂学基础知识作业 题库
- GIS和开源见解(摘录)
- 仿京东商城主页(静态代码)
- 51单片机汇编学习例程(6)——74HC573数码管篇
- Java程序员月薪20k的涨薪秘籍,没点绝活敢跳槽吗?
- drcom宽带认证登录超时_DrCOM客户端常见问题解决方法
- vue项目中通过WebSocket实现实时消息提示及遇到的问题
- [RK3288][Android6.0] 调试笔记 --- 设置中文为默认输入法
- 微信小程序+PHP 从零写一个微信小程序
- CIPP非开挖修复技术|UV紫外光与传统水翻CIPP修复对比分析
- 自然语言处理中的Character Embedding技术