0
# Zepto.js
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: zepto
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install zepto` or include via CDN
10
- **Browser Support**: Modern browsers (IE 10+, Chrome, Firefox, Safari, Mobile)
11

12
## Core Imports
13

14
Zepto can be included via various methods:
15

16
**Browser Script Tag:**
17
```html
18
<script src="zepto.min.js"></script>
19
```
20

21
**CommonJS:**
22
```javascript
23
const $ = require('zepto');
24
```
25

26
**ES6 Modules (if using build tools):**
27
```javascript
28
import $ from 'zepto';
29
```
30

31
**Global Access:**
32
```javascript
33
// Zepto automatically creates global $ and Zepto variables
34
$(document).ready(function() {
35
  // Your code here
36
});
37
```
38

39
## Basic Usage
40

41
```javascript
42
// DOM selection and manipulation
43
$('#myElement').addClass('active').text('Hello World');
44

45
// Event handling
46
$('.button').on('click', function() {
47
  $(this).toggleClass('pressed');
48
});
49

50
// Ajax requests
51
$.get('/api/data', function(data) {
52
  $('#content').html(data);
53
});
54

55
// Animation
56
$('.modal').fadeIn(300);
57

58
// Touch events (mobile)
59
$('.swipeable').on('swipeLeft', function() {
60
  $(this).addClass('swiped');
61
});
62
```
63

64
## Architecture
65

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

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

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

77
## Capabilities
78

79
### Core DOM Manipulation
80

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

83
```javascript { .api }
84
// Main constructor function
85
function $(selector, context);
86

87
// Core utility functions
88
$.extend(target, source, deep);
89
$.type(obj);
90
$.isFunction(value);
91
$.isArray(obj);
92
$.each(elements, callback);
93
$.map(elements, callback);
94
```
95

96
[Core DOM](./core-dom.md)
97

98
### Event System
99

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

102
```javascript { .api }
103
// Event binding methods
104
$.fn.on(event, selector, data, callback);
105
$.fn.off(event, selector, callback);
106
$.fn.trigger(event, args);
107

108
// Event shortcuts
109
$.fn.click(callback);
110
$.fn.submit(callback);
111
$.fn.focus(callback);
112
```
113

114
[Events](./events.md)
115

116
### Ajax and HTTP
117

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

120
```javascript { .api }
121
// Ajax methods
122
$.ajax(options);
123
$.get(url, data, success, dataType);
124
$.post(url, data, success, dataType);
125
$.getJSON(url, data, success);
126

127
// Configuration
128
$.ajaxSettings;
129
```
130

131
[Ajax](./ajax.md)
132

133
### CSS and Styling
134

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

137
```javascript { .api }
138
// CSS methods
139
$.fn.css(property, value);
140
$.fn.addClass(name);
141
$.fn.removeClass(name);
142
$.fn.toggleClass(name, when);
143
$.fn.hasClass(name);
144
```
145

146
[CSS Styling](./css-styling.md)
147

148
### Animation Effects
149

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

152
```javascript { .api }
153
// Animation methods
154
$.fn.animate(properties, duration, ease, callback);
155
$.fn.fadeIn(speed, callback);
156
$.fn.fadeOut(speed, callback);
157
$.fn.show(speed, callback);
158
$.fn.hide(speed, callback);
159

160
// Configuration
161
$.fx.off;
162
$.fx.speeds;
163
```
164

165
[Animation](./animation.md)
166

167
### Mobile Touch Events
168

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

171
```javascript { .api }
172
// Touch event methods
173
$.fn.tap(callback);
174
$.fn.swipe(callback);
175
$.fn.swipeLeft(callback);
176
$.fn.doubleTap(callback);
177
$.fn.longTap(callback);
178
```
179

180
[Mobile Touch](./mobile-touch.md)
181

182
### Form Handling
183

184
Form serialization, validation support, and input value management.
185

186
```javascript { .api }
187
// Form methods
188
$.fn.serialize();
189
$.fn.serializeArray();
190
$.fn.val(value);
191
$.fn.submit(callback);
192
```
193

194
[Forms](./forms.md)
195

196
### Data Management
197

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

200
```javascript { .api }
201
// Data methods
202
$.fn.data(name, value);
203
$.fn.removeData(names);
204
$.data(elem, name, value);
205
$.hasData(elem);
206
```
207

208
[Data Management](./data-management.md)
209

210
### Browser Detection
211

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

214
```javascript { .api }
215
// Detection objects
216
$.os; // Operating system detection
217
$.browser; // Browser detection
218
```
219

220
[Browser Detection](./browser-detection.md)
221

222
### Advanced Features
223

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

226
```javascript { .api }
227
// Deferred/Promise support
228
$.Deferred(func);
229
$.when(deferreds);
230

231
// Callback management
232
$.Callbacks(options);
233

