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を実行できる」という記事をよく見かけますが、本当に覚えやすく書きやすいコードだと実感しました。
処理速度を意識したセレクタの記法などもあるようなので、次回の記事はその辺をまとめてみたいと思います。
修正や更新は随時行っていきたいと思います。