①イベント(Event)
単にhtmlやcssの中身を変更するんじゃなくてその変更のタイミングを指定したいときは
Event Methodを使います。Event Methodには、
.click (クリックしたとき。)
.dblclick (ダブルクリックしたとき。)
.mousedown (マウスダウンしたとき。以下略)
.mouseup
.mouseover
.mouseout
.mousemove
などがあります。まず、
$(function(){
$("#footer").click
});
と書いてみます。これは id="footer" の領域がクリックされたら…という意味。
そしてその具体的な命令の中身を次のように付け加えます。
$(function(){
$("#footer").click(function(){
$("img").attr("src","g.jpg");
});
});
attrというのは属性値を変更する命令です。
$("img").attr("src","g.jpg")
なら、imgのsrcをg.jpgに変えろ、つまり
「img src="g.jpg"」
「g.jpgという画像を表示させろ」
という意味。したがってこの例文を日本語訳すると、
footerがクリックされたらg.jpgという画像を表示しろ
という意味になります。
さらにjQueryには代名詞thisを使うことが出来て、意味はそのまんまです。
例えば、
$(function(){
$("#footer").mouseover(function(){
$(this).css("width","100px");
});
});
なら、このthisは#footerを指します。つまりthis＝#footer。
この文だと、
footerにマウスが乗っかったらこれ(footer)の幅を100pxにしろ
という命令になります。
ここまで。