源碼解讀jQ中瀏覽器兼容模塊support第1/2頁
前言
jQuery的屬性support是判斷瀏覽器之間是否兼容的模塊 ,該模塊包含了leadingWhitespace,tbody,htmlSerialize,style,hrefNormalized,opacity,cssFloat,checkOn,optSelected,getSetAttribute….等兼容問題,所有的這些屬性也只是jQuery內(nèi)部會用到,因為jQ內(nèi)部一些模塊需要對這些東西進行判斷, 就直接寫成了一個support模塊, 可以供我們, 但是我們寫代碼的時基本都沒用到啊,
今天再把這些玩意兒過一下, 測試的瀏覽器為FF,CHROME,IE11, IE6-IE10是用IE11模擬的:
$.support.leadingWhitespace ———— IE中自動去空格
$.support.checkOn —-chrome中radio默認值為checkOn
$.support.tbody —-IE通過innerHTML自動生成tbody
$.support.htmlSerialize —– 標(biāo)準(zhǔn)瀏覽器會自動生成link標(biāo)簽
$.support.style —-IE67中g(shù)etAttriute會獲取各種類型的數(shù)據(jù)….
$.support.opacity —- IE678不支持opacity
$.support.cssFloat —-cssFloat標(biāo)準(zhǔn)瀏覽器支持的,IE要用styleFloat
$.support.optSelected —–瀏覽器并不會設(shè)置默認的option
$.support.getSetAttribute —-getSetAttribute在瀏覽器之間的兼容
$.support.html5Clone —- 復(fù)制標(biāo)簽的問題
$.support.boxModel —- 是否支持盒模型
$.support.submitBubbles —-冒泡
$.support.changeBubbles —-冒泡
$.support.focusinBubbles —-冒泡
$.support.deleteExpando —–IE的DOM元素是COM組件, 不能delete組件的屬性
$.support.noCloneEvent —-復(fù)制元素的事件
$.support.reliableHiddenOffsets —-table元素中tr內(nèi)td的問題;
$.support.boxSizing —是否支持boxSizing
$.support.doesNotIncludeMarginInBodyOffset —-body不會包含margin的問題(算不算問題呢?)
$.support.pixelPosition —-獲取樣式返回的是否是像素值
$.support.boxSizingReliable —-boxSizing是否可用
$.support.reliableMarginRight —-chrome中margin的bug
$.support.inlineBlockNeedsLayout —-IE中l(wèi)ayout的問題
$.support.shrinkWrapBlocks —-IE6中自動擴大寬高的問題
$.support.leadingWhitespace屬性
<html> <head> <meta charset="utf-8" /> <title>兼容</title> </head> <body> <script type="text/javascript"> window.l = (function() { var el = document.createElement("div"), index = 0; el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;"; return function(message) { if( message ) { var span = document.createElement("span"); span.innerHTML = (++index) + "信息:<br>"+ message+"<br>"; el.appendChild( span ); }; //IE低版本直接通過createElement創(chuàng)建的元素有parentNode; if( !el.parentNode || (el.parentNode.toString() === "[object]") ) { document.body.appendChild(el); }; return l; }; })(); </script> IE678中自動過濾了元素前后的空格, 而且空格不包含在childNodes里面, <script type="text/javascript"> var el = document.createElement("div"); el.innerHTML = " <div id=\"null\"> </div> "; l(el.childNodes.length); </script> </body> </html>
標(biāo)準(zhǔn)瀏覽器中是遵守用戶輸入, el應(yīng)該包含三個節(jié)點 :["", "<div id=\"null\"> </div>", ""]節(jié)點;
IE678中卻只有1個節(jié)點, 這個節(jié)點就是那個DIV:
$.support.checkOn屬性
標(biāo)準(zhǔn)瀏覽器中的checkbox默認value為”on”,IE5678也都是”on”, 但是在某些webkit中checkbox的值默認為”"字符串,現(xiàn)在的瀏覽器版本都很高了, 基本沒有這個問題, 如果你有chrome低版本的話可以用下面這個demo測試看看有沒有問題:
<html> <head> <meta charset="utf-8" /> <title>兼容</title> </head> <body> <script type="text/javascript"> window.l = (function() { var el = document.createElement("div"), index = 0; el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;"; return function(message) { message = message.toString(); if( message ) { var span = document.createElement("span"); span.innerHTML = (++index) + "信息:<br>"+ message+"<br>"; el.appendChild( span ); }; //IE低版本直接通過createElement創(chuàng)建的元素有parentNode; if( !el.parentNode || (el.parentNode.toString() === "[object]") ) { document.body.appendChild(el); }; return l; }; })(); </script> <input id="ck" type='checkbox'/> <script type="text/javascript"> var el = document.getElementById("ck"); //標(biāo)準(zhǔn)瀏覽器有change事件; el.onchange = function() { l(el.value); l(ck.checked) } //IE中的萬能事件propertychange; el.onpropertychange = function() { l(el.value); l(ck.checked) } l(el.value); </script> </body> </html>
$.support.tbody屬性
在IE6和IE7中新建table會自動創(chuàng)建tbody元素;
如果我們?yōu)閯?chuàng)建的table添加tr或者添加td, 那么所有的瀏覽器都會自動創(chuàng)建tbody;
如果是動態(tài)創(chuàng)建的table和tr,把tr添加到tbody中,那么tbod根本不會出來, 所有瀏覽器都遵循開發(fā)者的操作(瀏覽器的心思真的不好猜測啊)
<html> <head> <meta charset="utf-8" /> <title>兼容</title> </head> <body> <script type="text/javascript"> window.l = (function() { var el = document.createElement("div"), index = 0; el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;"; return function(message) { message = message.toString(); if( message ) { var span = document.createElement("span"); span.innerHTML = (++index) + "信息:<br>"+ message+"<br>"; el.appendChild( span ); }; //IE低版本直接通過createElement創(chuàng)建的元素有parentNode; if( !el.parentNode || (el.parentNode.toString() === "[object]") ) { document.body.appendChild(el); }; return l; }; })(); </script> <div id="tb"></div> <div id="tb2"></div> <div id="tb3"></div> <script type="text/javascript"> var el = document.getElementById("tb"); el.innerHTML = "<table></table>" //IE67中會輸出1, 標(biāo)準(zhǔn)瀏覽器遵循用戶輸入,不會是自動生成tbody,所以tobdy的length是0 l(el.getElementsByTagName("tbody").length); </script> <script> var el = document.getElementById("tb2"); el.innerHTML="<table><tr>111</tr></table>"; //無論是標(biāo)準(zhǔn)還是IE67都會自動生成tbody標(biāo)簽 l(el.getElementsByTagName("tbody").length); </script> <script> var el = document.getElementById("tb3"); el.innerHTML="<table><td>111</td></table>"; //無論是標(biāo)準(zhǔn)還是IE67都會自動生成tbody標(biāo)簽 l(el.getElementsByTagName("tbody").length); </script> <script> var tb = document.createElement("table"); var tr = document.createElement("tr"); tr.innerHTML = "trtrtr"; tb.appendChild(tr); document.getElementsByTagName("body")[0].appendChild(tb); </script> </body> </html>
代碼執(zhí)行完畢以后你會看到, 當(dāng)table里沒有元素的時候, chrome沒有自動產(chǎn)生tbody, 如果你不按照正常的寫法寫table, 而是這樣
"<table><tr>111</tr></table>";
產(chǎn)生的HTML變成這樣”111<table><tr></tr></table>“,
在jQ中你這樣寫$(“<table><tr>111</tr></table>”),
生成的HTML也是這樣的["111","<table><tr></tr></table>"],
所以再三強調(diào)寫html標(biāo)簽的嵌套要符合標(biāo)準(zhǔn)….
在IE中又是例外一回事,通過innerHTML的方式會自動添加tbody, 而且你標(biāo)簽嵌套錯了他也不管你,通過appendChild的方式跟其他瀏覽器一樣不會主動生成tbody;
$.support.htmlSerialize
IE678瀏覽器中不能夠通過innerHTML動態(tài)生成link標(biāo)簽, 要通過新建標(biāo)簽的形式創(chuàng)建:
<html> <head> <meta charset="utf-8" /> <title>兼容</title> </head> <body> <script type="text/javascript"> window.l = (function() { var el = document.createElement("div"), index = 0; el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;"; return function(message) { message = message.toString(); if( message ) { var span = document.createElement("span"); span.innerHTML = (++index) + "信息:<br>"+ message+"<br>"; el.appendChild( span ); }; //IE低版本直接通過createElement創(chuàng)建的元素有parentNode; if( !el.parentNode || (el.parentNode.toString() === "[object]") ) { document.body.appendChild(el); }; return l; }; })(); </script> <div class="bounce animated infinite"> bounce </div> <div id="link"></div> <script type="text/javascript"> var eLink = document.getElementById("link"); eLink.innerHTML = '<link rel="stylesheet">'; </script> </body> </html>
雖然link標(biāo)簽多數(shù)都可以通過innerHTML生成, 但是我們要通過innerHTML生成script標(biāo)簽是不可行的:
- jQuery 1.9移除了$.browser可以使用$.support來替代
- jQuery 1.9使用$.support替代$.browser的使用方法
- jQuery 源碼分析筆記(5) jQuery.support
- jQuery ajax BUG:object doesn''t support this property or method
- jQuery下通過$.browser來判斷瀏覽器.
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動條高度實現(xiàn)代碼
- jquery判斷瀏覽器類型的代碼
- 兩種方法基于jQuery實現(xiàn)IE瀏覽器兼容placeholder效果
- js/jquery判斷瀏覽器的方法小結(jié)
- jQuery一步一步實現(xiàn)跨瀏覽器的可編輯表格,支持IE、Firefox、Safari、Chrome、Opera
相關(guān)文章
基于Jquery的動態(tài)創(chuàng)建DOM元素的代碼
jquery動態(tài)創(chuàng)建頁面元素,mark一下,以備以后查詢時使用。以創(chuàng)建div和input為例。2010-12-12jQuery實現(xiàn)表單動態(tài)添加與刪除數(shù)據(jù)操作示例
這篇文章主要介紹了jQuery實現(xiàn)表單動態(tài)添加與刪除數(shù)據(jù)操作,涉及jQuery事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-07-07基于jQuery實現(xiàn)的設(shè)置文本區(qū)域的光標(biāo)位置
之前做一個代碼提示的功能涉及到在文本框中插入文本的操作,需要獲得當(dāng)前光標(biāo)位置插入文本,本文章向大家介紹jQuery如何設(shè)置文本區(qū)域的光標(biāo)位置,需要的朋友可以參考一下2018-06-06調(diào)用HttpHanlder的幾種返回方式小結(jié)
本篇文章主要是對調(diào)用HttpHanlder的幾種返回方式進行了總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12