animateの例文

$(function(){
	$('#headerTab a').hover(
		function(){
			$(this).stop().animate({top : '0px'},'normal','easeOutBounce');
		},
		function(){
			$(this).stop().animate({top : '-5px'},'normal','swing');
		}
	);
});

予めhover後の長さの画像をtop:-5pxで絶対配置したものを、hoverで0pxまで戻します。
{top : ‘0px’}の部分はCSSでの指定になるので、たとえば画像置換のパディングで指定していた際にはtopをpaddingTopに変更。
‘normal’が入っている第二引数には’slow”normal”fast’や’ミリ秒指定’といった速度に関する記述を入れます。
‘3000’であれば3秒かけてアニメーションが行われます。
‘easeOutBounce’や’swing’が入っている第三引数にはeasing名を入れます。
jQuery単体だと’liner’か’swing’しか選択できませんが、別途jQuery Easing Pluginを導入すれば他にも多くの動きをつけることが可能です。
導入する際にはjQueryを読み込んでいるスクリプトタグより後に記述して下さい。

詳しい種類についてはjQuery Easing – jQuery 日本語リファレンスをご覧ください。
実際に動きを見ることができるので大変参考になります |’ω’|

mouseover例文

<ul class="photo"><!--
  --><li><img src="images/shop/photo1.jpg"></li><!--
  --><li><img src="images/shop/photo2.jpg"></li><!--
  --><li><img src="images/shop/photo3.jpg"></li><!--
--></ul>
$('.photo img').hover(function() {
	$(this).stop().fadeTo(330,0.7);
		}, function() {
	$(this).stop().fadeTo(330,1);
});
$('.photo li').mouseover(function(){
	$(this).closest('ul').css('backgroundImage','url(' + $(this).children('img').attr('src') + ')')
});

ulの背景画像として予めphoto1の画像をいれておき、それぞれのリストの画像はCSSで縮小しておきます。
マウスオーバーでリストの画像がulの背景画像と入れ替わります。
間違え易いのが、jQueryにてCSSを指定する際の記述方法。
background-imageがbackgroundImageとなるように、ハイフンの直後の文字列が大文字になり、ハイフン自体は消えます。
ラクダ記法とかキャメルケースとか。
.closestは直前の親要素、.childrenは子要素、attr(‘src’)は画像のソースURLです。
attr(‘src’)の時にはsrcの部分、画像のソースURLを抽出し、
attr(‘src’,’photo.jpg’)の時には画像のソースURLをphoto.jpgに書き換えます。

$(function(){
	$('#gallery .topImage').prepend($('#gallery li:first-child img').clone());
	$('#gallery .textarea').html($('#gallery li:first-child img').attr('alt'));
	$('#gallery li img').mouseover(function(){
		$('#gallery .topImage img').attr('src',$(this).attr('src'));
		$('#gallery .textarea').html($(this).attr('alt'));
	}).hover(
		function(){
			$(this).stop().fadeTo(250,0.7);
		},
		function(){
			$(this).stop().fadeTo(250,1);
		}
	).css('cursor','pointer');
});
<div id="gallery">
	<p class="topImage"></p>
	<ul><!--
		--><li><img src="images/construction/case1.jpg" alt="サンプル1"></li><!--
		--><li><img src="images/construction/case2.jpg" alt="サンプル2"></li><!--
		--><li><img src="images/construction/case3.jpg" alt="サンプル3"></li><!--
		--><li><img src="images/construction/case4.jpg" alt="サンプル4"></li><!--
		--><li><img src="images/construction/case5.jpg" alt="サンプル5"></li><!--
		--><li><img src="images/construction/case6.jpg" alt="サンプル6"></li><!--
		--><li><img src="images/construction/case7.jpg" alt="サンプル7"></li><!--
		--><li><img src="images/construction/case8.jpg" alt="サンプル8"></li><!--
		--><li><img src="images/construction/case9.jpg" alt="サンプル9"></li><!--
		--><li><img src="images/construction/case10.jpg" alt="サンプル10"></li><!--
		--><li><img src="images/construction/case11.jpg" alt="サンプル11"></li><!--
		--><li><img src="images/construction/case12.jpg" alt="サンプル12"></li><!--
	--></ul>
	<div class="textArea"></div>
