«
»

2009.12.15

JQueryでイベント,スタイル変更の練習

●jQuery入門 (ver 1.3)

http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.3.1/index.html

を参考にJqueryの勉強をしました。
とりあえず全部読んで、良く使いそうな「イベント処理」「スタイルシート操作」を使ってサンプルを作ってみました。

イメージ画像

イメージ画像

マウスオーバーすると段々色が暗くなるDIVが並んでいるだけのページです。

※サンプルページ

http://matubuse.jp/upfiles/samples/20091215-divcolorchange/div_colorchange.html

※以下解説

※ソース

□調査用兼実装したままの「クリックしたら背景色を返す」処理。
clickイベントを仕様
> クリック時には、クリックされたエレメントの情報(ポインタ)がthisに入っています。

http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.3.1/chapter04/002/index.html

——————————
//マウスクリックした際の処理
$(function(){
$(“div”).click(function(){
//現在の背景色をアラートで返す。
var cssValue = this.style.backgroundColor;
alert(“色の値は「”+cssValue+”」です”);
});
});
——————————

□マウスオーバーしたら色を濃くする処理
変数nowをマウスオーバーのたびに一旦初期化
色を変えたら変数を代入してフラグ代わりに
mouseoverイベントを使用
条件式if,else ifを使用
——————————
$(function(){
var now = ”;
$(“div”).mouseover(function(){
if(this.style.backgroundColor == “”){
if(now == ”){
this.style.backgroundColor = “#dddddd”;
now = ‘on’;
}
}
else if(this.style.backgroundColor == “#dddddd”){
if(now == ”){
this.style.backgroundColor = “#bbbbbb”;
now = ‘on’;
}
}

// 以下同様
・・・
・・

——————————

□マウスアウトでフラグを外す処理
——————————
//フラグを外す。
$(“div”).mouseout(function(){
now = ”;
});
});
——————————

□色初期化ボタン
ボタンから関数を呼び出す
全てのdivについて一括でスタイルシートの値を変更する
——————————
【HTML】
<input type=”button” value=”CLEAR” onclick=”clearcolor()” />

【Javascript】
//色初期化ボタン
function clearcolor(){
$(“div”).css(“backgroundColor”, “”);
}
——————————

わかったこと
・設定のないcolorを取得すると初期値は > transparent または “”(値なし)。
・値を取得する際に#16進数を大文字で書くと反応しない。○#dddddd ×#DDDDDD
・JavaScriptも良くわかってないのでJqueryの優位性が明らかでないけど、まあやっていってみよう。

Trackback URL

Comment & Trackback

No comments.

Comment feed

Comment





XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

コメントリンクを nofollow free に設定することも出来ます。