｢君アレ｣番外編 ～イチからのjQuery～ 2
イベント
jQueryの書き方は、基本的には以下の3つが基本となります。
- 何に対して
- どんなタイミングで
- 何を実行するか
まず、実行したい対象（セレクタ）を指定します。
これに何を実行するかの指定は前回の記事のとおり。
今回はこれにどんなタイミングで（イベント）を追加してみよう。
js
$(function(){
$('A').C(function(){
$('a').B()
});
});A（セレクタ）をC（イベント）したらa（セレクタ）のB（メソッド）になる。
よく使われるイベントには下記のようなものがあります。
例えば
- .click – クリック時
- .dblclick – ダブルクリック時
- .mousedown – マウスをクリックした時
- .mouseup – マウスをクリックして離した時
- .mouseover – マウスオーバー時
- .mouseout – マウスアウト時
- .mousemove – マウスを動かした時
- .toggle – クリックするたび交互に異なる内容を実行したい時
★他にもいろいろなイベントがあります～
デモ 1
.demo02をクリックしたら.demoBox内のテキストを「テキストが変更しましたよ!!」に変更
js
$(function(){
$(".demo02").click(function(){
$(".demoBox").text("テキストが
変更しましたよ!!");
});
});HTML
<p class=”demo02″>クリックしてね</p>
<div class=”demoBox”>
テキストが変更するかも…
</div>
デモ 2
.demo03にマウスオーバーしたら.demoBoxをフェードアウトで消えちゃう
js
$(function(){
$(".demo03").mouseover(function(){
$(".demoBox").fadeOut(3000);
});
});HTML
<p class=”demo02″>マウスオーバーしてね</p>
<div class=”demoBox”>
消えちゃうよ～～(；´∀｀)
</div>
いかがでしょうか？
牛歩でステップアップですよ(・∀・)
アニメーションは楽しい要素満載なので引き続き掘り下げていこうと思います！
それでは第3回はこのへんで！(・∀・)ｱﾃﾞｭｰ