234
// Extended selectors
235
$(':visible');
236
$(':hidden');
237
$(':checked');
238
```
239

240
[Advanced Features](./advanced-features.md)
241

242
### Stack Operations
243

244
Method chaining history management for complex query operations.
245

246
```javascript { .api }
247
// Chain navigation methods
248
$.fn.end();
249
$.fn.andSelf();
250
```
251

252
[Stack Operations](./stack-operations.md)
253

254
### Enhanced Selectors  
255

256
jQuery-compatible pseudo-selectors and advanced selection capabilities.
257

258
```javascript { .api }
259
// Enhanced selector expressions
260
$(':visible');
261
$(':hidden'); 
262
$(':checked');
263
$.expr[':'].visible;
264
$.expr[':'].hidden;
265
```
266

267
[Enhanced Selectors](./enhanced-selectors.md)
268

269
### Callback Management
270

271
Flexible callback list management for event handling and plugin development.
272

273
```javascript { .api }
274
// Callback list manager
275
$.Callbacks(options);
276
```
277

278
[Callback Management](./callback-management.md)
279

280
## Types
281

282
```javascript { .api }
283
// Core Zepto collection interface
284
interface ZeptoCollection {
285
  length: number;
286
  [index: number]: Element;
287
  
288
  // Core methods available on all collections
289
  each(callback: (index: number, element: Element) => boolean | void): ZeptoCollection;
290
  map(callback: (index: number, element: Element) => any): ZeptoCollection;
291
  filter(selector: string | Function): ZeptoCollection;
292
  first(): ZeptoCollection;
293
  last(): ZeptoCollection;
294
  eq(index: number): ZeptoCollection;
295
  get(index?: number): Element | Element[];
296
  toArray(): Element[];
297
  
298
  // Array-like methods
299
  forEach: Array.prototype.forEach;
300
  reduce: Array.prototype.reduce;
301
  push: Array.prototype.push;
302
  sort: Array.prototype.sort;
303
  splice: Array.prototype.splice;
304
  indexOf: Array.prototype.indexOf;
305
  concat(...args: any[]): ZeptoCollection;
306
  slice(...args: any[]): ZeptoCollection;
307
}
308

309
// Ajax settings interface
310
interface AjaxSettings {
311
  type?: string;
312
  url?: string;
313
  data?: any;
314
  contentType?: string;
315
  dataType?: string;
316
  timeout?: number;
317
  global?: boolean;
318
  processData?: boolean;
319
  cache?: boolean;
320
  traditional?: boolean;
321
  context?: any;
322
  beforeSend?: (xhr: XMLHttpRequest, settings: AjaxSettings) => boolean | void;
323
  success?: (data: any, status: string, xhr: XMLHttpRequest) => void;
324
  error?: (xhr: XMLHttpRequest, errorType: string, error?: any) => void;
325
  complete?: (xhr: XMLHttpRequest, status: string) => void;
326
  dataFilter?: (data: string, type: string) => any;
327
  accepts?: { [key: string]: string };
328
  crossDomain?: boolean;
329
  xhr?: () => XMLHttpRequest;
330
}
331

332
// Animation options
333
interface AnimationOptions {
334
  duration?: number;
335
  easing?: string;
336
  complete?: () => void;
337
  queue?: boolean;
338
}
339

340
// Deferred object interface
341
interface Deferred {
342
  resolve(...args: any[]): Deferred;
343
  reject(...args: any[]): Deferred;
344
  notify(...args: any[]): Deferred;
345
  resolveWith(context: any, args?: any[]): Deferred;
346
  rejectWith(context: any, args?: any[]): Deferred;
347
  notifyWith(context: any, args?: any[]): Deferred;
348
  promise(obj?: any): Promise;
349
  state(): string;
350
}
351

352
// Promise interface
353
interface Promise {
354
  done(...callbacks: Function[]): Promise;
355
  fail(...callbacks: Function[]): Promise;
356
  progress(...callbacks: Function[]): Promise;
357
  always(...callbacks: Function[]): Promise;
358
  then(doneCallback?: Function, failCallback?: Function, progressCallback?: Function): Promise;
359
  promise(obj?: any): Promise;
360
  state(): string;
361
}
362

363
// Callbacks object interface
364
interface Callbacks {
365
  add(...callbacks: Function[]): Callbacks;
366
  remove(...callbacks: Function[]): Callbacks;
367
  has(callback?: Function): boolean;
368
  empty(): Callbacks;
369
  disable(): Callbacks;
370
  disabled(): boolean;
371
  lock(): Callbacks;
372
  locked(): boolean;
373
  fire(...args: any[]): Callbacks;
374
  fireWith(context: any, args?: any[]): Callbacks;
375
  fired(): boolean;
376
}
377

378
// Event object interface
379
interface Event {
380
  type: string;
381
  target: Element;
382
  currentTarget: Element;
383
  isDefaultPrevented(): boolean;
384
  preventDefault(): void;
385
  stopPropagation(): void;
386
  stopImmediatePropagation(): void;
387
  originalEvent?: Event;
388
  which?: number;
389
  pageX?: number;
390
  pageY?: number;
391
}
392

393
// Browser detection interface
394
interface Browser {
395
  webkit?: boolean;
396
  chrome?: boolean;
397
  safari?: boolean;
398
  firefox?: boolean;
399
  ie?: boolean;
400
  opera?: boolean;
401
  version?: string;
402
}
403

404
// OS detection interface  
405
interface OS {
406
  ios?: boolean;
407
  android?: boolean;
408
  webos?: boolean;
409
  blackberry?: boolean;
410
  iphone?: boolean;
411
  ipad?: boolean;
412
  tablet?: boolean;
413
  phone?: boolean;
414
  version?: string;
415
}
416
```