徳田 和規 (Kazunori Tokuda)

• (Webの)UIが好きです
• ブログとかブログとか 5509
• ディレクションとか、UIの実装とか
• 勉強会やってます .coder → .+（ドットプラス）
• 犬派 →

始めるたての人がハマりそうなところを紹介する、はずだったんですけど、、、

全然思いつかなかったので、基本的なところから難しいかもしれないところまで、小ネタっぽいものをたくさん紹介することにしました。

$(function() { /*hoge*/ });

ではなく

jQuery(function($){ /*hoge*/ });

を使おう

後者の方はとりあえず安全に$が使えるので、他のライブラリとの干渉を気にしなくてよい

今日出てくるjQueryオブジェクトという呼び方のものは

$("#hoge")

$()で指定取得した要素のこと

これが分かればjQueryは簡単（かも）

//IDで
$("#id")
// classで
$("div.class") // classを使うときは要素と一緒に指定しよう
// 子要素
$("div > ul")
// もっとセレクタ
$("div > ul:first-child")
$("div+ul")
$("div > a[href=hoge])
$("input:checkbox")

何回も$(hoge)のようにオブジェクトを取るのは非効率なので、キャッシュしましょう。メソッドチェーンで呼び出しを少なくするのも◯

$("#hoge").addClass("fuga");
// Do something
$("#hoge").css(propeties);
// ↓
var hoge = $("#hoge");
hoge
    .addClass("fuga")
    .css(propeties);

ネイティブ/プラグインメソッドでthisの扱いが変わる

$("#hoge").click(function() {
    console.log(this); // ネイティブメソッドで実行する無名関数にはthisはDOMで渡される
});
$("#hoge").myMethod(function() {
    console.log(this); // thisはjQueryオブジェクトとして渡される
});

stop(true, true);

も一緒に指定してあげると◎。あるとのないので結構差が出る

$("#hoge").fadeOut();
// ↓
$("#hoge").stop(true, true).fadeOut();

サンプル

参考リンク

アニメーションの待ちをしたいときはdelay()を使う

$(hoge)
    .animation(/*animation*/)
    .delay(1000) // 待ち時間も指定できる
    .animation(/*animation*/);

CSS()メソッドでopacityを指定するとIEのfilter: alphaも補完してくれる

$(hoge)
    .css({
        opacity: .6
    });

指定した要素がdocumentにあるかないかを確認するときは

$("#hoge").length

で確認できる

if ( !$("#hoge").length ) return false;
/ * ここに書く */

addClass()、removeClass()は複数のトークンが指定できる

$(hoge).addClass("add1 add2");
$(hoge).removeClass("add1 add2");

hogehoge

find()、children()、end()、next()、prev()などを利用する

var hoge = $("#hoge");
// hogeの子孫からdivを選択して.fugaを付ける
hoge.find("div").addClass("fuga");
// hogeの子要素divだけをフェードイン
hoge.children("div").fadeIn();
// hogeの子要素divの弟要素を表示する
hoge.children("div").next().show();

offset()、sizeを取るときは要素が表示されているか確認する。非表示になっていると取得できない！

// 例えば表示されていない要素なら・・・
var hoge = $(hoge);
hoge.show(); // 重要
size = {
        width  : hoge.width(),
        height : hoge.height()
};
hode.hide(); // 重要

要素がいくつか入ったjQueryオブジェクトを配列の容量で指定するとDOMになる

var objs = $("div.hoge");
objs[0].show(); // error!
$(objs[0]).show(); // success!

DOMになるので、$()でjQueryオブジェクトにする

★ 追記

objs.eq(n) // でも取得できます
objs.eq(1).show();

append()メソッドは複数の要素をまとめて指定できる

$(hoge)
    .append(fuga1)
    .append(fuga2)
    .append(fuga3);
// ↓
$(hoge)
    .append(fuga1, fuga2, fuga3);

before()やafter()でも！

$.supportでらくらく

if ( !$.support.opacity ) {
    // ここにIE8以下用のsomething
}

IE8以下はopacityがない(透過はfilterでやってる）ことを利用する

誰得jQueryプラグインを使う