読者です 読者をやめる 読者になる 読者になる

kwsktr's study log

kwsktr のおべんきょログ

とかく忘れがちな jQuery メモ(1) :: Selectors編

jQuery/Javascript

jQuery の 超基本的メモ

最近、jQuery を触りだしたので……備忘録的なメモです。
ぶっちゃけ、jQuery API 1.4.4 日本語リファレンス - StackTraceみたほうが分かりやすいですよ。


参考 :: jQuery 1.8 API Cheat Sheet

jQueryの書き方

$(function(){

 // jQuery のスクリプト
	$('セレクタ').jQuery API名(引数)
 
});

jQueryのお約束

  1. $(function(){ 実行する jQueryスクリプト }); は決まりごと(…のようなもの)

セレクタ

セレクタのお約束

  1. 「' '(シングルクオーテーション)」か「" "(ダブルクオーテーション)」で囲むよ
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 が選択/ ~ で区切る

フィルタ

フィルタのお約束

  1. セレクタ の絞り込みに使うよ
  2. :(半角コロン)以降がフィルタの指定だよ
Basic Filters(基本フィルタ)
簡易例 選択される場所/備考
:first $('li:first') 要素の最初(1つだけ)を選択
:last $('li:last') 要素の最後(1つだけ)を選択
: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') アニメーション中の要素を選択


 
クリスマスプレゼントは jQuery 本で決まりだね!