Zepto.js (v1.0rc1) の jQuery との互換性


現在は 1.0 正式版が出ています。こちらをご覧ください：App Framework, Zepto.js 1.0 と jQuery との互換性

jQuery と互換性があり、とっても軽い JavaScript ライブラリ Zepto.
jquery-1.7.2.min.js が 93 KB なのに対し、zepto.min.js (v1.0rc1) はわずか 23 KB。ファイルサイズだけでなく、スクリプトの初期化も圧倒的に速い。（jQuery 2 では初期化の遅さが改善されるという情報あり）

$() 関数での動作の違い

属性セレクタの値は、必ず引用符で括る必要がある。DOM Exception が発生する。

  • $("a[href^=#]") → エラー
  • $("a[href^='#']") → OK

次のセレクタはプラグイン selectors.js が必要

  • :visible, :hidden
  • :selected, :checked
  • :parent, :first, :last, :eq(n)
  • :contains(text), :has(selector)

.attr()/.prop()

jQuery では存在しない属性を取得しようとすると undefined が返ってくる。

Zepto.js では 空文字列 (v1.0) が返ってくる。存在しないのか空なのかは調べようがない。以前は null だった。

.val()

ラジオボタンがあったときの動作の細かな違い。

<label><input type="radio" name="radio" value="1"> 1</label>
<label><input type="radio" name="radio" value="2"> 2</label>
<label><input type="radio" name="radio" value="3" checked> 3</label>
<label><input type="radio" name="radio" value="4"> 4</label>

$("input").each(function(){ $(this).val(); });

このコードを実行すると、jQuery では常に「3」が返ってくるが、Zepto.js ではそれぞれの要素の値が返ってくる。

$("input[name='radio']").val();

ならば jQuery と同じく「3」

.end()/.andSelf() が無い

たとえばこういうコード。

$("#target")
.find("a").attr({href: "http://suzume.cc"}).end()
.find("span").text("chun").end()
.appendTo("#suzume");

stack.js というプラグインで使えるようになる。
複雑なHTMLを生成するときはテンプレートエンジンを使うのが良さそう。mustache.js を YUI Compressor で圧縮すると 5.6 KB.

$.data()

Zepto.js の $.fn.data は jQuery の $.data とは全く違う動作。jQuery は対象の DOM Element について JavaScript のハッシュ（オブジェクト）を作るのに対し、Zepto では data-* 属性に書き込むため文字列しか扱えない。
data プラグインを使用することによって jQeury と同様の動作を行える。

ほか、ないもの一覧

  • $.ajaxPrefilter
  • $.ajaxSetup
  • $.boxModel
  • $.Callbacks
  • .callbacks
  • .clearQueue
  • $.contains
  • .context
  • $.cssHooks
  • .deferred
  • .delay
  • .dequeue
  • $.dequeue
  • .detach
  • $.error
  • .effects
  • $.fx.interval
  • $.getScript
  • $.globalEval
  • $.grep
  • .has
  • $.hasData
  • $.holdReady
  • .innerHeight
  • .innerWidth
  • $.isEmptyObject
  • $.isNumeric
  • $.isWindow
  • $.isXMLDoc
  • $.makeArray
  • $.merge
  • .nextAll
  • .nextUntil
  • $.noConflict
  • $.noop
  • $.now
  • .offsetParent
  • .outerHeight
  • .outerWidth
  • .parentsUntil
  • $.parseJSON
  • $.parseXML
  • .position
  • .prevAll
  • .prevUntil
  • .promise
  • .pushStack
  • .queue
  • $.queue
  • .removeData
  • $.removeData
  • .removeProp
  • .replaceAll
  • .scrollLeft
  • .scrollTop
  • .slideDown
  • .slideToggle
  • .slideUp
  • .stop
  • $.sub
  • $.type
  • $.unique
  • $.when

IEでも動くようにする

検証が大変
→ IEには jQuery を使う

参考