序文
jQueryの属性サポートは、ブラウザが互換性があるかどうかを決定するモジュールです。このモジュールには、LeadingWhitespace、Tbody、Htmlserialize、Style、Hrefnormalized、Opacity、CSSFloat、Checkon、Optselected、GetSetattributeなどの互換性の問題が含まれています。コード。
今日はこれらのことをレビューします。テストされたブラウザは、FF、Chrome、IE11、およびIE6-IE10がIE11を使用してシミュレートされます。
$ .SUPPORT.LEADINGWHITESPACE-- IEのスペースを自動的に削除します
$ .support.checkon ---クロムのラジオのデフォルト値はチェックンです
$ .SUPPORT.TBODY - IIEは、innerhtmlを介して自動的にtbodyを生成します
$ .support.htmlserialize - 標準のブラウザはリンクタグを自動的に生成します
$ .support.style - -ie67 getattriuteはさまざまな種類のデータを取得します。
$ .support.Opacity --- IE678は不透明度をサポートしていません
$ .support.cssfloat --- CSSFloatの標準ブラウザによってサポートされている場合、つまり、stylefloatを使用する必要があります
$ .support.optselected - ブラウザはデフォルトオプションを設定しません
$ .SUPPORT.GETSETATTRIBUTE - -GETSETATTRIBUTE BROWSERS間の互換性
$ .support.html5clone--タグのコピーの発行
$ .support.boxmodel-ボックスモデルをサポートするかどうか
$ .support.submitbubbles - バブブル
$ .support.changebubbles -bubble
$ .support.focusinbubbles - バブブル
$ .SUPPORT.DELETEEXPANDO - IIのDOM要素はcomコンポーネントであり、コンポーネントの属性を削除することはできません。
$ .SUPPORT.NOCLONEEVENT-要素をコピーするイベント
$ .SUPPORT.LELIABLEHIDDENOFFSETS-テーブル要素のTRにおけるTDの問題。
$ .support.boxsizing-ボックス化がサポートされているかどうか
$ .support.doesnotincludemargininbodyoffset - ボディにはマージンが含まれていません（問題ですか？）
$ .SUPPORT.PIXELPOSITION-スタイルによってピクセル値が返されるかどうかを取得します
$ .SUPPORT.BOXSIZINGRELIABLE ---ボックス化が利用可能です
$ .SUPPORT.RELIABLEMARGINRIGHT--クロムのマージンのバグ
$ .support.inlineblockneedslayout-- IEのレイアウトの問題
$ .support.shrinkwrapblocks-- IE6の幅と高さを自動的に拡大する問題
$ .SUPPORT.LEADINGWHITESPACEプロパティ
<html> <head> <Meta charset = "utf-8"/> <title>互換</title> </head> <body> <body> <body> <script type = "text/javascript"> window.l =（function（）{var el = document.createelement（ "div"）、index = 0; el.style.csStext = = 0; 「パディング：固定：0;幅：10％; border：message）{var spans.createlement（ "span"）; IE低いバージョンのif（） </script> IE678は、要素の前後にスペースを自動的にフィルターします。スペースはチャイルドノードに含まれていません。 el.innerhtml = "<div id =/" null/"> </div>"; l（el.childnodes.length）; </script> </body> </html>標準のブラウザはユーザー入力に付着し、ELには3つのノードが含まれている必要があります。
IE678には1つのノードのみがあり、このノードはDivです。
$ .support.checkonプロパティ
標準ブラウザーのチェックボックスのデフォルト値は「on」であり、 IE5678も「on」ですが、一部のWebキットでは、チェックボックスの値は「文字列」にデフォルトであり、現在のブラウザバージョンは非常に高く、基本的に問題はありません。 Chromeのバージョンが低い場合は、次のデモを使用して問題があるかどうかを確認できます。
<html> <head> <Meta charset = "utf-8"/> <title>互換</title> </head> <body> <body> <body> <script type = "text/javascript"> window.l =（function（）{var el = document.createelement（ "div"）、index = 0; el.style.csStext = = 0; 「パディング：ポジション：右：0;幅：10％; border：message = message.tostring（）{var span = createlement（ " } IEのcreate -elementを介して作成されます。 </script> <input id = "ck" type = 'checkbox'/> <script type = "text/javascript"> var el = document.getElementById（ "ck"）; //標準のブラウザには変更イベントがあります。 el.onchange = function（）{l（el.value）; l（ck.checked）} // ieのユニバーサルイベントプロパティチャンゲ。 el.onpropertychange = function（）{l（el.value）; l（ck.checked）} l（el.value）; </script> </body> </html>$ .support.tbodyプロパティ
IE6およびIE7で新しいテーブルを作成すると、Tody要素が自動的に作成されます。
作成されたテーブルにTRまたはTDを追加すると、すべてのブラウザが自動的にTBODYを作成します。
動的に作成されたテーブルとTRとTROBOSにTRを追加する場合、TBODはまったく出ません。すべてのブラウザは開発者の運用に従います（ブラウザの心は推測するのが本当に難しいです）
<html> <head> <Meta charset = "utf-8"/> <title>互換</title> </head> <body> <body> <body> <script type = "text/javascript"> window.l =（function（）{var el = document.createelement（ "div"）、index = 0; el.style.csStext = = 0; 「パディング：ポジション：右：0;幅：10％; border：message = message.tostring（）{var span = createlement（ " } IEの下位バージョンで作成された要素は、el.parentnode.toString（） </script> <div id = "tb"> </div> <div id = "tb2"> </div> <div id = "tb3"> </div> <script = "text/javascript"> var el = document.getElementByid（ "tb"）; el.innerhtml = "<table> </table>" // IE67は出力1になります。標準のブラウザはユーザー入力に従い、TODOBYを自動的に生成しないため、Tobdyの長さは0 l（el.getElementsBytagname（ "tbody"）。長さ）です。 </script> <script> var el = document.getElementById（ "tb2"）; el.innerhtml = "<table> <tr> 111 </tr> </table>"; //標準かIE67かどうかは、TODOBYタグL（el.getElementsByTagname（ "tbody"）。長さ）を自動的に生成します。 </script> <script> var el = document.getElementById（ "tb3"）; el.innerhtml = "<table> <td> 111 </td> </table>"; //標準かIE67かどうかは、TODOBYタグL（el.getElementsByTagname（ "tbody"）。長さ）を自動的に生成します。 </script> <script> var tb = document.createelement（ "table"）; var tr = document.createelement（ "tr"）; tr.innerhtml = "trrtrtr"; tb.AppendChild（TR）; document.getElementsByTagname（ "Body"）[0] .AppendChild（TB）; </script> </body> </html>コードが実行された後、テーブルに要素がない場合、ChromeがTodyを自動的に生成しないことがわかります。通常の執筆方法に従ってテーブルを書かない場合、それはこのようなものです
"<table><tr>111</tr></table>";
生成されたhtmlは、この「 111<table><tr></tr></table>“， jqで$(“<table><tr>111</tr></table>”)，そして生成されたhtmlもこのようなものです["111","<table><tr></tr></table>"]，基準...
IEの別の例外。 Todyはinnerhtmlを介して自動的に追加され、タグを間違ってネストすると、彼はあなたのことを気にしません。 AppendChildメソッドは、他のブラウザと同様にTodyを積極的に生成しません。
$ .support.htmlserialize
IE678ブラウザは、innerhtmlを介してリンクタグを動的に生成できません。新しいタグを作成して作成するには：
<html> <head> <Meta charset = "utf-8"/> <title>互換</title> </head> <body> <body> <body> <script type = "text/javascript"> window.l =（function（）{var el = document.createelement（ "div"）、index = 0; el.style.csStext = = 0; 「パディング：ポジション：右：0;幅：10％; border：message = message.tostring（）{var span = createlement（ " } IEの下位バージョンで作成された要素は、el.parentnode.toString（） </script> <div> bounce </div> <div id = "link"> </div> <script = "text/javascript"> var elink = document.getElementById（ "link"）; elink.innerhtml = '<link href = "http://cdn.bootcss.com/animate.css/3.3.0/animate.css" rel = "styleSheet">'; </script> </body> </html>ほとんどのリンクタグはinnerhtmlを介して生成できますが、innerhtmlを介してスクリプトタグを生成することは不可能です。
1 2Nextページ全文を読んでください