appendで追加するあれやこれのパターン。別に珍しいことないですよくある光景です。appendだけじゃなくてhtmlとかafterとかそゆのでも使えます。まあ何で使えるかっていうのはjQueryのドキュメント見てください

jQueryオブジェクト

まあ普通はこれですよ。

var hoge = $("#hoge");
$("#fuga").append(hoge);

とか極端な例だけど

$("#hoge").append(
  $("
")
    .append(
      $("")
        .attr("href", fuga)
        .text(piyo)
    )
);

みたいなの

HTML要素

これもあるある。

$("#hoge").append(
  "
fugafuga
"
);

HTML要素少し多い場合

ちょっと見にくい。

$("#hoge").append(
  "
\
    
piyo
\
    
fungaaaaaaa
\
  
"
);

上のパターンを配列で

割とみやすい。

$("#hoge").append([
  "
",
    "
piyo
",
    "
fungaaaaaaa
",
  "
"
].join(""));

functionで要素を返す

これあんまり使ってないと思いますけど超便利なんですよ。
中でたくさん作ってまとめて返したり、条件分岐で返したり夢が広がります。

$("#hoge").append(function() {
  var elm = $("

"), li = []; for ( var i = 0; i < l; i++ ) { li.push( "

" + fuga + "

" ); } return elm.append(li.join("")); });

そんな感じで

最後のやつも積極的に使うといいと思います。

ブログとかのプラグインでよく分からず使ってる人もいるみたいですし。結論は一番上のやつやってればいいんですけど、というか、プラグインソースは全部こうなってないとだめなんですけど、古いソースコードはそうなっていないものもあったりして（thickboxとか）、思いつく方法全部書き出します。

Read more

JavaScript Advent Calendar 2010も22日目！あと3日ですよ。僕はちょうど学んだばかりのCanvasをアウトプットもかねて、まとめと実践を書いてみます。知ることと行うことは同一である、最近行ったセミナーでも言ってました。

jsdo.itにはほんまにこれCanvasなん？なサンプルいっぱいありますね。あーいうの書けるようになりたいなぁとか思いつつ、jQueryばっかりさわってた僕は.animate()メソッドの便利さに取り憑かれていたので、Canvasの絵もまだ上下左右で動かすくらいしかできません。慣れが必要です。。

どうでもいい情報としてCanvasの読み方なんですけど、「キャンバス」じゃなくて「カンバス」が正しいようです。キャンバス・カンバスどっちでもよさげ。僕はキャンバスって読んでました。けどカンバスにします。

前置きはこれくらいにして、今回は次のようなカラフルな箱が延々と落ちていくっていうのを書いてみます。今回のサンプルはすべてCanvasなのでIE8以下だと見れないと思います。あとjsdo.itのサンプルをいくつか貼っているのでRSSだと表示されません。

先に参考サイト紹介してますが、いらない人は飛ばしてください。レッツカンバス！

Read more

2010年の人気エントリーまとめました! – MOLに触発されて（まねじゃない）振り返りもかねて僕も書きますです。

でも5月にドメインを変えたので5月からの集計です。それ以前も統合するのは主にめんどくさい的な理由でやりたくないです・・・アクセス数も全然多くないですけど、今年は初めてから今までで一番記事書いた気がする。特に12月に入ってからは14日以外の平日は毎日更新した・・・！どこかで誰かの役にたてばうれしいです

Read more

ユーザーローカルさんのUserHeatというサービスを使っているのですが、マウスの動き・よくクリックされている箇所・どこがよく見られている等が一目で分かるので、ナビゲーションや記事の書き方の改善などに役立てることができますね。（全然役立てれてませんけど）

Read more