jQueryの命令を記述する（イベントと処理）
jQueryの命令は、大きく、イベント命令と処理命令に分けることができ、多くはこの2つが組み合わさって一つの命令を構成しています。
例えば、「何かの操作をしたとき（ボタンクリック、マウスカーソルが上にetc）、文字色を赤にする」という命令であれば、何かの操作に当たる命令がイベント命令で、文字を赤にが処理命令となります。
イベント命令
イベント命令の一つとして、clickを考えてみます。
//jsファイル内
$(function(){
$("button").click(function(){
//ボタンが押された時の処理
});
});
click命令は、ボタンが押された時に、処理を行うというイベント命令です。
何もbuttonに限らず、p、img、aなど、クリック対象のセレクタ（selector）はなんだって構いません。
- IDがtestのpをクリック対象として使いたいなら、$(“p#test”).click(function(){}); （IDは#）
- classがtestのaをクリック対象として使いたいなら、$(“a.test”).click(function(){}); （classは.）
- srcがtest.gifのimgをクリック対象として使いたいなら、$(“img[src='test.gif']“).click(function(){}); （属性は[]）
とします。
p要素に対して、#IDを付加すると、IDセレクタとしてボタンとして使用することができます。ただし、このままではただの文字としてスルーしてしまう可能性が大なので、文字の上にカーソルがのった時に指のマークに切り替えるスタイルシート（cursor）を使用します。
/*--cssファイル内*/
p#test {
cursor:pointer;
}
imgのsrcは要素ではなく、属性ですので、[]を使って指定します。ダブルクォーテーション(“)の中にダブルクォーテーションを入れることはできませんので、シングルクォーテーション(‘)でくくります。jsにおいてシングルクオートとダブルクオートはどちらを使ってもよいとされていますが、HTMLではダブルクオートでないと駄目なのでシングルクオートを使う人が多いです。
また、クオート同士の境界が不明瞭になってしまったときは、エスケープシーケンスと呼ばれるバックスラッシュを付加して記述する必要があります。
button以外をボタンのようにイベント発火要素として使用する場合。
aをボタンとして使う場合、なにもしないとそのままリンク先へ飛んでしまってボタンとしての意味がないので、return false;を記述します。returnはfunctionの返り値を返す命令で、falseだから偽が返され実行がとまるということ。
//jsファイル内
$(function(){
$("a").click(function(){
//ボタンが押された時の処理
return false;
});
});
jQueryの使い方
click以外にも、幾つかのイベント命令があります。
| イベント命令 | 処理内容 |
|---|---|
| ready() | ページ読み込み完了時 |
| click() | クリックした時 |
| dblclick() | ダブルクリックした時 |
| mousedown() | マウスボタンが押された時 |
| mouseup() | マウスボタンが離された時 |
| toggle() | クリック時（交互） |
| mouseover() | マウスオーバー時 |
| mouseout() | マウスアウト時 |
| one(“イベント”) | 一度のみ発生 |
| unbind(“イベント”) | イベントの取り消し |
| live(“イベント”) | 将来追加される要素 |
| focus() | フォーカス時 |
| blur() | フォーカスアウト時 |
| change() | フォーム入力変更時 |
| submit() | フォーム送信ボタンクリック時 |
| hover() | マウスオーバー/アウト時 |
| scroll() | スクロール処理時 |
| bind(“イベント”) | 指定したイベント発生時 |
mousedownとmouseoverはこんがらがりますね。
mousedownの方は、マウスのボタンが押された時、つまり、ドラッグアンドドロップでファイルを移動するときとかにマウスを押したまま移動するはず、これがmousedownの状態です。（mousedown+mouseup=clickという感じです）
mouseoverは、背景画像を切り替えるボタンの作成時によく使われます。マウスが画像に乗っかっているときが、mouseover状態です。
(“イベント”)となっているのは、イベント命令の中にイベント命令を記述するタイプの命令です。
イベント命令には必ず、functionという記述が入ります。このfunctionの数だけ、最後の});が必要なので、くくり忘れには十分気をつけましょう。
処理命令（アニメーション以外）
「イベント命令のfunction内」に記述する命令です。処理命令は、HTMLやCSSを変えるものとアニメーション命令に分けることができます。ここではアニメーション以外について触れます。
最も基本的な命令、text()を例に考えます。
$(“セレクタ”).text();
は、セレクタ内のテキストを取得します。()内にテキストを入れるとテキストを変更することが出来ます。
//jsファイル内
//ボタンをクリックしたら、p内のテキストを取得
$(function(){
$("button").click(function(){
$("p").text();
});
});
//ボタンをクリックしたら、p内のテキストを変更
$(function(){
$("button").click(function(){
$("p").text("かきくけこ");
});
});
//ボタンをクリックしたら、p#a1内のテキストを取得し、p#a2のテキストを変更
$(function(){
$("button").click(function(){
$("p#a2").text($('p#a1').text());
});
});
<--HTML--> <p id="a1">あいうえお</p> <p id="a2">かきくけこ</p> <button>切り替え</button>
あいうえお
かきくけこ
命令の最後には「;」をつけるのを忘れないようにしましょう。
他の命令も基本は同じです。同じセレクタに対して、別の命令を続けて指定したいときは、命令と命令を（ドット）でつなげるメソッドチェーンいう記述方法を使用します。
| 処理命令 | 処理内容 |
|---|---|
| text() | テキストの取得と変更 |
| html() | htmlの取得と変更 |
| prepend(..) | htmlを挿入（要素内先頭） |
| append(..) | htmlを挿入（要素内最後） |
| before(..) | htmlを挿入（要素の前） |
| after(..) | htmlを挿入（要素の後） |
| prependTo(..) | htmlの移動（要素内先頭） |
| appendTo(..) | htmlの移動（要素内最後） |
| insertBefore(..) | htmlの移動（要素の前） |
| insertAfter(..) | htmlの移動（要素の後） |
| wrap(..) | 要素を他の要素で包む |
| wrapAll(..) | 要素をまとめて他の要素で包む |
| wrapInner(..) | 子要素・テキストを他の要素で包む |
| replace(..) | 要素を他の要素に置き換える |
| remove(..) | 要素を削除する |
| attr() | 属性の値の取得と変更 |
| removeAttr(..) | 属性の削除 |
| addClass(..) | クラスの追加 |
| removeClass(..) | クラスの削除 |
| css() | CSSの取得と変更 |
なお、CSS()を使ったスタイルシートの変更は、簡単なんですが、addClassでのクラス単位の変更のほうが望ましいようです（汎用性）。
命令で大文字のアルファベットは必ず大文字を使いましょう。appendやhtml命令でなかみにタグをいれるときは、シングルクォーテーションを使うのも忘れずに。（ついダブルにしたままにしがち）
こういった処理命令は、実際に使わないといまいち理解しづらいと思うので、今の時点で全部理解する必要はありません。くわしくは実践で。
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>
