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

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

:hidden隠れている要素を選択

構文

隠れている要素を選択
$(":hidden")ver1.0〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてhiddenを設定すると隠れている要素を選択します。隠れている要素とは以下の通りです。

解説

cssでdisplayがnoneの要素を選択

サンプル(hidden/01.html)を開いてbody内にdiv要素が4つあることを確認してください。しかしclass属性がtestのdiv要素はcssの設定でdisplayをnoneにし、表示しないようにしています。

.test{
	display:none;
	background-color:#90C;
}

jQueryには以下の様に記述され、buttonをクリックすると:hiddenを利用して隠れている要素を選択し、showメソッドで表示するようにしています。

$("button").click(function(){
	$(":hidden").show();
})

結果として、buttonをクリックすると隠れていたdiv要素が表示されます。

高さが0px/透明度が0の要素を選択

サンプル(hidden/02.html)を開いてください。ページを開くと、すぐに2つのdiv要素がslideUpメソッドによって消えます。jQueryは以下の様に記述され、buttonをクリックすると隠れている要素を選択し、slideDownメソッドで表示するようにしています。

$("button").click(function(){
	$(":hidden").slideDown();
})

結果として、buttonをクリックすると隠れていたdiv要素が表示されます。

また透明度が0の要素も:hiddenで選択することができるのでfadeOutメソッドで消えている要素を、fadeInメソッドで表示するサンプルも作成しました。サンプル(hidden/03.html)を開いてください。body内の構成はサンプルhidden/02.htmlと同じで、jQueryもslideUpがfadeOutに、slideDownがfadeInに置き換わっているだけです。

フォームでtypeがhiddenの要素を選択

サンプル(hidden/04.html)を開いてbody内のform内でtypeがhiddenのinput要素があることを確認してください。name属性はtestでvalue属性はhelloとなっています。

<form>
	<input type="hidden" name="test" value="hello">
	<button>CLICK</button>
</form>

jQueryは以下の様になっています。セレクタには:hidden単独ではなく複数のセレクタ(and)を利用し、input要素で隠れているものを選択するようにしました。選択した要素はattrメソッドを利用してvalueの値を取得し、alertで表示するようにしています。

$("button").click(function(){
	var str = $("input:hidden").attr("value");
	alert(str);
})

結果として、buttonをクリックするとアラートで「hello」と表示されます。

関連項目

見えている要素を選択したい場合は:visibleを利用します。

メモ

高速化を求めるなら

:hiddenはcssには存在しないセレクタなので処理が少し重いそうです。ですので少しでも処理を軽くしたい場合はトラバースのfilterメソッドを利用して下さいとのことです。
→参考:本家サイト:hiddenのAdditional Notesより

$("div:hidden")//---これだと処理が少し重い
$("div").filter(":hidden")//---このほうが処理が軽い

:hiddenはフォームにも利用できるので、その場合は他のフォームフィルタのように以下の様に記述しても良いのかな?→参考:本家サイト:checkboxのAdditional Notesより

$("input[type='hidden']")

実際にサンプルを作成して確認したら機能しました。サンプル(hidden/test01.html)を開いて、セレクタの部分以外はhidden/04.htmlと同じ事を確認して下さい。実際にbuttonをクリックするとhidden/04.htmlと同じようにアラートで「」「hello」と表示され、機能することが確認できます。