種類	記述方法	説明
IDセレクタ	$( '#taget' ) $( '#' + 変数 )	id='taget' の物をセレクトする id名が変数の場合は、文字連結でセレクトします
クラスセレクタ	$( '.taget' ) $( '.' + 変数 )	class='taget' の物をセレクトするクラス名が変数の場合は、文字連結でセレクトします
グループセレクタ	$('#taget1 , #taget2')	ID名が taget1 又は taget2 の物を選択同じ処理を2つ書かなくて済むことが特徴です。
nameセレクタ	$('[name=taget]’ ) 配列の場合は $('[name="taget[]"]’ )	name='taget' やname='taget[]' の物をセレクトするインプットやセクト要素で使われるname属性です。
チェック要素	$('XX:checked’)	チェックボックスやラジオボックスでチェックされた物を選択します。 xxは、ID,クラス,nameセレクタ選択されてない場合は、val値は null が返されます。
セレクト要素	$('xx option:selected')	セレクトの下位にあるoptionで選択された物を抽出します。 xx、ID,クラス,nameセレクタ選択されてない場合は、val値は null が返されます。
現在要素	$(this)	クリックイベント等で要素を特定した場合、現在アクティブな要素として利用
画面	$(window)	ウインドウ操作を行う時に使われる特殊なセレクタです。
タグセレクタ	$('form')	formタグをサブミットする時などに利用するセレクタです。

3.イベント発生の検知

イベント発生には下記の様な物があります。

イベント種類

説明

マウスON

hover(f1,f2)

HTML要素にマウスが乗った時と、外れた時のイベントを検知してfuncで処理します。

マウスDown

mousedown(func)

HTML要素のクリック時のマウスがダウン時点のイベントを検知してfuncで処理します。

オートコンプリート機能（自動補完）を無効化する時に利用できます。

クリック

click(func)

HTML要素がクリックされた時のイベントを検知してfuncで処理します。

チェンジ

change(func)

<input>タグからカーソルが出た時点のイベントを検知してfuncで処理します。

郵便番号から住所を検索する時に利用すると便利です。

サブミット

submit(func)

フォームのサブミット・イベントを検知してfuncで処理します。

return false;で戻す事により、サブミットをキャンセルする事ができます。

リサイズ

resize(func)

ウィンドウ・サイズが変更されたイベントを検知してfuncで処理します。

4.処理系メソッド

操作系の主要なメソッドは下記になります。

メソッド	説明
.text()	HTMLタグの「テキスト」を取得したり、設定する事ができるjQueryメソッドです。
.html()	HTMLタグの「テキスト」を取得したり、設定する事ができるjQueryメソッドです。 text()は複数行が書けませんが、このメソッドは<br>が使えるので複数行を書き込むことができます。
.val()	HTMLタグの「Value属性」を取得したり、設定することができるメソッドです。
.css()	HTMLタグの「style属性(CSS)」を取得したり、書き換えるjQueryメソッドです。
.attr()	HTMLタグの「属性値」を取得したり、書き換えるjQueryメソッドです。 .attr()と.prop()の違いは、.attr()メソッドの事例で解説しています。
.prop()
.click()	プログラムで「HTML要素をクリック」するjQueryメソッドです。
.submit()	プログラムで「フォームをサブミット」させるjQueryメソッドです。

5.階層構造のセレクトと要素の追加/削除

ここでは現在要素の親子、兄弟をセレクトする方法と、階層への要素追加/削除を解説しています。

詳細は階層構造の要素セレクトと操作を参照してください。

6.要素サイズを取得するメソッド

HTML要素は、下図の様に[margin]、[padding]、[bordur幅]により表示されるサイズが決定されます。

詳細は要素サイズ取得メソッドを参照してください。

7.要素を繰り返し処理するメソッド

jQueryの処理の基本形は①セレクタの ②何を、③こうしなさいになります。

しかし下記の様なチェックボックスでチェックされた要素を探す場合①のセレクト要素 '.input_class' が複数あります。

[HTML]

<div class='check_box'>必要な項目にチェックして下さい<br>
	<label><input type='checkbox'  class='input_class' name='input_name' value='1' >&nbsp;項目1</label><br>
	<label><input type='checkbox'  class='input_class' name='input_name' value='2' >&nbsp;項目2</label><br>
	<label><input type='checkbox'  class='input_class' name='input_name' value='3' >&nbsp;項目3</label><br>
	<button class='check'>選択確認</button>
</div>

この様なケースの場合に、セレクト要素を1個ずつ呼び出して処理するループメソッドがあります。

メソッド	説明
each(func)	セレクト要素が複数存在する場合、それらを1個ずつ呼び出してfuncで処理をするjQueryメソッドです。
map(func)	セレクト要素が複数存在する場合、それらを1個ずつfuncで処理し結果を jQueryオブジェクトとして返すjQueryメソッドです。

■上記がどの様に違うかはリンク先を見て下さい。

8.アニメーション系メソッド

アニメーションには下記の様な物があります。

メソッド	解説
.show().hide()	複数要素を切替える時に利用されるjQueryメソッドです。複数画像を切替えるアニメーションに利用されます。
.toggle()	要素を開閉させる（トグル）時に利用するjQueryメソッドです。コンテンツの開閉に利用されます。
.slideToggle()	要素を上から開き、下から閉じる時に利用するjQueryメソッドです。親メニュをクリックしたら子メニュが開く挙動に利用されます。
.toggleClass()	セレクタに指定クラスのCSSを追加し、外したりする事により図形を変化させるjQueryメソッドです。スイッチのON/OFF等の表現に利用されます。
.fadeTo()	CSSのopacity(不透明度)プロパティをフェード処理で変化させるjQueryメソッドです。カーソルがONした時に透明度を変えたい時に利用します。
.effect()	要素に表示効果(エフェクト)を与える時に利用するjQueryメソッドです。 ①エフェクトの [transfer] 効果を利用する。 ②要素を一定間隔で振動させる。等に利用されます。
.animate()	数値で指定できるCSSの値を変更して、アニメーションを表現するjQueryメソッドです。図形や文字を拡大したり、移動させたり、不透明度を変化させて消去する等のアニメーションができます。