jQueryの履歴

要チェック

後で読む

覚えた関数

マウスオーバー

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");

となる

勉強サイト

プラグイン






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

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

かなり使えるものばかりな感じですね。

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

http://blog.creamu.com/mt/2009/04/jquerytop10.html

jQueryが使われているサイト集

http://jquerystyle.com/

jQueryプラグイン

デザインに関する記事

写真一覧表示