</div>

マウスオーバーした画像をtopImage内に拡大表示し、textArea内をaltの内容に置き換えます
初期表示の画像やテキストは1枚目の画像を参照します

<ul id="gNav" class="clearfix"><!--
  --><li id="gNavLi1"><a href="#">リンク1</a></li><!--
  --><li id="gNavLi2"><a href="#">リンク2</a></li><!--
  --><li id="gNavLi3"><a href="#">リンク3</a></li><!--
  --><li id="gNavLi4"><a href="#">リンク4</a></li><!--
  --><li id="gNavLi5"><a href="#">リンク5</a></li><!--
  --><li id="gNavLi6"><a href="#">リンク6</a></li><!--
  --><li id="gNavLi7"><a href="#">リンク7</a></li><!--
  --><li id="gNavLi8"><a href="#">リンク8</a></li><!--
--></ul>
$(function(){
	$('#gNav li').append('<div class="tab"></div>');
	$('#gNav a').css('cursor','pointer').blend().mouseover(function() {
    $(this).siblings('div.tab').stop().animate({top : '5px'},'fast','linear').animate({top : '0px'},'normal','easeOutBounce');
	});
});

cssでliをrelativeにし、jsにて自動挿入されるdiv.tab及びaタグを絶対配置にします
2つをtop:5pxに配置し、z-indexにてaをdiv.tabの上に乗せます
hoverでaにblendの効果が出て、マウスオーバーでdiv.tabがぴょこっと飛び出ます
ボタンの色とタブの色をそれぞれ合わせておくと可愛らしいナビゲーションになります _(┐「ε:)_

eachの例文

$(function(){
	$('#construction li img').each(function(){
		$(this).wrap('<a href="images/construction/detail_' + $(this).closest('li').attr('class') + '.jpg"></a>')
		$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
	});
});

CMSで構築しているサイトの施工事例のページなどでよく使います。
anchorのhrefを、images/construction内にある先頭にdetail_の名前が付いた画像に、
画像を囲っているリストのクラス属性を足して指定し、
(親のリストのクラス名がlist1であればimages/construction内のdetail_list1.jpgにリンク)
#selector中のリスト内のimgのaltをpで囲いそのイメージの後に追加します
すっきりさせたい時は変数を使いましょう。
eachはいくつかの候補(この場合li)に対して、毎回決まった処理でなくそれぞれに対応させた形に処理させたい時に使いまする。
(それぞれのクラス名のリンクを持ったanchorで囲ったりaltの内容を持ったpタグを追記したり)

eachを抜かすとエラーが出ます。
解れば当たり前の事なんですが、いきなりjQueryから入った当時の私には意味不明でした くコ:彡

CSSハック

IEに適用

body {
	color: red; /* all browsers, of course */
	color : green9; /* IE8 and below */
	*color : yellow; /* IE7 and below */
	_color : orange; /* IE6 */
}

順に、
L2.デフォルトの指定
L3.IE8以下の指定
L4.IE7以下の指定
L5.IE6の指定
と、なります。
勿論全て記述する必要はなく、例えばIE7以下が同じでよい場合には最後の行は必要ありません。
IE用のハック参考サイト:nettuts+

Firefoxに適用

Firefox 1.5以降

