or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-features.mdajax.mdanimation.mdbrowser-detection.mdcallback-management.mdcore-dom.mdcss-styling.mddata-management.mdenhanced-selectors.mdevents.mdforms.mdindex.mdmobile-touch.mdstack-operations.md
tile.json

tessl/npm-zepto

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/zepto@1.2.x

To install, run

npx @tessl/cli install tessl/npm-zepto@1.2.0

index.mddocs/

Zepto.js

Zepto.js is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. It provides a lightweight alternative to jQuery, focusing on modern browser support while maintaining familiar methods and patterns. The library features a modular architecture where developers can include only the functionality they need, resulting in optimized builds for mobile web applications and performance-conscious projects.

Package Information

  • Package Name: zepto
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install zepto or include via CDN
  • Browser Support: Modern browsers (IE 10+, Chrome, Firefox, Safari, Mobile)

Core Imports

Zepto can be included via various methods:

Browser Script Tag:

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

CommonJS:

const $ = require('zepto');

ES6 Modules (if using build tools):

import $ from 'zepto';

Global Access:

// Zepto automatically creates global $ and Zepto variables
$(document).ready(function() {
  // Your code here
});

Basic Usage

// DOM selection and manipulation
$('#myElement').addClass('active').text('Hello World');

// Event handling
$('.button').on('click', function() {
  $(this).toggleClass('pressed');
});

// Ajax requests
$.get('/api/data', function(data) {
  $('#content').html(data);
});

// Animation
$('.modal').fadeIn(300);

// Touch events (mobile)
$('.swipeable').on('swipeLeft', function() {
  $(this).addClass('swiped');
});

Architecture

Zepto.js is built with a modular architecture consisting of:

  • Core Module (zepto): Essential DOM manipulation, traversal, and utility functions
  • Event System (event): Comprehensive event handling with delegation and shortcuts
  • Ajax Module (ajax): HTTP requests, JSONP, and form serialization
  • Animation Module (fx + fx_methods): CSS3-based animations and effects
  • Mobile Modules (touch, gesture): Touch gesture recognition for mobile devices
  • Utility Modules: Various enhancements for data handling, browser detection, and compatibility

Each module can be included independently in custom builds, allowing developers to create optimized versions containing only required functionality.

Capabilities

Core DOM Manipulation

Essential DOM operations including element selection, traversal, and manipulation. Forms the foundation of all Zepto functionality.

// Main constructor function
function $(selector, context);

// Core utility functions
$.extend(target, source, deep);
$.type(obj);
$.isFunction(value);
$.isArray(obj);
$.each(elements, callback);
$.map(elements, callback);

Core DOM

Event System

Comprehensive event handling with binding, delegation, triggering, and mobile-optimized touch events.

// Event binding methods
$.fn.on(event, selector, data, callback);
$.fn.off(event, selector, callback);
$.fn.trigger(event, args);

// Event shortcuts
$.fn.click(callback);
$.fn.submit(callback);
$.fn.focus(callback);

Events

Ajax and HTTP

Full-featured Ajax implementation with XHR, JSONP support, and form handling capabilities.

// Ajax methods
$.ajax(options);
$.get(url, data, success, dataType);
$.post(url, data, success, dataType);
$.getJSON(url, data, success);

// Configuration
$.ajaxSettings;

Ajax

CSS and Styling

Advanced CSS manipulation including class management, style properties, and computed styles.

// CSS methods
$.fn.css(property, value);
$.fn.addClass(name);
$.fn.removeClass(name);
$.fn.toggleClass(name, when);
$.fn.hasClass(name);

CSS Styling

Animation Effects

CSS3-powered animation system with transition support and common effect methods.

// Animation methods
$.fn.animate(properties, duration, ease, callback);
$.fn.fadeIn(speed, callback);
$.fn.fadeOut(speed, callback);
$.fn.show(speed, callback);
$.fn.hide(speed, callback);

// Configuration
$.fx.off;
$.fx.speeds;

Animation

Mobile Touch Events

Touch gesture recognition optimized for mobile devices, including swipe, tap, and pinch gestures.

// Touch event methods
$.fn.tap(callback);
$.fn.swipe(callback);
$.fn.swipeLeft(callback);
$.fn.doubleTap(callback);
$.fn.longTap(callback);

Mobile Touch

Form Handling

Form serialization, validation support, and input value management.

// Form methods
$.fn.serialize();
$.fn.serializeArray();
$.fn.val(value);
$.fn.submit(callback);

Forms

Data Management

Data attribute handling and internal data storage system for associating data with DOM elements.

// Data methods
$.fn.data(name, value);
$.fn.removeData(names);
$.data(elem, name, value);
$.hasData(elem);

Data Management

Browser Detection

User agent and platform detection utilities for responsive and device-specific functionality.

// Detection objects
$.os; // Operating system detection
$.browser; // Browser detection

