Webアプリケーションを開発する時に、開発の効率を高め工数を削減するため
フレームワークを用いることがあります。
続きを読む
Posts Tagged ‘JavaScript’
2010年05月31日に投稿
jQueryを学ぶためのリンク集
1. 概要の理解
jQueryを一切知らない場合はまずは概要の理解から始めます。
ノンプログラマーのためのjQuery入門
http://www.slideshare.net/hayatomizuno/jquery-7665168
はじめてのjQuery
http://higashizm.sakura.ne.jp/jquery_first/
2. 基本的な使い方を理解する
サンプルを見ながら具体的なコードを作成し理解を深めます。
40分で覚えるjQuery速修講座
http://ascii.jp/elem/000/000/498/498710/
jQuery基礎文法最速マスター
http://blog.webcreativepark.net/2010/02/02-111519.html
jQueryサンプル集
http://www.designwalker.com/2008/04/jquery.html
[JS]jQueryのプラグイン33+1選 -2010年3・4月
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugins-best-2010-mar.html
3. リファレンスを参照する
jQueryの使い方や文法をある程度理解したら、メソッドに渡す引数や挙動を調べながらコーディングを進めます。
jQuery日本語リファレンス
http://semooh.jp/jquery/
jQuery逆引きリファレンス
http://www.atmarkit.co.jp/fdotnet/jqueryref/index/index.html
4. 深く知る
さらに精進したい場合はJavascript自体の仕様を調べたり、jQueryのソースコードを参照して理解を深めます。
オリジナルのプラグインを開発することもできます。
jquery.jsを読み解く
http://gihyo.jp/dev/feature/01/jquery
jQueryを使い始めたときに感じる13の疑問
http://tech.kayac.com/archive/jquery-first-questions.html
2010年05月30日に投稿
[jQuery]マウスオーバーで画像の透明度を変更する
ページが読み込まれた段階では、薄くなった状態で表示され
マウスオーバーで透明度を0にします。
この動作を簡単に実現するために、jQueryを使用します。
サンプル
コード
[javascript]
$(function(){
$(“#target_image”).fadeTo(0,0.2);
$(“#target_image”).hover(
function(){
$(this).stop().fadeTo(“fast”,1.0);
},
function(){
$(this).stop().fadeTo(“fast”,0.2);
}
);
});
[/javascript]
2行目
IDがtarget_imageの要素をfadeTo関数で透明度を0.2にします。
3行目
IDがtarget_imageの要素にマウスオーバーした時の動作を定義します。
マウスオーバーとマウスアウトした時の動作はhover関数を使用します。
hover(マウスオーバーの動作,マウスアウトの動作)
マウスオーバー時に透明度0に、マウスアウト時に透明度を0.2に戻しています。