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

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

 *(すべて)全ての要素を選択

構文

全ての要素を選択
$(" * ")ver1.0〜

機能

セレクタに*を設定すると、すべての要素を選択します。選択される要素数が多くなると処理に負荷がかかるので注意しましょう。document内のすべてを選択するというより、特定内のすべてを選択するときなどに利用します。

解説

すべての要素を選択する

サンプル(all/01.html)を開いてbody内にdiv要素、span要素、b要素、bm要素とbutton要素があるのを確認してください。jQueryは以下の様に記述され、buttonをクリックするとセレクタに*を利用して全ての要素を選択し、cssメソッドを利用して赤枠を表示するようにしました。

$("button").click(function(){
	$("*").css("border","1px solid red");
});

その結果、buttonをクリックするとhtml要素やbody要素を含め全ての要素に赤枠が表示されます。

特定範囲で全ての要素を選択する

実際の利用ではページ内の全要素を選択するのではなく、特定範囲内の要素を選択することになるでしょう。
サンプル(all/02.html)を開いてbody内に2つのdiv要素があることを確認して下さい。2つのdiv要素にはそれぞれid属性(group_A,group_B)が設定されています。

<div id="group_A">
	<div>div</div>
	<span>span</span>
	<b>bold</b>
	<em>em</em>
</div>
<div id="group_B">
	<div>div</div>
	<span>span</span>
	<b>bold</b>
	<em>em</em>
</div>

続いてjQueryの以下の部分を確認して下さい。セレクタの「>(子要素)」を利用して、id属性がgroup_Bの要素の子要素すべてを選択しています。

$("button").click(function(){
	$("#group_B>*").css("border","1px solid red");
});

その結果、buttonをクリックするとid属性がgroup_Bの要素の子要素のみ赤枠が描かれます。