jQuery　セレクターの取得方法まとめ（フォーム部品/状態/中身）

jqueryセレクターの取得方法まとめです。

#事前準備
以下のhtmlを使用して説明します

##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>
```

##実行結果
[![Image from Gyazo](https://i.gyazo.com/5cde0e1931bcee85e68fab794267ac2d.png)](https://gyazo.com/5cde0e1931bcee85e68fab794267ac2d)

#種類別

##$(":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フォームで選択中の要素を取得
※ここでは初期値の選択肢２

\<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)")で

直接文字列１を持っている以下３つの要素と
\<option>選択肢1\</option>
\<button>ボタン1\</button>
\<label>\<input type="radio"name="group" value="1">値1\</label>

包括して文字列１を持っている以下２つが取得できます
\<html>\</html>
\<body>\</body>

##$(":has(〜)")　指定要素を含む
子孫として指定した要素（〜）を持つ要素を取得

例
$(":has(input)")で
直接inputを持っている以下３つの要素と
\<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を持っている以下２つが取得できます
\<html>\</html>
\<body>\</body>

#否定　
##$(":not(〜)")　指定した要素でない
指定した要素ではない要素を取得

例１
$("body :not(input)")で
bodyタグ内のinputではない要素を取得

例２
$("body :not(input):empty")で
input要素ではなく中身が空の以下２つを取得

\<img sec="" width="24" height="24">
\<select>\</select>

#ヘッダー（h要素）
##$(":header")　hタグ
h要素を全て取得する

例
$(":header").each(function(){
console.log($(this).text());
});
でh要素を全て取得してコンソールへ表示