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

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

:root最上位の要素を選択

構文

最上位の要素を選択
$(":root")ver1.9〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてrootを設定すると最上位の要素、つまりhtml要素を選択します。

解説

最上位の要素を選択します

サンプル(root/01.html)を開いてbody内にはbutton要素しかないことを確認してください。jQueryは以下の様に記述され、:rootを利用して最上位の要素を取得します。そして後に[0]を付けることでjQueryオブジェクトからDOM要素を取得し、これにjavaScriptのnodeNameプロパティを利用して要素名を取得しています。取得した要素名はアラートで表示するようにしました。

$("button").click(function(){
	var test = $(":root")[0].nodeName;
	alert(test);
});

結果として、buttonをクリックすると最上位の要素名として「HTML」が表示されます。

関連項目

サンプルで利用した[]を利用してjQueryオブジェクトからDOM要素を取得するテクニックは、使い方の「jQueryとDOM要素」で説明しています。

メモ

:rootセレクタはcss3にも存在しますが、どのような用途に利用するのかよく分かりません...。将来的にはhtml環境外でのjQuery利用が考えられているのでしょうか?でなければ、常にhtml要素を指してしまう:rootセレクタの必要性がありませんものね。