10
12

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 5 years have passed since last update.

jQueryセレクタについてまとめてみた

Last updated at Posted at 2016-07-09

##jQueryセレクタとは
HTMLドキュメントから特定の要素を取得するために用いる記法であり、
$("セレクター")のように記述する。

##セレクタの種類
いくつか実際のセレクターを紹介してきます。

###基本系
$('*'); // 全ての要素を選択する。
$('#id'); // 指定されたidを持つ要素を選択する。
$('element'); // 指定されたタグ名の要素を選択する。
$('.class'); // 指定されたクラスを持つ要素を選択する。

###階層関係指定系

#####親子関係
$("#father > .child"); // 親(#parent)を持つ子(.child)を選択する

#####先祖子孫関係
$("#grandFather .grandChild"); // 先祖(#grandFather)を先祖に持つ(.grandChild)を選択する

#####兄弟関係
$('prev + next'); // liで考えてprev(li)のnext(次のli)
$('prev ~ siblings'); // liで考えてprev(li)のsiblings(以降のli)

###フィルタ
フィルタとはその名の通り、取得した要素を要素の順序や属性の値などによって絞り込むものです。
$('element:filter')のように記述します。

#####フィルタ(基本)
$('ul li:first'); // 先頭の要素を選択する。
$('ul li:last'); // 末尾の要素を選択する。
$('ul li:even'); // 偶数番の要素を選択する。
$('ul li:odd'); // 奇数番の要素を選択する。
$('ul li:eq(index)'); // インデックス指定した要素を選択する。一番目の要素は0となるので注意
$('ul li:gt(index)'); // 指定したインデックスより後の要素を選択する。
$('ul li:lt(index)'); // 指定したインデックスより前の要素を選択する。

#####フィルタ(コンテンツ)
$('ul li:contains(text)'); // 指定した文字列を含む要素を選択する。
$('ul li:empty'); // 空要素を選択する。
$('p:has(a)'); // 指定したセレクター要素(a)を子孫に持つ要素(p)を選択する。

#####フィルタ(属性)
$('a[target = "value"]'); // 属性がvalueに等しい要素を取得
$('a[target != "value"]'); // 属性がvalueに等しくない要素を取得
$('a[target ^= "value"]'); // 属性がvalueで始まる要素を取得
$('a[target $= "value"]'); // 属性がvalueで終わる要素を取得
$('a[target *= "value"]'); // 属性がvalueを含む要素を取得

#####フィルタ(フォーム)
$('#form :input');   // type="input"のinput要素を取得
$('#form :button'); // type="button"のinput要素を取得
$('#form :checkbox'); // type="checkbox"のinput要素を取得
$('#form :radio');   // type="radio"のinput要素を取得
$('#form :password'); // type="password"のinput要素を取得

// ===== 状態
$('#form :enabled');        // フォーム要素が利用可能状態にある要素を取得
$('#form :disabled');	    // フォーム要素が利用不可状態にある要素を取得
$('#form :hidden');	        // 非表示状態にある要素を取得
$('#form :visible');	    // 表示状態にある要素を取得
$('#form :animeted');	    // アニメーション中状態にある要素を取得
$('#form :checked');	    // radioやcheckboxのチェック状態にある要素を取得
$('#form option:selected'); // 選択boxの選択状態にある要素を取得   

##最後に
jQueryに初めて触れたので、復習も兼ねて機能の一部をまとめてみました、間違っている箇所があったらゴメンなさい。  
「簡単なコードでJavascriptを実行できる」という記事をよく見かけますが、本当に覚えやすく書きやすいコードだと実感しました。
処理速度を意識したセレクタの記法などもあるようなので、次回の記事はその辺をまとめてみたいと思います。
修正や更新は随時行っていきたいと思います。

10
12
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
10
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?