native JS vs Zepto (webkit only) (v2)

Revision 2 of this benchmark created by Federico "Lox" Lucignano on August 27, 2011

Description

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="native1">NATIVE 1 ID</div>
<div class="native1">NATIVE 1 CLASS</div>
<div class="native1">NATIVE 1 CLASS</div>
<div class="native1">NATIVE 1 CLASS</div>
<div class="native1">NATIVE 1 CLASS</div>
<div class="native1">NATIVE 1 CLASS</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="native2">NATIVE 2 ID</div>
<div class="native2">NATIVE 2 CLASS</div>
<div class="native2">NATIVE 2 CLASS</div>
<div class="native2">NATIVE 2 CLASS</div>
<div class="native2">NATIVE 2 CLASS</div>
<div class="native2">NATIVE 2 CLASS</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="zepto">ZEPTO ID</div>
<div class="zepto">ZEPTO CLASS</div>
<div class="zepto">ZEPTO CLASS</div>
<div class="zepto">ZEPTO CLASS</div>
<div class="zepto">ZEPTO CLASS</div>
<div class="zepto">ZEPTO CLASS</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="jquery">JQUERY ID</div>
<div class="jquery">JQUERY CLASS</div>
<div class="jquery">JQUERY CLASS</div>
<div class="jquery">JQUERY CLASS</div>
<div class="jquery">JQUERY CLASS</div>
<div class="jquery">JQUERY CLASS</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
  //     Zepto.js
  //     (c) 2010, 2011 Thomas Fuchs
  //     Zepto.js may be freely distributed under the MIT license.
  (function(a) {
    String.prototype.trim === a && (String.prototype.trim = function() {
      return this.replace(/^\s+/, "").replace(/\s+$/, "")
    }), Array.prototype.reduce === a && (Array.prototype.reduce = function(b) {
      if (this === void 0 || this === null) throw new TypeError;
      var c = Object(this),
          d = c.length >>> 0,
          e = 0,
          f;
      if (typeof b != "function") throw new TypeError;
      if (d == 0 && arguments.length == 1) throw new TypeError;
      if (arguments.length >= 2) f = arguments[1];
      else do {
        if (e in c) {
          f = c[e++];
          break
        }
        if (++e >= d) throw new TypeError
      } while (!0);
      while (e < d) e in c && (f = b.call(a, f, c[e], e, c)), e++;
      return f
    })
  })();
  var Zepto = function() {
      function K(a, c) {
        c(a);
        for (b in a.childNodes) K(a.childNodes[b], c)
      }
      function J(a, b, c) {
        var d = !a || a == 3 ? b : b.parentNode;
        d.insertBefore(c, a ? a == 1 ? b.nextSibling : a == 2 ? b : null : d.firstChild)
      }
      function I(a, b, c, d) {
        return s(b) ? b.call(a, c, d) : b
      }
      function H(b, c) {
        return c === a ? G(b) : G(b).filter(c)
      }
      function G(b, d) {
        if (!b) return F();
        if (d !== a) return G(d).find(b);
        if (s(b)) return G(g).ready(b);
        if (b instanceof F) return b;
        var e;
        u(b) ? e = w(b) : m.indexOf(b.nodeType) >= 0 || b === window ? (e = [b], b = null) : l.test(b) ? (e = E(b, RegExp.$1), b = null) : b.nodeType && b.nodeType == 3 ? e = [b] : e = c(g, b);
        return F(e, b)
      }
      function F(a, b) {
        a = a || e, a.__proto__ = F.prototype, a.selector = b || "";
        return a
      }
      function E(b, c) {
        c === a && l.test(b) && RegExp.$1, c in r || (c = "*");
        var d = r[c];
        d.innerHTML = "" + b;
        return f.call(d.childNodes)
      }
      function D(a) {
        var b, c;
        h[a] || (b = g.createElement(a), g.body.appendChild(b), c = j(b, "").getPropertyValue("display"), b.parentNode.removeChild(b), c == "none" && (c = "block"), h[a] = c);
        return h[a]
      }
      function C(a, b) {
        return typeof b == "number" && !k[z(a)] ? b + "px" : b
      }
      function B(a) {
        return a in i ? i[a] : i[a] = new RegExp("(^|\\s)" + a + "(\\s|$)")
      }
      function A(a) {
        return a.filter(function(a, b, c) {
          return c.indexOf(a) == b
        })
      }
      function z(a) {
        return a.replace(/::/g, "/").replace(/([A-Z]+)([A-Z][a-z])/g, "$1_$2").replace(/([a-z\d])([A-Z])/g, "$1_$2").replace(/_/g, "-").toLowerCase()
      }
      function y(a) {
        return a.replace(/-+(.)?/g, function(a, b) {
          return b ? b.toUpperCase() : ""
        })
      }
      function x(a) {
        return a.length > 0 ? [].concat.apply([], a) : a
      }
      function w(b) {
        return b.filter(function(b) {
          return b !== a && b !== null
        })
      }
      function v(a) {
        return typeof a.length == "number"
      }
      function u(a) {
        return a instanceof Array
      }
      function t(a) {
        return a instanceof Object
      }
      function s(a) {
        return {}.toString.call(a) == "[object Function]"
      }
      var a, b, c, d, e = [],
          f = e.slice,
          g = window.document,
          h = {},
          i = {},
          j = g.defaultView.getComputedStyle,
          k = {
          "column-count": 1,
          columns: 1,
          "font-weight": 1,
          "line-height": 1,
          opacity: 1,
          "z-index": 1,
          zoom: 1
          },
          l = /^\s*<(\w+)[^>]*>/,
          m = [1, 9, 11],
          n = ["prepend", "after", "before", "append"],
          o = ["append", "prepend"],
          p = g.createElement("table"),
          q = g.createElement("tr"),
          r = {
          tr: g.createElement("tbody"),
          tbody: p,
          thead: p,
          tfoot: p,
          td: q,
          th: q,
          "*": g.createElement("div")
          };
      G.extend = function(a) {
        f.call(arguments, 1).forEach(function(c) {
          for (b in c) a[b] = c[b]
        });
        return a
      }, G.qsa = c = function(a, b) {
        return f.call(a.querySelectorAll(b))
      }, G.isFunction = s, G.isObject = t, G.isArray = u, G.map = function(a, b) {
        var c, d = [],
            e, f;
        if (v(a)) for (e = 0; e < a.length; e++) c = b(a[e], e), c != null && d.push(c);
        else for (f in a) c = b(a[f], f), c != null && d.push(c);
        return x(d)
      }, G.each = function(a, b) {
        var c, d;
        if (v(a)) {
          for (c = 0; c < a.length; c++) if (b(c, a[c]) === !1) return a
        } else for (d in a) if (b(d, a[d]) === !1) return a;
        return a
      }, G.fn = {
        forEach: e.forEach,
        reduce: e.reduce,
        push: e.push,
        indexOf: e.indexOf,
        concat: e.concat,
        map: function(a) {
          return G.map(this, function(b, c) {
            return a.call(b, c, b)
          })
        },
        slice: function() {
          return G(f.apply(this, arguments))
        },
        ready: function(a) {
          (g.readyState == "complete" || g.readyState == "loaded") && a(), g.addEventListener("DOMContentLoaded", a, !1);
          return this
        },
        get: function(b) {
          return b === a ? this : this[b]
        },
        size: function() {
          return this.length
        },
        remove: function() {
          return this.each(function() {
            this.parentNode != null && this.parentNode.removeChild(this)
          })
        },
        each: function(a) {
          this.forEach(function(b, c) {
            a.call(b, c, b)
          });
          return this
        },
        filter: function(a) {
          return G([].filter.call(this, function(b) {
            return c(b.parentNode, a).indexOf(b) >= 0
          }))
        },
        end: function() {
          return this.prevObject || G()
        },
        add: function(a, b) {
          return G(A(this.concat(G(a, b))))
        },
        is: function(a) {
          return this.length > 0 && G(this[0]).filter(a).length > 0
        },
        not: function(b) {
          var c = [];
          if (s(b) && b.call !== a) this.each(function(a) {
            b.call(this, a) || c.push(this)
          });
          else {
            var d = typeof b == "string" ? this.filter(b) : v(b) && s(b.item) ? f.call(b) : G(b);
            this.forEach(function(a) {
              d.indexOf(a) < 0 && c.push(a)
            })
          }
          return G(c)
        },
        eq: function(a) {
          return a === -1 ? this.slice(a) : this.slice(a, +a + 1)
        },
        first: function() {
          return G(this[0])
        },
        last: function() {
          return G(this[this.length - 1])
        },
        find: function(a) {
          var b;
          this.length == 1 ? b = c(this[0], a) : b = this.map(function() {
            return c(this, a)
          });
          return G(b)
        },
        closest: function(b, d) {
          var e = this[0],
              f = c(d !== a ? d : g, b);
          f.length === 0 && (e = null);
          while (e && e !== g && f.indexOf(e) < 0) e = e.parentNode;
          return G(e !== g && e)
        },
        parents: function(a) {
          var b = [],
              c = this;
          while (c.length > 0) c = G.map(c, function(a) {
            if ((a = a.parentNode) && a !== g && b.indexOf(a) < 0) {
              b.push(a);
              return a
            }
          });
          return H(b, a)
        },
        parent: function(a) {
          return H(A(this.pluck("parentNode")), a)
        },
        children: function(a) {
          return H(this.map(function() {
            return f.call(this.children)
          }), a)
        },
        siblings: function(a) {
          return H(this.map(function(a, b) {
            return f.call(b.parentNode.children).filter(function(a) {
              return a !== b
            })
          }), a)
        },
        empty: function() {
          return this.each(function() {
            this.innerHTML = ""
          })
        },
        pluck: function(a) {
          return this.map(function() {
            return this[a]
          })
        },
        show: function() {
          return this.each(function() {
            this.style.display == "none" && (this.style.display = null), j(this, "").getPropertyValue("display") == "none" && (this.style.display = D(this.nodeName))
          })
        },
        replaceWith: function(a) {
          return this.each(function() {
            var b = this.parentNode,
                c = this.nextSibling;
            G(this).remove(), c ? G(c).before(a) : G(b).append(a)
          })
        },
        wrap: function(a) {
          return this.each(function() {
            G(this).wrapAll(G(a)[0].cloneNode(!1))
          })
        },
        wrapAll: function(a) {
          this[0] && (G(this[0]).before(a = G(a)), a.append(this));
          return this
        },
        unwrap: function() {
          this.parent().each(function() {
            G(this).replaceWith(G(this).children())
          });
          return this
        },
        hide: function() {
          return this.css("display", "none")
        },
        toggle: function(b) {
          return (b === a ? this.css("display") == "none" : b) ? this.show() : this.hide()
        },
        prev: function() {
          return G(this.pluck("previousElementSibling"))
        },
        next: function() {
          return G(this.pluck("nextElementSibling"))
        },
        html: function(b) {
          return b === a ? this.length > 0 ? this[0].innerHTML : null : this.each(function(a) {
            var c = this.innerHTML;
            G(this).empty().append(I(this, b, a, c))
          })
        },
        text: function(b) {
          return b === a ? this.length > 0 ? this[0].textContent : null : this.each(function() {
            this.textContent = b
          })
        },
        attr: function(c, d) {
          return typeof c == "string" && d === a ? this.length > 0 && this[0].nodeName == "INPUT" && this[0].type == "text" && c == "value" ? this.val() : this.length > 0 ? this[0].getAttribute(c) || (c in this[0] ? this[0][c] : a) : a : this.each(function(a) {
            if (t(c)) for (b in c) this.setAttribute(b, c[b]);
            else this.setAttribute(c, I(this, d, a, this.getAttribute(c)))
          })
        },
        removeAttr: function(a) {
          return this.each(function() {
            this.removeAttribute(a)
          })
        },
        data: function(a, b) {
          return this.attr("data-" + a, b)
        },
        val: function(b) {
          return b === a ? this.length > 0 ? this[0].value : null : this.each(function() {
            this.value = b
          })
        },
        offset: function() {
          if (this.length == 0) return null;
          var a = this[0].getBoundingClientRect();
          return {
            left: a.left + g.body.scrollLeft,
            top: a.top + g.body.scrollTop,
            width: a.width,
            height: a.height
          }
        },
        css: function(c, d) {
          if (d === a && typeof c == "string") return this[0].style[y(c)] || j(this[0], "").getPropertyValue(c);
          var e = "";
          for (b in c) e += z(b) + ":" + C(b, c[b]) + ";";
          typeof c == "string" && (e = z(c) + ":" + C(c, d));
          return this.each(function() {
            this.style.cssText += ";" + e
          })
        },
        index: function(a) {
          return a ? this.indexOf(G(a)[0]) : this.parent().children().indexOf(this[0])
        },
        hasClass: function(a) {
          return this.length < 1 ? !1 : B(a).test(this[0].className)
        },
        addClass: function(a) {
          return this.each(function(b) {
            d = [];
            var c = this.className,
                e = I(this, a, b, c);
            e.split(/\s+/g).forEach(function(a) {
              G(this).hasClass(a) || d.push(a)
            }, this), d.length && (this.className += (c ? " " : "") + d.join(" "))
          })
        },
        removeClass: function(b) {
          return this.each(function(c) {
            if (b === a) return this.className = "";
            d = this.className, I(this, b, c, d).split(/\s+/g).forEach(function(a) {
              d = d.replace(B(a), " ")
            }), this.className = d.trim()
          })
        },
        toggleClass: function(b, c) {
          return this.each(function(d) {
            var e = this.className,
                f = I(this, b, d, e);
            c !== a && !c || G(this).hasClass(f) ? G(this).removeClass(f) : G(this).addClass(f)
          })
        }
      }, "filter,add,not,eq,first,last,find,closest,parents,parent,children,siblings".split(",").forEach(function(a) {
        var b = G.fn[a];
        G.fn[a] = function() {
          var a = b.apply(this, arguments);
          a.prevObject = this;
          return a
        }
      }), ["width", "height"].forEach(function(b) {
        G.fn[b] = function(c) {
          var d;
          return c === a ? (d = this.offset()) && d[b] : this.css(b, c)
        }
      }), n.forEach(function(a, b) {
        G.fn[a] = function(a) {
          var c = typeof a == "object" ? a : E(a);
          "length" in c || (c = [c]);
          if (c.length < 1) return this;
          var d = this.length,
              e = d > 1,
              f = b < 2;
          return this.each(function(a, g) {
            for (var h = 0; h < c.length; h++) {
              var i = c[f ? c.length - h - 1 : h];
              K(i, function(a) {
                a.nodeName != null && a.nodeName.toUpperCase() === "SCRIPT" && window.eval.call(window, a.innerHTML)
              }), e && a < d - 1 && (i = i.cloneNode(!0)), J(b, g, i)
            }
          })
        }
      }), o.forEach(function(a) {
        G.fn[a + "To"] = function(b) {
          typeof b != "object" && (b = G(b)), b[a](this);
          return this
        }
      }), F.prototype = G.fn;
      return G
      }();
  "$" in window || (window.$ = Zepto), function(a) {
    function n(b) {
      var c = a.extend({
        originalEvent: b
      }, b);
      a.each(m, function(a, d) {
        c[a] = function() {
          this[d] = k;
          return b[a].apply(b, arguments)
        }, c[d] = l
      });
      return c
    }
    function j(a, b, d, g) {
      var h = e(a);
      (b || "").split(/\s/).forEach(function(b) {
        f(a, b, d, g).forEach(function(b) {
          delete c[h][b.i], a.removeEventListener(b.e, b.proxy, !1)
        })
      })
    }
    function i(b, d, f, h, i) {
      var j = e(b),
          k = c[j] || (c[j] = []);
      d.split(/\s/).forEach(function(c) {
        var d = i || f,
            e = function(a) {
            var c = d.apply(b, [a].concat(a.data));
            c === !1 && a.preventDefault();
            return c
            },
            j = a.extend(g(c), {
            fn: f,
            proxy: e,
            sel: h,
            del: i,
            i: k.length
          });
        k.push(j), b.addEventListener(j.e, e, !1)
      })
    }
    function h(a) {
      return new RegExp("(?:^| )" + a.replace(" ", " .* ?") + "(?: |$)")
    }
    function g(a) {
      var b = ("" + a).split(".");
      return {
        e: b[0],
        ns: b.slice(1).sort().join(" ")
      }
    }
    function f(a, b, d, f) {
      b = g(b);
      if (b.ns) var i = h(b.ns);
      return (c[e(a)] || []).filter(function(a) {
        return a && (!b.e || a.e == b.e) && (!b.ns || i.test(a.ns)) && (!d || a.fn == d) && (!f || a.sel == f)
      })
    }
    function e(a) {
      return a._zid || (a._zid = d++)
    }
    var b = a.qsa,
        c = {},
        d = 1;
    a.event = {
      add: i,
      remove: j
    }, a.fn.bind = function(a, b) {
      return this.each(function() {
        i(this, a, b)
      })
    }, a.fn.unbind = function(a, b) {
      return this.each(function() {
        j(this, a, b)
      })
    }, a.fn.one = function(a, b) {
      return this.each(function() {
        var c = this;
        i(this, a, function(e) {
          b.call(c, e), j(c, a, arguments.callee)
        })
      })
    };
    var k = function() {
        return !0
        },
        l = function() {
        return !1
        },
        m = {
        preventDefault: "isDefaultPrevented",
        stopImmediatePropagation: "isImmediatePropagationStopped",
        stopPropagation: "isPropagationStopped"
        };
    a.fn.delegate = function(c, d, e) {
      return this.each(function(f, g) {
        i(g, d, e, c, function(d, f) {
          var h = d.target,
              i = b(g, c);
          while (h && i.indexOf(h) < 0) h = h.parentNode;
          h && h !== g && h !== document && e.call(h, a.extend(n(d), {
            currentTarget: h,
            liveFired: g
          }), f)
        })
      })
    }, a.fn.undelegate = function(a, b, c) {
      return this.each(function() {
        j(this, b, c, a)
      })
    }, a.fn.live = function(b, c) {
      a(document.body).delegate(this.selector, b, c);
      return this
    }, a.fn.die = function(b, c) {
      a(document.body).undelegate(this.selector, b, c);
      return this
    }, a.fn.trigger = function(b, c) {
      typeof b == "string" && (b = a.Event(b)), b.data = c;
      return this.each(function() {
        this.dispatchEvent(b)
      })
    }, a.fn.triggerHandler = function(b, c) {
      var d, e;
      this.each(function(g, h) {
        d = n(typeof b == "string" ? a.Event(b) : b), d.data = c, d.target = h, a.each(f(h, b.type || b), function(a, b) {
          e = b.proxy(d);
          if (d.isImmediatePropagationStopped()) return !1
        })
      });
      return e
    }, "focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout change select keydown keypress keyup error".split(" ").forEach(function(b) {
      a.fn[b] = function(a) {
        return this.bind(b, a)
      }
    }), ["focus", "blur"].forEach(function(b) {
      a.fn[b] = function(a) {
        if (a) this.bind(b, a);
        else if (this.length) try {
          this.get(0)[b]()
        } catch (c) {}
        return this
      }
    }), a.Event = function(b, c) {
      var d = document.createEvent("Events");
      c && a.extend(d, c), d.initEvent(b, !c || c.bubbles !== !1, !0);
      return d
    }
  }(Zepto), function(a) {
    function b(a) {
      var a = a,
          b = {},
          c = a.match(/(Android)\s+([\d.]+)/),
          d = a.match(/(iPad).*OS\s([\d_]+)/),
          e = !d && a.match(/(iPhone\sOS)\s([\d_]+)/),
          f = a.match(/(webOS|hpwOS)[\s\/]([\d.]+)/),
          g = f && a.match(/TouchPad/),
          h = a.match(/(BlackBerry).*Version\/([\d.]+)/);
      c && (b.android = !0, b.version = c[2]), e && (b.ios = !0, b.version = e[2].replace(/_/g, "."), b.iphone = !0), d && (b.ios = !0, b.version = d[2].replace(/_/g, "."), b.ipad = !0), f && (b.webos = !0, b.version = f[2]), g && (b.touchpad = !0), h && (b.blackberry = !0, b.version = h[2]);
      return b
    }
    a.os = b(navigator.userAgent), a.__detect = b;
    var c = navigator.userAgent.match(/WebKit\/([\d.]+)/);
    a.browser = c ? {
      webkit: !0,
      version: c[1]
    } : {
      webkit: !1
    }
  }(Zepto), function(a, b) {
    var c = ["scale", "scaleX", "scaleY", "translate", "translateX", "translateY", "translate3d", "skew", "skewX", "skewY", "rotate", "rotateX", "rotateY", "rotateZ", "rotate3d", "matrix"];
    a.fn.anim = function(a, d, e, f) {
      var g = [],
          h = {},
          i, j = this,
          k;
      for (i in a) c.indexOf(i) >= 0 ? g.push(i + "(" + a[i] + ")") : h[i] = a[i];
      k = function() {
        j.css({
          "-webkit-transition": "none"
        }), f && f()
      }, d > 0 ? this.one("webkitTransitionEnd", k) : setTimeout(k, 0), g.length > 0 && (h["-webkit-transform"] = g.join(" ")), h["-webkit-transition"] = "all " + (d !== b ? d : .5) + "s " + (e || ""), setTimeout(function() {
        j.css(h)
      }, 0);
      return this
    }
  }(Zepto), function(a) {
    function e() {}
    var b = 0,
        c = a.isObject,
        d;
    a.ajaxJSONP = function(c) {
      var d = "jsonp" + ++b,
          e = document.createElement("script");
      window[d] = function(a) {
        c.success(a), delete window[d]
      }, e.src = c.url.replace(/=\?/, "=" + d), a("head").append(e)
    }, a.ajaxSettings = {
      type: "GET",
      beforeSend: e,
      success: e,
      error: e,
      complete: e,
      accepts: {
        script: "text/javascript, application/javascript",
        json: "application/json",
        xml: "application/xml, text/xml",
        html: "text/html",
        text: "text/plain"
      }
    }, a.ajax = function(b) {
      b = b || {};
      var e = a.extend({}, b);
      for (d in a.ajaxSettings) e[d] || (e[d] = a.ajaxSettings[d]);
      if (/=\?/.test(e.url)) return a.ajaxJSONP(e);
      e.url || (e.url = window.location.toString()), e.data && !e.contentType && (e.contentType = "application/x-www-form-urlencoded"), c(e.data) && (e.data = a.param(e.data));
      if (e.type.match(/get/i) && e.data) {
        var f = e.data;
        e.url.match(/\?.*=/) ? f = "&" + f : f[0] != "?" && (f = "?" + f), e.url += f
      }
      var g = e.accepts[e.dataType],
          h = new XMLHttpRequest;
      e.headers = a.extend({
        "X-Requested-With": "XMLHttpRequest"
      }, e.headers || {}), g && (e.headers.Accept = g), h.onreadystatechange = function() {
        if (h.readyState == 4) {
          var a, b = !1;
          if (h.status >= 200 && h.status < 300 || h.status == 0) {
            if (g == "application/json" && h.responseText != "") try {
              a = JSON.parse(h.responseText)
            } catch (c) {
              b = c
            } else a = h.responseText;
            b ? e.error(h, "parsererror", b) : e.success(a, "success", h)
          } else b = !0, e.error(h, "error");
          e.complete(h, b ? "error" : "success")
        }
      }, h.open(e.type, e.url, !0);
      if (e.beforeSend(h, e) === !1) {
        h.abort();
        return !1
      }
      e.contentType && (e.headers["Content-Type"] = e.contentType);
      for (name in e.headers) h.setRequestHeader(name, e.headers[name]);
      h.send(e.data);
      return h
    }, a.get = function(b, c) {
      a.ajax({
        url: b,
        success: c
      })
    }, a.post = function(b, c, d, e) {
      a.isFunction(c) && (e = e || d, d = c, c = null), a.ajax({
        type: "POST",
        url: b,
        data: c,
        success: d,
        dataType: e
      })
    }, a.getJSON = function(b, c) {
      a.ajax({
        url: b,
        success: c,
        dataType: "json"
      })
    }, a.fn.load = function(b, c) {
      if (!this.length) return this;
      var d = this,
          e = b.split(/\s/),
          f;
      e.length > 1 && (b = e[0], f = e[1]), a.get(b, function(b) {
        d.html(f ? a(document.createElement("div")).html(b).find(f).html() : b), c && c()
      });
      return this
    }, a.param = function(b, e) {
      var f = [],
          g = function(a, b) {
          f.push(encodeURIComponent(e ? e + "[" + a + "]" : a) + "=" + encodeURIComponent(b))
          },
          h = a.isArray(b);
      for (d in b) c(b[d]) ? f.push(a.param(b[d], e ? e + "[" + d + "]" : d)) : g(h ? "" : d, b[d]);
      return f.join("&").replace("%20", "+")
    }
  }(Zepto), function(a) {
    a.fn.serializeArray = function() {
      var b = [],
          c;
      a(Array.prototype.slice.call(this.get(0).elements)).each(function() {
        c = a(this), (c.attr("type") !== "radio" || c.is(":checked")) && (c.attr("type") !== "checkbox" || !! c.is(":checked")) && b.push({
          name: c.attr("name"),
          value: c.val()
        })
      });
      return b
    }, a.fn.serialize = function() {
      var a = [];
      this.serializeArray().forEach(function(b) {
        a.push(encodeURIComponent(b.name) + "=" + encodeURIComponent(b.value))
      });
      return a.join("&")
    }, a.fn.submit = function(b) {
      if (b) this.bind("submit", b);
      else if (this.length) {
        var c = a.Event("submit");
        this.eq(0).trigger(c), c.defaultPrevented || this.get(0).submit()
      }
      return this
    }
  }(Zepto), function(a) {
    function g() {
      b.last && Date.now() - b.last >= f && (a(b.target).trigger("longTap"), b = {})
    }
    function e(a, b, c, d) {
      var e = Math.abs(a - b),
          f = Math.abs(c - d);
      return e >= f ? a - b > 0 ? "Left" : "Right" : c - d > 0 ? "Up" : "Down"
    }
    function d(a) {
      return "tagName" in a ? a : a.parentNode
    }
    var b = {},
        c, f = 750;
    a(document).ready(function() {
      a(document.body).bind("touchstart", function(a) {
        var e = Date.now(),
            h = e - (b.last || e);
        b.target = d(a.touches[0].target), c && clearTimeout(c), b.x1 = a.touches[0].pageX, b.y1 = a.touches[0].pageY, h > 0 && h <= 250 && (b.isDoubleTap = !0), b.last = e, setTimeout(g, f)
      }).bind("touchmove", function(a) {
        b.x2 = a.touches[0].pageX, b.y2 = a.touches[0].pageY
      }).bind("touchend", function(d) {
        b.isDoubleTap ? (a(b.target).trigger("doubleTap"), b = {}) : b.x2 > 0 || b.y2 > 0 ? ((Math.abs(b.x1 - b.x2) > 30 || Math.abs(b.y1 - b.y2) > 30) && a(b.target).trigger("swipe") && a(b.target).trigger("swipe" + e(b.x1, b.x2, b.y1, b.y2)), b.x1 = b.x2 = b.y1 = b.y2 = b.last = 0) : "last" in b && (c = setTimeout(function() {
          c = null, a(b.target).trigger("tap"), b = {}
        }, 250))
      }).bind("touchcancel", function() {
        b = {}
      })
    }), ["swipe", "swipeLeft", "swipeRight", "swipeUp", "swipeDown", "doubleTap", "tap", "longTap"].forEach(function(b) {
      a.fn[b] = function(a) {
        return this.bind(b, a)
      }
    })
  }(Zepto)
  
  var element,
  elements,
  content = "BOOM",
  colors = ["#ABABAB", "#3F4D2C", "#F51AB6"],
  colorIndex;
  
  function randomColor(){
      return colors[Math.floor(Math.random()*colors.length)];
  }
  
  function processAll(elems){
        for(var x=0, y=elems.length; x<y; x++){
                element = elems[x];
                element.style.backgroundColor = randomColor();
                element.innerHTML = content; 
                element.addEventListener('click', clickHandler);
        }
  }
  
  function processOne(elem){
        elem.style.backgroundColor = randomColor();
        elem.innerHTML = content; 
        elem.addEventListener('click', clickHandler);
  }
  
  function clickHandler(event){
        void(0);
  }
</script>

Test runner

processOne(document.getElementById('native1'));

processAll(document.getElementsByClassName('native1'));

processOne(document.querySelector('#native2'));

processAll(document.querySelectorAll('.native2'));

element = Zepto('#zepto');

element.css('background-color', randomColor())
.html(content)
.bind('click', clickHandler);

elements = Zepto('.zepto');

elements.each(function(){
    Zepto(this).css('background-color', randomColor())
    .html(content)
    .bind('click', clickHandler);
});

element = jQuery('#jquery');

element.css('background-color', randomColor())
.html(content)
.bind('click', clickHandler);

elements = jQuery('.jquery');

elements.each(function(){
    jQuery(this).css('background-color', randomColor())
    .html(content)
    .bind('click', clickHandler);
});

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by Jakub on August 27, 2011
• Revision 2: published by Federico "Lox" Lucignano on August 27, 2011
• Revision 3: published on December 23, 2011