Loading...

jQuery春の小ネタ祭り

Press key to advance.
Press Cmd+- / Cmd+Shift++ keys to zoomout/in.
Press T key to change themes.

Kazunori Tokuda / / 5509

自己紹介

徳田 和規 (Kazunori Tokuda)

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

今日お話すること

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

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

jQueryを実行するときは・・・

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

ではなく

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

を使おう

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

jQueryオブジェクト

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

$("#hoge")

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

要素の取得方法(CSSセレクタ)

これが分かればjQueryは簡単(かも)

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

jQueryオブジェクトのキャッシュ

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

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

メソッド内でのthisの違い

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

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

slideDownやfadeOutなどを使うとき

stop(true, true);

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

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

サンプル

参考リンク

animationのdelay

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

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

p4hugajfaewd

CSS()で指定するopacity

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

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

要素があるかないのチェック

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

$("#hoge").length

で確認できる

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

addClass()とremoveClass()

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

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

hogehoge

効率の良いDOM走査

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()やサイズを取得したいとき

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

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

複数の要素を含むjQueryオブジェクト

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

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

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

★ 追記

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

append()メソッドの効率化?

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

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

before()やafter()でも!

IE8以下にhogehogeしたい

$.supportでらくらく

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

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

何の役にも立たない機能を実装

誰得jQueryプラグインを使う

ありがとうございました