jQuery:イベント処理

続いて続いてイベント処理です。

■ページが読み込まれる時に実行
window.onloadイベント。

$(function() {
    $(“div”).text(“文字列の追加とかしちゃう。”);
});

使い道としては、
例えば複数ページの共通する特定部分を書き直すような場合に使用するのだろうか?

■クリック時に実行
clickメソッドを使う。

$(function(){(
    $(“div”).click(function(){
    this.style.backgroundColor=”yellow”;
    });
});

thisキーワードに対象のプロパティがあって、それを対象に変化させる、と。
ほぅ。clickメソッドの中のプロパティは後でお勉強が必要ですね。
これ、「2回クリックしたら元に戻る」とか出来ないのかな?(多分出来る)

■マウスオーバー/マウスアウト時に実行

  • mouseover()
    マウスを載せたとき
  • mouseout()
    マウスを載せていないとき
$(function(){(
    $(“div”).mouseover(function(){
    this.style.backgroundColor=”yellow”;
    });
});
$(function(){(
    $(“div”).mouseout(function(){
    this.style.backgroundColor=”white”;
    });
});

おぉー、これならクリックよりも理想に近い形で動かせますね。ふむふむ。

■hover()

mouseover()とmouseout()を一度に扱うメソッド。

都合、中身が2つ必要。

$(function(){(
    $(“div”).mousehover(
    function(){
    this.style.backgroundColor=”yellow”;
    });
    function(){
    this.style.backgroundColor=”white”;
    });
});

mouseover()とmouseout()を指定するよりもこちらの方が楽。

そもそも、mouseout()を使用することってあるのかな?
無い気がする。

よっしゃ。これで少しはイジレルようになってきた。

コメントを残す

メールアドレスが公開されることはありません。