連載
» 2009年10月09日 00時00分 公開

連載:jQuery逆引きリファレンス:第1回 セレクタ編 (24/25)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 フォーム要素(<input>、<select>要素など)やヘッダ要素を取り出すためのフィルタもあります。以下に、関連するフィルタをまとめておきます。

フィルタ 概要
:input すべての<input>、<select>、<textarea>、<button>要素を取得
:text すべてのテキストボックスを取得
:password すべてのパスワード入力ボックスを取得
:radio すべてのラジオボタンを取得
:checkbox すべてのチェックボックスを取得
:submit すべてのサブミット・ボタンを取得
:image すべての画像ボタンを取得
:reset すべてのリセット・ボタンを取得
:button すべてのボタン(<button>、<input type="button">要素)を取得
:file すべてのファイル選択ボックスを取得
:hidden すべての隠しフィールドと不可視状態にある要素を取得(*
:header <h1>、<h2>……などのヘッダ要素を取得
フォーム、ヘッダ関連のフィルタ
* :hiddenフィルタは隠しフィールド(<input type="hidden">)だけではなく、非表示状態になっている要素にもマッチします。注意してください。

 以下は、個々のフォーム要素に対して、それぞれスタイルを適用する例です。

<script type="text/javascript">

$(function() {
  $(':header').css('text-decoration', 'underline');
  $(':text').css('background-color', 'Red');
  $(':password').css('background-color', 'Purple');
  $(':radio').css('background-color', 'Green');
  $(':checkbox').css('background-color', 'Olive');
  $(':file').css('background-color', 'Silver');
  $(':button').css('background-color', 'Blue');
  $(':submit').css('background-color', 'Teal');
  $(':reset').css('background-color', 'White');
});

</script>

……中略……

<h1>さまざまなフォーム要素</h1>
<form>
  <input type="text" /><br />
  <input type="password" /><br />
  <input type="radio" /><br />
  <input type="checkbox" /><br />
  <input type="file" /><br />
  <input type="button" value="ボタン" /><br />
  <input type="submit" value="送信" /><br />
  <input type="reset" value="リセット" />
</form>

リスト026 フォーム要素やヘッダ要素を取得する(Input.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト026の実行結果

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。