jQueryのソースコード解析メモ(5) jQuery.support_jquery

このうち、jQuery.browser は UserAgent に基づいて検出されたブラウザ情報を既に提供しています。 jQuery.support は機能検出を使用してブラウザの機能とバグをチェックします。

ドキュメントと同様に、まず最初に、このモジュールは非常に低レベルのコードであり、基本的に日常の開発で使用する必要はありませんが、プラグイン開発者にはさらに必要であることを説明します。プラグインは各ブラウザと互換性がある必要があるためです。まず、サポート モジュールによって提供されるブラウザ機能の検出を見てみましょう。次の結果は、Chrome 13 Dev で確認された結果です。ブラウザによってはここのメンバーが変わる可能性があります。 (追記: また IE について文句を言います。IE の属性のほとんどは IE に特有のものです)

• ajax: true。 XMLHttpRequest オブジェクトをサポートするかどうか。古いバージョンの IE はサポートしていないため、ActiveX を使用する必要があります。 * appendChecked: true。 * ボックスモデル: true。 W3C CSS ボックス モードに従ってレンダリングするかどうか。 IE6 および 7 の Quirks モードは False です。 *changeBubbles: true。変更イベントが DOM ツリーに沿ってバブルアップするかどうか。これは W3C DOM イベント モデルの要件ですが、IE は今のところ False です。 jQuery はこのバブリング機能をシミュレートします。 ※checkClone：未定義。ラジオボタンまたはチェックボックスを複製するときに選択状態を保持するかどうか。 createFragment キャッシュについて説明したときに前述したように、WebKit コアは保持されません。 * チェックオン: false。 CheckBox が指定されていない場合にデフォルトで On になるかどうか。 * cors: true。 XMLHttpRequest オブジェクトに withCredentials 属性があるかどうか。クロスドメインリクエストを実行できます。または、そのような属性はないが、クロスドメイン XHR リクエストを実装する他の方法がある場合も (Windows ガジェット経由など)、True になります。 * cssFloat: true。 cssFloat の CSS プロパティをサポートします。 IE は False で、styleFloat を使用します。 * deleteExpando: true。 * バブル内のフォーカス: false。 * getSetAttribute: true。 * hrefNormalized: true。 a 要素で getAttribute("href") を呼び出すときに、指定された元の URL を返すかどうか。 IE はフルパスを返します。たとえば、href="1.html" のリンクの場合、IE は http://..../1.html を取得します。 * htmlシリアル化: true。 innerHTMLを使用してリンク要素を挿入することは可能ですか。 IEは誤りです。 * inlineBlockNeedsLayout: false。ブロック要素がインラインブロックとして動作するには、それがインラインかつ hasLayout (IE の概念であり、ほとんどのレイアウト問題の原因) である必要がありますか。 IE8以下では問題が発生します。 * 先頭の空白: true。 innerHTML 属性がコードに従って厳密にレンダリングされるかどうか。 IE6～8では先頭の空白が削除されます。 (つまり、Markdown で書かれたこの記事は、改行が欠落しているため、IE では書式設定に問題があります) * noCloneChecked: true。 1.5.1 新しいプロパティ。ブラウザーがチェックされた拡張属性の複製を作成するかどうかを検出します。 IEは誤りです。 * noCloneEvent: true。コピーされた要素にイベント ハンドラー関数があるかどうか (つまり、イベント ハンドラーがコピーされるかどうか)。 IEは誤りです。 * 不透明度: true。 CSS プロパティの不透明度 (透明度) をサポートするかどうか。 IE は false です。アルファ フィルターを使用します。 * optDisabled: true。無効な選択要素内のオプション要素がデフォルトで無効になっているかどうか。 * optSelected: true。デフォルトで選択されているオプション要素の selected 属性が正常かどうか。 * radioValue: true。 * ReliableHiddenOffsets: true。テーブルのセルが display:none に設定されている場合でも、offsetWidth/Height は存在​​します。つまり、hidden は信頼性がありません。この問題が発生するのは IE8 のみです。バグ番号 4512 * ReliableMarginRight: true を参照してください。 div には明示的な幅がありますが、右マージンはありません。現時点では、コンテナに基づくマージン権の計算が正しくありません。古いバージョンの WebKit には問題があります。バグ番号 3333 を参照してください。 * scriptEval(): バージョン 1.5.1 より前は、これはプロパティでしたが、現在は関数になっています。標準の DOM 操作関数を使用して追加されたときに、インライン スクリプトが自動的に実行されるかどうかを確認します。 appendChild や createTextNode など。 IE は false です。テキストを使用してスクリプトを挿入します。 * シュリンクラップブロック: false。 hasLayout が設定されているときに要素が親ノードを展開するかどうか。これは IE6 にのみ当てはまります。 * スタイル: true。 DOM 属性を使用して要素のインライン スタイル属性にアクセスできるかどうか。たとえば、getAttribute("style") です。 cssText プロパティを使用する IE の場合は false です。 * submitBubbles: true。送信イベントが DOM ツリーをバブルアップするかどうか。 IE は false であり、jQuery はこのバブリング プロセスをシミュレートします。 * tbody: true。空の table 要素に tbody 要素を含めることができないかどうか。 HTML 仕様によれば、子要素はオプションです。ただし、IE は false なので、tbody 要素が自動的に挿入されます。

