仕事で最近ハマったjavascriptとかjQueryとかのTIPS

ここ最近サーバー側のロジックよりも、デザインとかクライアント側のソースをいじる機会が多くて、
いろいろ困ってたのでメモ的に。

①IE9以前でdisableのテキストボックスの文字が灰色になってしまう
あんまりきれいなやり方ではないんだけど、

<form>
    <input type="textbox" value="test" disabled="disabled"></input>
</form>

から、

<form>
    <input type="textbox"
           value="test"
           readonly="readonly"
           tabindex="-1"
           onSelectStart = "return false;">
    </input>
</form>

に書き換えることでとりあえずそれっぽく。
readonly属性つけた後、tabindexを-1にしてタブで移動できないようにして、
テキストボックスを選択されたらフォーカス外すようにみたいな感じ。
ちなみに手元のfirefoxではちゃんと動いてない…。

ま、まぁ今のプロジェクトはfirefox対応してないしね、仕方ないね。

②jQueryは実体を扱ってるわけじゃない

仕事で必要な部分だけ拾い読みして覚えてたせいで、最近まで全然知らなかったんだけれど。
jQueryは実体ではなく、"jQueryオブジェクト"を生成して、動かしてる…らしい。

その辺の理屈は置いておいて。

ハマった状況としては、

$(document).ready(function(){
    $(".hoge").removeClass("foo");

　　$(".foo").click(function(){
         alert("foobar");
    }
});

みたいなことをした時に、ソースを表示してもCSSにしてもクラスは消えてるっぽいのに、
元々書いてあった"foo"のイベントを拾って実行しちゃってる。

で、ここでさっきの話が出てくるわけで。
jQueryオブジェクトが悪いんだったら根こそぎ切り捨ててやる！ってことで、

$(document).ready(function(){
    $(".hoge").unbind("click");

　　$(".foo").click(function(){
         alert("foobar");
    }
});

みたいな感じでイベントごと殺しました。
ただ、.get()とか使えばDOMオブジェクトを取得できるから、そっち使うのが賢いんだろうなぁ。
今回は殺していいイベントだったので置いておくけど。

③jQueryの要素の存在チェック

これはいくつかやり方があるので、方法を紹介してたサイトさんのリンクを貼る。
jQueryによる要素の存在チェックまとめ: 小粋空間

何個も使わなくても一個でいいじゃん！ってなりそうなんだけど、
状況によってたまに動かないのがあったりしてめっちゃつらい。
自分の場合、なぜか.size()とか.length()でうまく判定できなくて、

if($(selector).get(0)){
    alert("hogehoge");
}

でうまく動いてくれました。

④jQueryのセレクタ(CSSもだけど)

これもまとめてくれてるサイトさんをリンクしましょう。
jQuery – いろんなセレクタ指定方法＋αを覚えて、目的の要素をさくっと取得する | 1：n – DETELU Blog

前述したように、自分はjQueryをイチからしっかり勉強したわけじゃなくて。
っていうかPHPくらいしかまともに触ったこと無くて、jQueryってこういうものなんだ！
って思ってたら、CSSのセレクタでした。

溜まってた書きたかった内容一気に書ききってしまって、また更新しなくなりそう...