Browser Detection

Advanced Features

Promise/Deferred pattern, callback management, and extended selectors for complex applications.

// Deferred/Promise support
$.Deferred(func);
$.when(deferreds);

// Callback management
$.Callbacks(options);

// Extended selectors
$(':visible');
$(':hidden');
$(':checked');

Advanced Features

Stack Operations

Method chaining history management for complex query operations.

// Chain navigation methods
$.fn.end();
$.fn.andSelf();

Stack Operations

Enhanced Selectors

jQuery-compatible pseudo-selectors and advanced selection capabilities.

// Enhanced selector expressions
$(':visible');
$(':hidden'); 
$(':checked');
$.expr[':'].visible;
$.expr[':'].hidden;

Enhanced Selectors

Callback Management

Flexible callback list management for event handling and plugin development.

// Callback list manager
$.Callbacks(options);

Callback Management

Types

// Core Zepto collection interface
interface ZeptoCollection {
  length: number;
  [index: number]: Element;
  
  // Core methods available on all collections
  each(callback: (index: number, element: Element) => boolean | void): ZeptoCollection;
  map(callback: (index: number, element: Element) => any): ZeptoCollection;
  filter(selector: string | Function): ZeptoCollection;
  first(): ZeptoCollection;
  last(): ZeptoCollection;
  eq(index: number): ZeptoCollection;
  get(index?: number): Element | Element[];
  toArray(): Element[];
  
  // Array-like methods
  forEach: Array.prototype.forEach;
  reduce: Array.prototype.reduce;
  push: Array.prototype.push;
  sort: Array.prototype.sort;
  splice: Array.prototype.splice;
  indexOf: Array.prototype.indexOf;
  concat(...args: any[]): ZeptoCollection;
  slice(...args: any[]): ZeptoCollection;
}

// Ajax settings interface
interface AjaxSettings {
  type?: string;
  url?: string;
  data?: any;
  contentType?: string;
  dataType?: string;
  timeout?: number;
  global?: boolean;
  processData?: boolean;
  cache?: boolean;
  traditional?: boolean;
  context?: any;
  beforeSend?: (xhr: XMLHttpRequest, settings: AjaxSettings) => boolean | void;
  success?: (data: any, status: string, xhr: XMLHttpRequest) => void;
  error?: (xhr: XMLHttpRequest, errorType: string, error?: any) => void;
  complete?: (xhr: XMLHttpRequest, status: string) => void;
  dataFilter?: (data: string, type: string) => any;
  accepts?: { [key: string]: string };
  crossDomain?: boolean;
  xhr?: () => XMLHttpRequest;
}

// Animation options
interface AnimationOptions {
  duration?: number;
  easing?: string;
  complete?: () => void;
  queue?: boolean;
}

// Deferred object interface
interface Deferred {
  resolve(...args: any[]): Deferred;
  reject(...args: any[]): Deferred;
  notify(...args: any[]): Deferred;
  resolveWith(context: any, args?: any[]): Deferred;
  rejectWith(context: any, args?: any[]): Deferred;
  notifyWith(context: any, args?: any[]): Deferred;
  promise(obj?: any): Promise;
  state(): string;
}

// Promise interface
interface Promise {
  done(...callbacks: Function[]): Promise;
  fail(...callbacks: Function[]): Promise;
  progress(...callbacks: Function[]): Promise;
  always(...callbacks: Function[]): Promise;
  then(doneCallback?: Function, failCallback?: Function, progressCallback?: Function): Promise;
  promise(obj?: any): Promise;
  state(): string;
}

// Callbacks object interface
interface Callbacks {
  add(...callbacks: Function[]): Callbacks;
  remove(...callbacks: Function[]): Callbacks;
  has(callback?: Function): boolean;
  empty(): Callbacks;
  disable(): Callbacks;
  disabled(): boolean;
  lock(): Callbacks;
  locked(): boolean;
  fire(...args: any[]): Callbacks;
  fireWith(context: any, args?: any[]): Callbacks;
  fired(): boolean;
}

// Event object interface
interface Event {
  type: string;
  target: Element;
  currentTarget: Element;
  isDefaultPrevented(): boolean;
  preventDefault(): void;
  stopPropagation(): void;
  stopImmediatePropagation(): void;
  originalEvent?: Event;
  which?: number;
  pageX?: number;
  pageY?: number;
}

// Browser detection interface
interface Browser {
  webkit?: boolean;
  chrome?: boolean;
  safari?: boolean;
  firefox?: boolean;
  ie?: boolean;
  opera?: boolean;
  version?: string;
}

// OS detection interface  
interface OS {
  ios?: boolean;
  android?: boolean;
  webos?: boolean;
  blackberry?: boolean;
  iphone?: boolean;
  ipad?: boolean;
  tablet?: boolean;
  phone?: boolean;
  version?: string;
}