@-moz-document url-prefix() {#selector{color: red;}}
*>#selector{#selector{color: green;}}
#selector, x:-moz-any-link, x:only-child{color: yellow;}

Firefox 2以降

html>/**/body#selector, x:-moz-any-link{color: red;}

Firefox 3以降

html>/**/body#selector, x:-moz-any-link, x:default{color: red;}

SafariとOperaに適用

body:first-of-type #selector { color: red; }

chromeとsafariに適用

#selector { top: 410px; }
/*chrome,safari,firefox 3.5*/
body:nth-of-type(1) #selector {	top: 390px; }
/*firefox 3.5*/
#selector , x:-moz-broken, x:last-of-type { top: 410px; }

chrome,safari,firefox 3.5以降のブラウザに2つ目のハックを適用させ、最後の記述でfirefox3.5以降のみを戻します。
が、しかし、どうやら最後のハックで上書きできていないようだったので急遽変更。

#selector { top: 410px; }
/*chrome,safari,firefox 3.5*/
body:nth-of-type(1) #selector { top: 390px; }
/*firefox 3.5*/
#selector , x:-moz-broken, x:last-of-type { padding-top: 20px; }

上書きできないのならパディングで調整!
もとのCSSでパディングを使用していた場合には使えないし、ごちゃごちゃしすぎて応急処置感がいなめません・・・。
使わずに済めば一番いいんですけどね|’ω’|

フォーム 住所のテンプレート

<select name="都道府県">
  <optgroup label="北海道">
    <option value="北海道">北海道</option>
    </optgroup>
  <optgroup label="東北">
    <option value="青森県">青森県</option>
    <option value="岩手県">岩手県</option>
    <option value="宮城県">宮城県</option>
    <option value="秋田県">秋田県</option>
    <option value="山形県">山形県</option>
    <option value="福島県">福島県</option>
    </optgroup>
  <optgroup label="関東">
    <option value="東京都">東京都</option>
    <option value="茨城県">茨城県</option>
    <option value="栃木県">栃木県</option>
    <option value="群馬県">群馬県</option>
    <option value="埼玉県">埼玉県</option>
    <option value="千葉県">千葉県</option>
    <option value="神奈川県">神奈川県</option>
    </optgroup>
  <optgroup label="北陸">
    <option value="富山県">富山県</option>
    <option value="石川県">石川県</option>
    <option value="福井県">福井県</option>
    </optgroup>
  <optgroup label="甲信越">
    <option value="新潟県">新潟県</option>
    <option value="山梨県">山梨県</option>
    <option value="長野県">長野県</option>
    </optgroup>
  <optgroup label="東海">
    <option value="岐阜県">岐阜県</option>
    <option value="静岡県">静岡県</option>
    <option value="愛知県">愛知県</option>
    <option value="三重県">三重県</option>
    </optgroup>
  <optgroup label="関西">
    <option value="滋賀県">滋賀県</option>
    <option value="京都府">京都府</option>
    <option value="大阪府">大阪府</option>
    <option value="兵庫県">兵庫県</option>
    <option value="奈良県">奈良県</option>
    <option value="和歌山県">和歌山県</option>
    </optgroup>
  <optgroup label="中四国">
    <option value="鳥取県">鳥取県</option>
    <option value="島根県">島根県</option>
    <option value="岡山県">岡山県</option>
    <option value="広島県">広島県</option>
    <option value="山口県">山口県</option>
    <option value="徳島県">徳島県</option>
    <option value="香川県">香川県</option>
    <option value="愛媛県">愛媛県</option>
    <option value="高知県">高知県</option>
    </optgroup>
  <optgroup label="九州">
    <option value="福岡県">福岡県</option>
    <option value="佐賀県">佐賀県</option>
    <option value="長崎県">長崎県</option>
    <option value="熊本県">熊本県</option>
    <option value="大分県">大分県</option>
    <option value="宮崎県">宮崎県</option>
    <option value="鹿児島県">鹿児島県</option>
    </optgroup>
  <optgroup label="沖縄">
    <option value="沖縄県">沖縄県</option>
    </optgroup>
</select>

まれに必要になるのでメモ代わりに。