Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API
Core DOM operations including element selection, traversal, manipulation, and utility functions. This forms the foundation of all Zepto functionality and is always included in builds.
The primary Zepto function for creating collections from selectors, DOM elements, or HTML.
/**
* Create a Zepto collection from CSS selector, DOM elements, or HTML
* @param selector - CSS selector string, DOM element, HTML string, or array
* @param context - Optional context element for selector queries
* @returns Zepto collection
*/
function $(selector, context);
function Zepto(selector, context);Usage Examples:
// CSS selectors
$('#myId');
$('.myClass');
$('div.container p');
// DOM elements
$(document.body);
$(document.getElementById('myElement'));
// HTML creation
$('<div class="new-element">Content</div>');
$('<p>', {text: 'Hello', class: 'greeting'});
// Arrays of elements
$([element1, element2, element3]);
// With context
$('.item', '#container'); // Find .item within #containerGlobal utility functions available on the $ object.
/**
* Extend objects with properties from source objects
* @param target - Target object to extend
* @param source - Source object(s) to copy properties from
* @param deep - Whether to perform deep merge
* @returns Extended target object
*/
$.extend(target, ...sources);
$.extend(deep, target, ...sources);
/**
* Get the type of an object
* @param obj - Object to check type of
* @returns Type string ('string', 'number', 'array', 'object', etc.)
*/
$.type(obj);
/**
* Check if value is a function
* @param value - Value to test
* @returns True if value is function
*/
$.isFunction(value);
/**
* Check if value is an array
* @param obj - Value to test
* @returns True if value is array
*/
$.isArray(obj);
/**
* Check if value is a plain object
* @param obj - Value to test
* @returns True if value is plain object
*/
$.isPlainObject(obj);
/**
* Check if object is empty (has no enumerable properties)
* @param obj - Object to test
* @returns True if object is empty
*/
$.isEmptyObject(obj);
/**
* Check if value is numeric
* @param val - Value to test
* @returns True if value is numeric
*/
$.isNumeric(val);
/**
* Check if value is a window object
* @param obj - Value to test
* @returns True if value is window
*/
$.isWindow(obj);
/**
* Find index of element in array
* @param elem - Element to find
* @param array - Array to search
* @param i - Optional starting index
* @returns Index of element or -1 if not found
*/
$.inArray(elem, array, i);
/**
* Convert dash-separated string to camelCase
* @param str - String to convert
* @returns CamelCase string
*/
$.camelCase(str);
/**
* Remove whitespace from beginning and end of string
* @param str - String to trim
* @returns Trimmed string
*/
$.trim(str);
/**
* Test if parent element contains child element
* @param parent - Parent element
* @param child - Child element
* @returns True if parent contains child
*/
$.contains(parent, child);
/**
* Parse JSON string into object
* @param str - JSON string to parse
* @returns Parsed object
*/
$.parseJSON(str);
/**
* Empty function (does nothing)
* @returns undefined
*/
$.noop();Methods for iterating and transforming collections.
/**
* Iterate over collection elements
* @param callback - Function called for each element
* @returns Original collection for chaining
*/
$.fn.each(callback);
/**
* Transform collection elements into new array
* @param callback - Function to transform each element
* @returns New Zepto collection with transformed elements
*/
$.fn.map(callback);
/**
* Iterate over elements or objects
* @param elements - Collection or object to iterate
* @param callback - Function called for each item
* @returns Original elements
*/
$.each(elements, callback);
/**
* Transform elements into new array
* @param elements - Collection to transform
* @param callback - Function to transform each element
* @returns Flattened array of results
*/
$.map(elements, callback);
/**
* Filter array elements
* @param elements - Array to filter
* @param callback - Predicate function
* @returns Filtered array
*/
$.grep(elements, callback);Methods for navigating the DOM tree.
/**
* Find descendant elements matching selector
* @param selector - CSS selector or element
* @returns New collection with matching descendants
*/
$.fn.find(selector);
/**
* Get parent elements, optionally filtered by selector
* @param selector - Optional CSS selector to filter parents
* @returns Collection of parent elements
*/
$.fn.parent(selector);
/**
* Get all ancestor elements, optionally filtered by selector
* @param selector - Optional CSS selector to filter ancestors
* @returns Collection of ancestor elements
*/
$.fn.parents(selector);
/**
* Find closest ancestor element matching selector
* @param selector - CSS selector to match
* @param context - Optional context to limit search
* @returns Collection with closest matching ancestor
*/
$.fn.closest(selector, context);
/**
* Get child elements, optionally filtered by selector
* @param selector - Optional CSS selector to filter children
* @returns Collection of child elements
*/
$.fn.children(selector);
/**
* Get sibling elements, optionally filtered by selector
* @param selector - Optional CSS selector to filter siblings
* @returns Collection of sibling elements
*/
$.fn.siblings(selector);
/**
* Get next sibling element, optionally filtered by selector
* @param selector - Optional CSS selector to filter
* @returns Collection with next sibling
*/
$.fn.next(selector);
/**
* Get previous sibling element, optionally filtered by selector
* @param selector - Optional CSS selector to filter
* @returns Collection with previous sibling
*/
$.fn.prev(selector);
/**
* Get contents including text nodes
* @returns Collection of content nodes
*/
$.fn.contents();Methods for filtering and selecting specific elements from collections.
/**
* Filter collection by selector or function
* @param selector - CSS selector or predicate function
* @returns Filtered collection
*/
$.fn.filter(selector);
/**
* Remove elements matching selector from collection
* @param selector - CSS selector or predicate function
* @returns Collection without matching elements
*/
$.fn.not(selector);
/**
* Test if any element matches selector
* @param selector - CSS selector to test
* @returns True if any element matches
*/
$.fn.is(selector);
/**
* Filter to elements containing descendants matching selector
* @param selector - CSS selector or element
* @returns Collection of elements with matching descendants
*/
$.fn.has(selector);
/**
* Get element at specific index
* @param index - Zero-based index (-1 for last element)
* @returns Collection containing element at index
*/
$.fn.eq(index);
/**
* Get first element in collection
* @returns Collection containing first element
*/
$.fn.first();
/**
* Get last element in collection
* @returns Collection containing last element
*/
$.fn.last();
/**
* Add elements to collection
* @param selector - Selector, elements, or HTML to add
* @param context - Optional context for selector
* @returns Combined collection
*/
$.fn.add(selector, context);Methods for modifying DOM structure and content.
/**
* Get or set HTML content of elements
* @param html - HTML string to set (optional)
* @returns HTML content (if getting) or collection (if setting)
*/
$.fn.html(html);
/**
* Get or set text content of elements
* @param text - Text string to set (optional)
* @returns Text content (if getting) or collection (if setting)
*/
$.fn.text(text);
/**
* Append content to end of elements
* @param content - HTML, elements, or collection to append
* @returns Original collection
*/
$.fn.append(content);
/**
* Prepend content to beginning of elements
* @param content - HTML, elements, or collection to prepend
* @returns Original collection
*/
$.fn.prepend(content);
/**
* Insert content after elements
* @param content - HTML, elements, or collection to insert
* @returns Original collection
*/
$.fn.after(content);
/**
* Insert content before elements
* @param content - HTML, elements, or collection to insert
* @returns Original collection
*/
$.fn.before(content);
/**
* Append elements to target
* @param target - Target selector or collection
* @returns Original collection
*/
$.fn.appendTo(target);
/**
* Prepend elements to target
* @param target - Target selector or collection
* @returns Original collection
*/
$.fn.prependTo(target);
/**
* Insert elements after target
* @param target - Target selector or collection
* @returns Original collection
*/
$.fn.insertAfter(target);
/**
* Insert elements before target
* @param target - Target selector or collection
* @returns Original collection
*/
$.fn.insertBefore(target);Methods for cloning, removing, and wrapping elements.
/**
* Remove elements and their data from DOM
* @returns Original collection
*/
$.fn.remove();
/**
* Detach elements from DOM (keeping data)
* @returns Original collection
*/
$.fn.detach();
/**
* Empty elements (remove all child nodes)
* @returns Original collection
*/
$.fn.empty();
/**
* Clone elements
* @returns Collection of cloned elements
*/
$.fn.clone();
/**
* Replace elements with new content
* @param newContent - Content to replace with
* @returns Original collection
*/
$.fn.replaceWith(newContent);
/**
* Wrap each element in structure
* @param structure - HTML or element to wrap with
* @returns Original collection
*/
$.fn.wrap(structure);
/**
* Wrap all elements in single structure
* @param structure - HTML or element to wrap with
* @returns Original collection
*/
$.fn.wrapAll(structure);
/**
* Wrap inner contents of elements
* @param structure - HTML or element to wrap with
* @returns Original collection
*/
$.fn.wrapInner(structure);
/**
* Remove wrapper from elements
* @returns Original collection
*/
$.fn.unwrap();Utility methods for working with collections.
/**
* Get raw DOM element(s) from collection
* @param index - Optional index of specific element
* @returns DOM element (if index provided) or array of elements
*/
$.fn.get(index);
/**
* Convert collection to plain array
* @returns Array of DOM elements
*/
$.fn.toArray();
/**
* Get size of collection
* @returns Number of elements in collection
*/
$.fn.size();
/**
* Get index of element within its parent or within another collection
* @param element - Optional element to find index of
* @returns Zero-based index
*/
$.fn.index(element);
/**
* Extract property values from all elements
* @param property - Property name to extract
* @returns Array of property values
*/
$.fn.pluck(property);
/**
* Slice collection like an array
* @param start - Start index
* @param end - End index (optional)
* @returns New collection with sliced elements
*/
$.fn.slice(start, end);
/**
* Concatenate collections or arrays
* @param arrays - Collections or arrays to concatenate
* @returns New collection with concatenated elements
*/
$.fn.concat(...arrays);Methods for managing element attributes and properties.
/**
* Get or set element attributes
* @param name - Attribute name or object of name/value pairs
* @param value - Attribute value (if setting single attribute)
* @returns Attribute value (if getting) or collection (if setting)
*/
$.fn.attr(name, value);
/**
* Remove attributes from elements
* @param name - Space-separated attribute names to remove
* @returns Original collection
*/
$.fn.removeAttr(name);
/**
* Get or set element properties
* @param name - Property name
* @param value - Property value (if setting)
* @returns Property value (if getting) or collection (if setting)
*/
$.fn.prop(name, value);
/**
* Remove properties from elements
* @param name - Property name to remove
* @returns Original collection
*/
$.fn.removeProp(name);
/**
* Get or set basic data attributes
* @param name - Data attribute name (without 'data-' prefix)
* @param value - Data value (if setting)
* @returns Data value (if getting) or collection (if setting)
*/
$.fn.data(name, value);
/**
* Get or set form element values
* @param value - Value to set (if setting)
* @returns Element value (if getting) or collection (if setting)
*/
$.fn.val(value);DOM ready event handling.
/**
* Execute callback when DOM is ready
* @param callback - Function to execute when DOM is ready
* @returns Original collection
*/
$.fn.ready(callback);Usage Examples:
// DOM ready
$(document).ready(function() {
console.log('DOM is ready');
});
// Shorthand
$(function() {
console.log('DOM is ready');
});// Plugin compatibility
$.uuid; // Unique counter for plugins
$.support; // Feature detection object
$.expr; // Selector expression utilities
$.noop; // No-operation function
// Internal API
$.fn; // Collection prototype
$.zepto; // Internal utilities namespace