jQuery はブラウザーの機能を決定するためにいくつかの要素を作成します。次のように:

コードをコピー コードは次のとおりです:

var div = document.createElement ("div" );
div.setAttribute("className", "t");
div.innerHTML = " a ";
all = div.getElementsByTagName("*");
a = div.getElementsByTagName("a")[0];
var select = document.createElement("select");
opt = select .appendChild(document.createElement("option"));
input = div.getElementsByTagName("input")[0];
The div element is quite connotative. Including blank beginning, empty Table element, inline style, opacity, etc. There are no other notes besides reading the code and comments line by line:

Copy the code The code is as follows:

support = {
// IE will remove the leading spaces, so nodeType is not 3 (text)
leadingWhitespace: (div.firstChild.nodeType === 3),
// IE will automatically Insert tbody, so the length is different
tbody: !div.getElementsByName("tbody").length,
// IE does not allow link elements to be inserted in this way
htmlSerialize: !!div.getElementsByTagName(" link").length,
// If the style is obtained normally, this regular expression should pass normally
style: /top/.test(a.getAttribute("style")),
/ / The href attribute should be the original specified string, and IE will modify it to the absolute URL starting with http
hrefNormalized: (a.getAttribute("href") === "/a"),
// can be obtained opacity attribute. Regular expressions are used here to bypass WebKit [bug No. 5145](http://dev.jquery.com/ticket/5145)
// But this should be a problem in an early version. At least in Chrome 13, it is correct not to use regular expressions.
opacity: /^0.55$/.test(a.style.opacity),
// IE uses styleFloat
cssFloat: !!a.style.cssFloat,
// checkbox in div If no value is specified, see if the default value is on. WebKit is "". So my result is false
checkOn: (input.value === "on"),
// This select only has one option element, so when rendering, this option is selected by default. Selected should be true at this time.
optSelected: opt.selected,
submitBubbles: true,
changeBubbles: true,
focusinBubbles: false,
deleteExpando: true,
noCloneEvent: true,
inlineBlockNeedsLayout: false ,
shrinkWrapBlocks: false,
reliableMarginRight: true
};

Most of the following are step-by-step tests. The test of BoxModel is more interesting:

Copy code The code is as follows:

div.innerHTML = " "; // Start from scratch
div.style.width = div.style.paddingLeft = "1px";
body = document.createElement("body");
body.style.width = 0;
body.style.height = 0;
body.style.border = 0;
body.style.margin = 0; // Set all to 0
body.appendChild(div);
document.documentElement.insertBefore(body, document.documentElement.firstChild);
support.boxModel = div.offsetWidth === 2;
// At this time, the div is nested under the body. The body length, width and height, border and margin are all 0. So the offset of the div should be its own paddingLeft width. If it is incorrect, it means the box mode is incorrect.

Then it is worth noting the bubbling of events. The link to the technical reference article mentioned in the comments has expired. Please search for "Detecting event support without browser sniffing" yourself

Copy code The code is as follows:

/ /attachEvent is for IE, so only IE is actually checked here, and other browsers have the default values ​​set previously.
if(div.attachEvent) {
for(i = {
submit: 1,
change: 1
focusin: 1
}) {
eventName = "on " i;
isSupported = (eventName in div);
if(!isSupported) {
div.setAttribute(eventName, "return;");
isSupported = (typeof div[eventName] = == "function");
}
support[i "Bubbles"] = isSupported;
}
}

PS: Browser detection is a tangle , a very detailed task. This note is slowly being improved...

Added at 18:30: After testing with IE9, most of the above IE-related problems no longer exist. The following are the test results of IE9 Win7:

Copy code The code is as follows:

$.support
{
boxModel: true,
changeBubbles: true,
checkClone: ​​true,
checkOn: true,
cssFloat: true,
deleteExpando: true,
hrefNormalized: true,
htmlSerialize: true,
leadingWhitespace: true,
noCloneEvent: false,
opacity: true,
optSelected: false,
parentNode: true,
scriptEval: true ,
style: true,
submitBubbles: true,
tbody: true
}

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jquery_jquery に基づくリフレッシュ不要のページング テクノロジ次の記事：jquery_jquery に基づくリフレッシュ不要のページング テクノロジ

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved