デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.boxModelボックスモデルに対応しているかチェック

構文

ボックスモデルに対応しているかチェック返値:true/false
jQuery.boxModelver1.0〜
※ver1.9で廃止されました

機能

jQuery.boxModelプロパティは利用しているブラウザがW3Cに準拠したCSSのボックスモデルに対応しているかをチェックします。対応している場合はtrue、していない場合はfalseを返します。

このプロパティはすでに削除されており利用することはできません。
また以下の解説にはjQuery.supportプロパティの利用について説明していますが、こちらもv1.10で削除されたため利用できません

解説

もはや廃止された?

サンプル(boxModel/01.html)を開いてbody内にbutton要素しかないことを確認して下さい。jQueryは以下の様に記述されbuttonがクリックされたらjQuery.boxModelプロパティの値をアラートで表示します。

$("button").click(function(){
	alert($.boxModel);
});

結果として、buttonをクリックするとアラートで「undefined」と表示されます。本来であればtrueかfalseを返さなくてはならないのですが...。すでに廃止されてしまったのでしょうか?

jQuery.supportプロパティを利用する

現在ではjQuery.boxModelプロパティの代わりにjQuery.supportプロパティのboxModelプロパティを利用します。サンプル(boxModel/02.html)を開いて、ほとんどboxModel/01.htmlと同じ事を確認して下さい。異なるのは以下の様にjQuery.supportプロパティのboxModelプロパティを利用している点だけです。

$("button").click(function(){
	alert($.support.boxModel);
});

結果として、buttonをクリックすると現在お使いのブラウザがボックスモデルに対応していればtrue、していなければfalseをアラートで表示します。

$.support.boxModelも廃止されました(2013.9追記)

v1.10.0で$.support.boxModelも廃止されました。もはやjQueryはボックスモデルに対応していないブラウザをサポートしていません。

サンプル(boxModel/03.html)を開いてbody内の構成やjQueryはboxModel/02.htmlと同じ事を確認して下さい。しかしjQueryのリンクが以下の様にv1.10に変更されています。

<script type="text/javascript" src="../../../css_js/jquery-1.10.2.min.js"></script>

結果としてbuttonをクリックしても「undefined」と表示され機能しないことが確認できます。

メモ

ドキュメントタイプを忘れずに

サンプルを作成している時にjQuery.supportプロパティのboxModelプロパティがtrueにならずfalseを返していたので変だと思って調べたのですが、htmlファイルに以下のドキュメントタイプを書き忘れていました。

<!DOCTYPE html>

ドキュメントタイプを削除したサンプルを用意したので確認してみて下さい。boxModel/02.htmlと異なりbuttonをクリックすると「false」とアラートで表示されると思います。
→参考:サンプル(boxModel/test01.html