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