0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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>

実行結果

Image from Gyazo

種類別

$(":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要素を全て取得してコンソールへ表示

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?