[jquery]セレクタ(要素・値)取得

概要

jqueryでHTML要素をセレクトするときにいろいろな書き方例を記載します。
要素を取得した後に値を取ったり、セットしたり、cssをつけたり、イベントを設定…etc で使います。
jquery便利ですが、要素を指定するだけでもいろいろな方法があるので、忘れた～っとなることがよくあったりします😓

要素を取得する

idで取得する

$("#hoge")

王道中の王道だと思います。
idを指定しているHTML要素を取得できます。

classで取得する

$(".hoge")

同じクラスがついてる要素を取得できます。
複数タグに対して一斉に処理するとか、同じイベントをつけるとかするときに便利です。

タグ名を使う

spanタグ全体に

$("span")

spanタグ全体を取得する。

divタグ全体に

$("div")

divタグ全体を取得する。
お察しの通り同じようにしてbodyなどもタグを指定すると取得できます。

フォームのインプット取得

$("input")

フォームのinputタグを取得できます。
inputタグにid属性やclass属性を指定して、それをセレクタとして使うという方法もあります。

<input type="text" name="user_name" id="user_name" >

上記のようなテキストボックスがあった時に下記のようにする方法ですね。

$("#user_name")

セレクトボックスの値を取得する

$("select option:selected")

セレクトボックスでセレクトしてる値を取得します。

$("#hoge option:selected")

こうするとid=hogeで指定しているセレクトボックスのoption要素が取得できますね。

属性を使う

$("[type='text']")

のように属性を使って指定することができます。

$("[name='user_name']")

みたいにフォームで使ったりします。

findで探す

特殊な感じですが、要素の子要素を探せます。

$("#hoge").find("#fuga")

上記はid=hogeで指定している子要素のid=fugaを取ってきてる感じですね。

<div id="hoge">
  <input type="text" id="fuga" name="fuga" />
</div>

parentで親要素を取得する

$("#fuga").parent()

上記で親要素を取得できます。親を取得した後に子要素をfindしたりもできます。

値の取得

要素を取ってきた後に値を取得するときの書き方です。

テキストを取得する

$("#hoge").text()

タグの間のテキストを取得することができます。

HTMLを取得する

$("#hoge").html()

要素のHTMLを取得することができます。

フォーム値を取得する

$("#hoge").val()

テキストボックスなどのフォーム値を取得できます。

まとめ

要素のセレクトだけでも何パターンも取り方があるので使い勝手がいいですよね。
作った人ゴイスーですね。