zepto.js is a minimalist inlinable framework for mobile WebKit browsers, with a jQuery-like chaining syntax
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 1392 commits behind madrobby:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Zepto.js: a minimalist framework for mobile WebKit browsers

Zepto.js is a minimalist inlinable framework for mobile WebKit browsers, with a jQuery-like chaining syntax

The ultimate goal is to have a ~2k library that handles most basic dredge work for you in a nice API so you can concentrate on getting stuff done.

Primary target platforms are:

  • iOS 4+

  • Android 2.2+

  • webOS 1.4.5+

Secondary platforms are:

  • Safari 5+ (desktop)

  • Chrome 5+ (desktop)

Syntax & features:

Basic call with CSS selector:


Instead of a selector, a DOM Element, or a list of nodes can be passed in.

The $ function takes an optional context argument, which can be a DOM Element or a Zepto object:

$('span', $('p'))  // -> find all <span> elements in <p> elements

$('p').bind('click', function(){
  $('span', this).css('color:red'); // affects "span" children/grandchildren

Context and .find calls are equivalent:

$('span', $('p'))    // same
$('p').find('span')  // same

Element functions:

get(): return array of all elements found
get(0): return first element found
each(callback): iterate over array of all elements found
index('selector'): return an integer indicating the position of 'selector' in array of all elements found
first(): remove all but the first element from the list of found elements

find('selector'): find all children/grandchildren that match the given selector
closest('selector'): traverses the DOM upwards to find the first matching element
next(): next siblings
prev(): previous siblings
is('selector'): returns true/false if first element matches the selector

remove(): remove element

html('new html'): set the contents of the element(s)
append, prepend, before, after: like html, but add html to element contents (or before/after)
html(): get first elements .innerHTML
show(): forces elements to be displayed (only works correctly for block elements right now)
hide(): removes a elements from layout

offset(): get object with top: left: width: height: properties (in px)
height(): get first elements height in px
width(): get first elements width in px

attr('attribute'): get element attribute
attr('attribute', 'value'): set element attribute

css('css property', 'value'): set a CSS property
css({ property1: value1, property2: value2 }): set multiple CSS properties
css('css property'): get this CSS property of the first element

addClass('classname'): adds a CSS class name
removeClass('classname'): removes a CSS class name
hasClass('classname'): returns true of first element has a classname set

bind(type, function): add an event listener (see below)
delegate(selector, type, function): add an event listener w/ event delegation (see below)
live(type, function): add an event listener that listens to the selector for current and future elements
trigger(type): triggers an event

Non-jQuery functions

  return property for each element
  e.g. pluck('innerHTML') returns an array of all innerHTML properties of all elements found

  remove all null or undefined elements from list of elements found

anim(transform, opacity, duration):
  use -webkit-transform/opacity and do an animation

Utility functions:

$(document).ready(function(){ ... }): call function after DOM is ready to use (before load event fires)

Event handlers

Adding an event listener:

$('some selector').bind('click', function(event){ ... });

Adding an event listener on multiple events:

$('some selector').bind('touchstart touchmove touchend', function(event){ ... });

Adding one event listener that uses event delegation to be only active on a range of children/grandchildren (as given with the subselector):

$('some selector').delegate('some subselector', 'touchstart', function(event){ alert("I'm touched!") });

Adding a “live” event listener, that fires on all elements that match the selector now and in the future:

$('p.yay').live('click', function(){ alert("Clicked a p.yay element!") });

Touch events


$('some selector').tap(function(){ ... });


$('some selector').doubleTap(function(){ ... });

Swiping (e.g. “delete” button when swiping over a list entry):

$('some selector').swipe(function(){ ... });


$.get(url, callback)
$.post(url, [data], [callback], [mime-type])
$.getJSON(url, callback)

$('selector').load('url'[, callback]);
$('selector').load('url #fragment-selector'[, callback]);

Environmental information

Zepto includes information about the environment it is running in the $.os object:

$.os.ios     // => true if running on Apple iOS
$.os.android // => true if running on Android
$.os.webos   // => true if running on HP/Palm WebOS
$.os.version // => string with version number, "4.0", "3.1.1", "2.1", etc.
$.os.iphone  // => true if running on iphone
$.os.ipad    // => true if running on ipad


zepto.js can be used as-is. However, for best efficiency, run the included build step that uses the Google Closure Compiler to minify zepto.js and will give you an estimate on the compression that is achievable when zepto.js is served Gzipped.

For this to work, you need Ruby and Rake installed.

$ rake

You'll see an output like:

Original version: 5.7k
Minified: 3.7k
Minified and gzipped: 1.6k, compression factor 3.6

The minified file is saved in dist/zepto.min.js.

Loading Zepto

You load Zepto by using

<script src="/path/to/zepto.min.js"></script>

Or alternatively, you can just stick in the contents of zepto.min.js into a <script> tag in your HTML for the best loading performance. No need to load it form an external file!


I'd love some help on this, so please feel free to mess around!

If you don't know how a method should behave, please use jQuery as a reference. Zepto.js should closely emulate it. Note that emulation of all features of jQuery is not a project goal, rather we want the most useful parts while keeping to the ~2k minified goal.

Also, Zepto.js contains some non-jQuery extensions, that are geared towards mobile devices.

Visit zeptojs.com/

Join #zepto on irc.freenode.net and stay updated on twitter.com/zeptojs

Have fun!


Zepto.js is is licensed under the terms of the MIT License, see the included MIT-LICENSE file.