Press → key to advance.
Press Cmd+- / Cmd+Shift++ keys to zoomout/in.
Press T key to change themes.
Kazunori Tokuda / / 5509
徳田 和規 (Kazunori Tokuda)
始めるたての人がハマりそうなところを紹介する、はずだったんですけど、、、
全然思いつかなかったので、基本的なところから難しいかもしれないところまで、小ネタっぽいものをたくさん紹介することにしました。
$(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プラグインを使う
ありがとうございました