jQueryで良く使う処理色々

現在、JavaScriptの案件が入ったときには、JavaScriptのフレームワークの一つであるjQueryで開発を行っています。

セレクタの表現がCSSと同じ記述方法で良く、多彩な効果が用意されているので、JavaScriptを使ったことのない人でも、比較的取り組みやすいように感じます。

今回は、jQueryで開発を行うときに、毎度同じ様な記述をすることがあったので、備忘録も兼ねて色々まとめておく事にしました。

hover()の処理をunbindしたい

ロールオーバーの表現に良く使うhover()ですが、mouseoverとmouseoutを割り当てているわけではなく、mouseenterとmouseleaveが当てられているため、unbindを行う際は以下の様に記述します。

$('#hoge').unbind('mouseenter').unbind('mouseleave');

処理を実行する前に画像を読み込んでおく事で、後の処理を軽くするために利用します。

主にロールオーバーをjQueryで制御する際に、マウスオーバーして直ぐに画像が切り替わらない事が気になったので、事前に読み込んでおく事で直ぐに切り替わらせるために使っています。

方法は$('<img>')のように、$()の中にタグを記述する事で内部的にHTMLを生成し、その中で画像を読み込みます。

$('<img>').attr('src', hogeUrl);

fadeInやslideDown等のjQueryでのアニメーションは、一連の動作を行ってから次の動作へと移るため、ロールオーバーの箇所などにアニメーションを設置し、マウスを乗せたり離したりを繰り返していると同じアニメーションをその回数だけ続けてしまいます。

そこで、アニメーション開始時に現状割り当てられている処理をすべて中断させて、そこから次のアニメーションを実行させる方法を取っています。

アニメーションを中断させるには、アニメーション情報を格納しているqueue()に、以下の様な空の配列を渡します。

$('hoge').queue([]);

$('hoge').myFunc();の様に、独自の関数を作成することが可能です。

自分の場合ではロールオーバーや、透過値補正等の簡単な処理を独自に制作して利用しています。

jQuery.fn.extend( {
	myFunc : function() {
		$(this).click( function() {
			alert('This is myFunc!');
		} );
	}
} );

上記のようにjQuery.fn.extendで追加します。この例では、$('a').myFunc();と指定すると、aタグをクリックしたときに、「This is myFunc!」というダイアログボックスが表示されるようになります。