jqueryセレクターの取得方法まとめです。
事前準備
以下のhtmlを使用して説明します
HTMLファイル
<body>
<input type="text">
<input type="file">
<input type="password" value="aaa">
<label><input type="checkbox">チェックボックス</label>
<label><input type="radio" name="group" value="1">値1</label>
<label><input type="radio" name="group" value="2">値2</label>
<button>ボタン1</button>
<input type="button" value="ボタン2">
<input type="image">
<img sec="" width="24" height="24">
<select>
<option>選択肢1</option>
<option selected>選択肢2</option>
</select>
<select></select>
<input type="submit">
<input type="reset" disabled>
</body>
実行結果
種類別
$(":text") テキスト
テキストエリアを取得
<input type="text">
$(":file") ファイル
ファイルエリアを取得
<input type="file">
$(":password") パスワード
パスワードエリアを取得
<input type="password" value="aaa">
$(":checkbox") チェクボックス
チェックボックスを取得
<label><input type="checkbox">チェックボックス</label>
$(":radio") ラジオボタン
ラジオボタンを全て取得
<label><input type="radio" name="group" value="1">値1</label>
<label><input type="radio" name="group" value="2">値2</label>
$(":button") ボタン
ボタンを取得
※buttonタグでもinput type=buttonでも取得可能
<button>ボタン1</button>
<input type="button" value="ボタン2">
$(":image") イメージ
inputタグimageを取得
※imgタグは取得できません
<input type="image">
$(":reset") リセット
inputタグresetを取得
<input type="reset" disabled>
$(":submit") サブミット
buttonタグとinputタグsubmitを取得
<input type="submit">
<button>ボタン1</button>
buttonタグの初期属性はsubmitのため取得されます
外したい場合は属性type=buttonなどに変えましょう
要素の状態別
$(":selected") 選択中
selectフォームで選択中の要素を取得
※ここでは初期値の選択肢2
<option selected>選択肢2</option>
$(":checked") チェック中
checkボックス、radioボタン、selectフォームで選択された要素を取得
このままでは広い範囲が取得されるため
$(":checkbox:checked")などでフォームの条件を絞りましょう
IDとの組み合わせも可能です。
radioボタンは$("input[name=group]:checked")などで
グループを絞り選択された要素を取得ができます。
$(":focus") 入力待機(フォーカス)中
インプットフォームの中でフォーカス(入力待機)中の要素を取得
$(":visible") 表示中
HTMLで表示されている要素を取得
$(":hidden") 非表示中
HTMLで非表示(style="display:none")の要素を取得
$(":enabled") 有効な状態
有効な要素を選択
<input type="reset" disabled>以外全て
$(":disabled") 無効な状態
無効な要素を選択
<input type="reset" disabled>
中身の状態別
$(":empty") 中身が空
中身が空の要素を選択
<select></select>
$(":parent") 自身を親とした中身
自身が親になっている場合中身の要素を取得
例
$("select:parent")で
<option>選択肢1</option><option selected>選択肢2</option>を取得
$(":contains(〜)") 中身に指定文字列を含む
子孫の中身で指定の文字列(〜)を含む要素を取得
例
$(":contains(1)")で
直接文字列1を持っている以下3つの要素と
<option>選択肢1</option>
<button>ボタン1</button>
<label><input type="radio"name="group" value="1">値1</label>
包括して文字列1を持っている以下2つが取得できます
<html></html>
<body></body>
$(":has(〜)") 指定要素を含む
子孫として指定した要素(〜)を持つ要素を取得
例
$(":has(input)")で
直接inputを持っている以下3つの要素と
<label><input type="checkbox">チェックボックス</label>
<label><input type="radio" name="group" value="1">値1</label>
<label><input type="radio" name="group" value="2">値2</label>
包括してinputを持っている以下2つが取得できます
<html></html>
<body></body>
否定
$(":not(〜)") 指定した要素でない
指定した要素ではない要素を取得
例1
$("body :not(input)")で
bodyタグ内のinputではない要素を取得
例2
$("body :not(input):empty")で
input要素ではなく中身が空の以下2つを取得
<img sec="" width="24" height="24">
<select></select>
ヘッダー(h要素)
$(":header") hタグ
h要素を全て取得する
例
$(":header").each(function(){
console.log($(this).text());
});
でh要素を全て取得してコンソールへ表示