とかく忘れがちな jQuery メモ(1) :: Selectors編
jQuery の 超基本的メモ
最近、jQuery を触りだしたので……備忘録的なメモです。
ぶっちゃけ、jQuery API 1.4.4 日本語リファレンス - StackTraceみたほうが分かりやすいですよ。
jQueryの書き方
$(function(){ // jQuery のスクリプト $('セレクタ').jQuery API名(引数) });
jQueryのお約束
- $(function(){ 実行する jQueryスクリプト }); は決まりごと（…のようなもの）
セレクタ
セレクタのお約束
- 「' '（シングルクオーテーション）」か「" "（ダブルクオーテーション）」で囲むよ
Basics（基本セレクタ）
| 簡易例 | 選択される場所／備考 | |
| #id | $('#id') | #id名を持つ箇所すべて |
| <タグ名> | $('p') | すべて |
| .class | $('.class') | .class名を持つ箇所すべて |
| .class.class | $('.class1.class2') | 複数の.class名を持つ箇所すべて |
| * | $('*') | すべての箇所 |
| selector1,selector2,… | $('#id1,#id2') | , で繋いだ複数の箇所 |
Hierarchy（階層セレクタ）
| 簡易例 | 選択される場所／備考 | |
| ancestor descendant | $('#wrap p') | ancestor に囲まれている descendant が選択／半角スペースで区切る |
| parent > child | $('#content > *') | parent の直下にある child が選択／ > で区切る |
| prev + next | $('#content + *') | prev の直後にある next が選択／ + で区切る |
| prev ~ siblings | $('#content ~ p') | prev 以降にある siblings が選択／ ~ で区切る |
フィルタ
フィルタのお約束
- セレクタ の絞り込みに使うよ
- :（半角コロン）以降がフィルタの指定だよ
Basic Filters（基本フィルタ）
| 簡易例 | 選択される場所／備考 | |
| :first | $('li:first') | 要素の最初（1つだけ）を選択 |
| :last | $('li:last') | 要素の最後（１つだけ）を選択 |
| :not(Selector) | $('li:not(:first, :last)') | 指定した要素を除いた要素を選択 |
| :even | $('li:even') | 偶数番目の要素を選択 |
| :odd | $('li:odd') | 奇数番目の要素を選択 |
| :eq(index) | $('li:eq(1)') | 指定したindexの要素を選択 |
| :gt(index) | $('li:gt(2)') | 指定したindexの要素より後ろの要素を選択 |
| :lt(index) | $('li:lt(3)') | 指定したindexの要素より前の要素を選択 |
| :header | $(':header') | h1 や h2 などの見出し要素を選択 |
| :animated | $(':animated') | アニメーション中の要素を選択 |
クリスマスプレゼントは ｊQuery 本で決まりだね！
