jQueryでありがちな、プログラミングのド忘れ凡ミス
「あれ?パスもファイル名もあってるのに動かない・・・」基本中の基本のハナシ。
JavaScript(jQuery)を書いて実行させようと思ったらうんともスンとも言わない。
「あぁ、そっか。」と気づく日はいいんですけど、前の日飲み過ぎてたり徹夜あけだとやりがちなミス。
2、30分悩み、当たり前のことに気づくことがたまにありますw
そんな時はたいていここで引っかかるのでメモ。
HTMLが読み込み完了してないのに$(セレクタ)で書き始める
jQueryの場合(他のもそうだけど)、以下の文をいきなり
内で記述、あるいは別ファイルに記述して内で読込ませても実行されません。$('button #hoge').click(function(){ //'button #hoge'がクリックされたときの処理; });
当たりまえですね。
‘button #hoge’という要素が読込まれてません。
やっぱり基本が大切です。
HTMLがすべて読込まれてから実行するようにするにはやはり、ready()あるいはready()メソッド省略形の$function(){});で囲みます。
$(document).ready(function(){ $('button #hoge').click(function(){ //'button #hoge'がクリックされたときの処理; }); });
あるいは、
$(function(){ $('button #hoge').click(function(){ //'button #hoge'がクリックされたときの処理; }); });
しょーもない基本中の基本ですが、こんなんで「なんで今日はウゴカネェんだろう」とやっている悲しい自分がいますorz。
今さらのhover()とmouseover()の挙動の違い
もうこんなことするのはなくなりましたが、これからjQuery使うって人に知っておくべきなのは、hover()とmouseover()の違いです。
hover()の場合は以下のような記述になるかと思います。
$('セレクタ').hover( function(){ マウスオン時の処理; },function(){ マウスアウト時の処理; } );
hover()メソッドの中に二つのfunction(){}を置いて、1つ目がマウスをオンしたときの動作、2つ目がマウスが離れた場合の動作処理を記述します。
hoverイベントはマウスが重なったか離れたかだけを感知するものなので、子要素へマウスが移動したかどうかというのは感知しません。
なのでイベント後に拡がったエリアなどにマウスを移動しても、同一セレクタしていても一旦閉じて開くというようなmouseoverイベントのようなイラッとする動作はしません。
mouseover()イベントで以下のような場合。
$('セレクタ').mouseover( $('#hoge').animate({ height:'100px' }, 'fast') );
みたいなことをした場合は広がった領域にマウスを動かすと、再度開きなおします。
つまり(上記だけだとわからないと思いますが・・・)HTMLで子要素があった場合、そこにマウスが移動してもmouseover()イベント処理が実行されちゃいます。
そんな時はhoverイベントを使いましょう。
jQueryの中でCSSのプロパティ値を変えちゃう
これ、たまにやってる人いますけどやめてちょうだいね。
メンテがヤバいくらいに面倒になります。
例えば以下のような場合。
$('セレクタ').css("background","#fffccc"); ・・・
これをやり出すと途中で修正が入った場合、随所にコレがあったらCSSファイルもJSファイルも全て修正になるわけです。
考えただけでゾッとしますorz
他にもたくさんあるんだけど、とりあえず。
いつも読んでくれてありがとね!