jQuery入門というシリーズ – 第三回
お久しぶりのjQuery入門シリーズです。
間が空いてしまったので忘れちゃった人は第一回、第二回を読んでね。
はい。ではまずこちらをプレゼント。
<p id="test">touch me!</p>
<script>
$(function(){
});
</script>
これを貼っといてください。準備完了です。
では今回の内容に入ります。
タイミングを指示する「イベント」
jQueryでは処理を行うタイミングを指定できます。
マウスが乗っかったら、マウスが離れたら、これくらいスクロールされたら…などなど。
これらをイベントと呼びます。
では次のスクリプトを定型文の中にコピペしてみましょう。
$('#test').mouseover(function(){
$('#test').text('mouseoverしたよ！');
});
touch me!の文字にマウスを乗っけてみてください。
文字が変わりましたね？
.mouseover()の部分が、「マウスが乗っかったら」という意味のイベントです。
イベントの()の中にはfunction(){ 処理内容 }という形でいろいろ書きます。
今は、#testのtextを「mouseoverしたよ！」に変えるという処理内容を書きました。
では、続けてこれも書いてみましょう。
$('#test').mouseout(function(){
$('#test').text('mouseoutしたよ！');
});
$('#test').click(function(){
$('#test').text('clickしたよ！');
});
意味わかりそうですね！
- マウスオーバーしたら「mouseoverしたよ！」に変わる
- マウスがはずれたら「mouseoutしたよ！」に変わる
- クリックしたら「clickしたよ！」に変わる
という3つのイベントを使ってみました！
そういえば、第二回で出てきたreadyさん。
あれも実は「準備ができたら」という意味のイベントなんです。
違う書き方もできるよ
では、中身をこれに変えてみましょう。
$('#test').on('mouseover', function(){
$('#test').text('mouseoverしたよ！');
});
先ほどと同じように、マウスオーバーした時にテキストが変われば成功です。
挙動は全く同じですが、違う書き方もできるのです。
.on()というメソッドが出てきました。
.on()には2つのパラメータ(引数)を渡します。
1つ目はイベント。〜クォーテーションを添えて〜
2つ目は処理内容。
また、onメソッドを使うとこんな書き方ができるようになります！
$('#test').on({
'mouseover': function(){
$('#test').text('mouseoverしたよ！');
},
'mouseout': function(){
$('#test').text('mouseoutしたよ！');
},
'click': function(){
$('#test').text('clickしたよ！');
}
});
挙動は全く同じですが、.on()の中に、「,」で区切って3種類の【イベントと処理】を渡しています。
そして渡す3種類を「,」で区切ることになったので、イベントと処理の間は「:」に変わっています。
ちなみにいっぱい渡すときは、渡すものたちをまるっと{ }で囲みます。
はじめはややこしいですがこれができるようになるとかっこいいですぞ。
何度も「$(‘#test’).on…」と主人公から書かなくて良いのでスマートです。
#testを何回も探しに行かなくなるので処理のスピードもちょっと早くなります。
というわけで、今回はイベントというものについて解説してみました。
次回に続く〜