B-Teck!

お仕事からゲームまで幅広く

仕事で最近ハマった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セレクタでした。





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