<!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;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;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 ) || { "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