jQuery

要チェック

• IE6、7でも動いてくれる&実用性の高そうなjQueryプラグインまとめ - かちびと.net
• jQueryのアニメーション関連いろいろまとめ :: 5509(+1)

後で読む

• プログラマ視点でみたjQueryの魅力 - EC studio 技術ブログ

覚えた関数

• addClass(class) - jQuery 1.3.2 日本語リファレンス
• css(name) - jQuery 1.3.2 日本語リファレンス

• html() - jQuery 1.3.2 日本語リファレンス

マウスオーバー

hoge_off.jpg hoge_on.jpgという画像ファイル名にして自動で切り替える

通常

$(document).ready(function(){		   
	$("img[src*='_on']").addClass("current");
	$("img,input").mouseover(function(){
		if ($(this).attr("src")){
			$(this).attr("src",$(this).attr("src").replace("_off.", "_on."));
		}
	});
	$("img[class!='current'],input").mouseout(function(){
		if ($(this).attr("src")){
			$(this).attr("src",$(this).attr("src").replace("_on.", "_off."));
		}
	});
});

選択された部分はmouseoutしてもそのまま

var flug = 1;

$(document).ready(function(){		   
	$("img[src*='_on']").addClass("current");
	$("img,input").mouseover(function(){
		if ($(this).attr("src")){
			$(this).attr("src",$(this).attr("src").replace("_off.", "_on."));
		}
	});
	$("img[class!='current'],input").mouseout(function(){
		if ($(this).attr("src")){
			$(this).attr("src",$(this).attr("src").replace("_on.", "_off."));
			$('a#a_tab'+flug+' img').attr("src","img/tab"+flug+"_on.jpg");//
		}
	});
	$('a#a_tab'+flug+' img').attr("src","img/tab"+flug+"_on.jpg");
});

function tabs(id){
	$('#tab1').css("display" , "none");
	$('#tab2').css("display" , "none");
	$('#tab'+id).css("display" , "block");
	$('a#a_tab1 img').attr("src","img/tab1_off.jpg");
	$('a#a_tab2 img').attr("src","img/tab2_off.jpg");
	$('a#a_tab'+id+' img').attr("src","img/tab"+id+"_on.jpg");
	flug = id;
}

trとかdivとかリンクじゃないやつもマウスオーバー反転させられる

<script>
    $("table.hoge tr").mouseover(function(){
			$(this).addClass("active");
    }).mouseout(function(){
			$(this).removeClass("active");
    });
</script>

selectされたoptionに応じてアクション

				$("select").change(function () {
				  $("select#"+$("select#hoge").val()).css("display","block");
				})
|<				.trigger('change');


*書き方
document.getElementById("hoge");
は
$('#hoge')
と一緒なので

document.getElementById("hoge").innerHTML = fuga;
は
$('#hoge').html(fuga);

だし、

document.getElementById("hoge").style.background = "#fff";
は
$('#hoge').css("background" , "#fff");

となる


*勉強サイト
・[[jQueryの魔法 - JavaScriptAll About>http://allabout.co.jp/internet/javascript/closeup/CU20071020A/]]

*プラグイン
・[[jqueryでウェブサイトをリッチにするプラグインまとめ ≪ vanillate>http://vanillate.org/archives/531]]

・[[JS jQueryのプラグイン100選 -2009年総集編 | コリス>http://coliss.com/articles/build-websites/operation/javascript/100-jquery-plugins-2009-best.html]]





http://www.atmarkit.co.jp/fwcr/rensai2/jquery01/01.html

http://semooh.jp/jquery/
http://d.hatena.ne.jp/cyokodog/20081016/jquerylinks01

>http://blog.creamu.com/mt/2009/04/jquerytop10.html>
かなり使えるものばかりな感じですね。

≫ スライドタブボックス
≫ Appleのサイトで使われているようなメニュー
≫ 画像をズーム
≫ 画像の上にスライドするキャプション
≫ メニューの背景にスライドする画像
≫ タブで画像を切り替える
≫ メニューにフェード効果
≫ アコーディオンメニュー
≫ タブによるコンテンツ切り替え
≫ タブメニュー
<<

*jQueryが使われているサイト集
http://jquerystyle.com/


*jQueryプラグイン
・[[これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」:phpspot開発日誌>http://phpspot.org/blog/archives/2010/01/exceljqueryjque.html]]

*デザインに関する記事
・[[webデザイナーのためのjQueryベストプラグイン＆チュートリアル10個*ホームページを作る人のネタ帳>http://e0166.blog89.fc2.com/blog-entry-742.html]]