public add(selector: string, context?: any): ZeptoCollection
Modify the current collection by adding the results of performing the CSS selector on the whole document, or, if context is given, just inside context elements.
Smoothly transition CSS properties of elements in the current collection.
note
If the duration is 0 or $.fx.off is true (default in a browser that doesn’t support CSS transitions), animations will not be executed; instead the target values will take effect instantly. Similarly, when the target CSS properties match the current state of the element, there will be no animation and the complete function won’t be called.
If the first argument is a string instead of object, it is taken as a CSS keyframe animation name.
note
Zepto exclusively uses CSS transitions for effects and animation. jQuery easings are not supported. jQuery's syntax for relative changes ("=+10px") is not supported. See the spec for a list of animatable properties (http://www.w3.org/TR/css3-transitions/#animatable-properties-). Browser support may vary, so be sure to test in all browsers you want to support.
Parameters
properties: any
object that holds CSS values to animate to; or CSS keyframe animation name.
Zepto also supports the following CSS transform porperties:
translate(X|Y|Z|3d)
rotate(X|Y|Z|3d)
scale(X|Y|Z)
matrix(3d)
perspective
skew(X|Y)
duration?: numberoptional
(default 400): duration in milliseconds, or a string:
fast (200 ms)
slow (600 ms)
any custom property of $.fx.speeds
easing?: stringoptional
(default linear): specifies the type of animation easing to use, one of:
ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier(x1, y1, x2, y2)
complete?: () => voidoptional
Callback function when the animation has completed.
Read or set DOM attributes. When no value is given, reads specified attribute from the first element in the collection. When value is given, sets the attribute to that value on each element in the collection. When value is null, the attribute is removed (like with removeAttr). Multiple attributes can be set by passing an object with name-value pairs.
To read DOM properties such as checked or selected, use prop.
Get immediate children of each element in the current collection. If selector is given, filter the results to only include ones matching the CSS selector.
Duplicate all elements in the collection via deep clone.
(!) This method doesn't have an option for copying data and event handlers over to the new elements, as it has in jQuery.
public closest(selector: string, context?: any): ZeptoCollection
Traverse upwards from the current element to find the first element that matches the selector. If context node is given, consider only elements that are its descendants. This method is similar to parents(selector), but it only returns the first ancestor matched.
If a Zepto collection or element is given, the resulting element will have to match one of the given elements instead of a selector.
Modify the collection by adding elements to it. If any of the arguments is an array, its elements are merged into the current collection.
(!) This is a Zepto-provided method that is not part of the jQuery API.
Read or set CSS properties on DOM elements. When no value is given, returns the CSS property from the first element in the collection. When a value is given, sets the property to that value on each element of the collection. Multiple properties can be set by passing an object to the method.
When a value for a property is blank (empty string, null, or undefined), that property is removed. When a unitless number value is given, “px” is appended to it for properties that require units.
Read or write data-* DOM attributes. Behaves like attr, but prepends data- to the attribute name.
When reading attribute values, the following conversions apply:
“true”, “false”, and “null” are converted to corresponding types;
number values are converted to actual numeric types;
JSON values are parsed, if it’s valid JSON;
everything else is returned as string.
(!) Zepto's basic implementation of data() only stores strings. To store arbitrary objects, include the optional "data" module in your custom build of Zepto.
public each(fn: (index: number, item: any) => boolean): ZeptoCollection
Iterate through every element of the collection. Inside the iterator function, this keyword refers to the current item (also passed as the second argument to the function). If the iterator function returns false, iteration stops.
Filter the collection to contain only items that match the CSS selector. If a function is given, return only elements for which the function returns a truthy value. Inside the function, the this keyword refers to the current element.
For the opposite, see not.
Find elements that match CSS selector executed in scope of nodes in the current collection.
If a Zepto collection or element is given, filter those elements down to only ones that are descendants of element in the current collection.
Iterate through every element of the collection. Similar to each, but the arguments for the iterator functions are different, and returning false from the iterator won’t stop the iteration.
(!) This is a Zepto-provided method that is not part of the jQuery API.
Get all elements or a single element from the current collection. When no index is given, returns all elements in an ordinary array. When index is specified, return only the element at that position. This is different than eq in the way that the returned node is not wrapped in a Zepto collection.
Get or set HTML contents of elements in the collection. When no content given, returns innerHTML of the first element. When content is given, use it to replace contents of each element. Content can be any of the types described in append.
Get the position of an element. When no element is given, returns position of the current element among its siblings. When an element is given, returns its position in the current collection. Returns -1 if not found.
Parameters
element?: stringoptional
Returns
number
public index(element?: HTMLElement): number
see
ZeptoCollection.index
Parameters
element?: HTMLElementoptional
Returns
number
public index(element?: any): number
see
ZeptoCollection.index
Parameters
element?: anyoptional
Returns
number
public indexOf(element: string, fromIndex?: number): number
Get the position of an element in the current collection. If fromIndex number is given, search only from that position onwards. Returns the 0-based position when found and -1 if not found. Use of index is recommended over this method.
(!) This is a Zepto-provided method that is not part of the jQuery API.
see
ZeptoCollection.index
Parameters
element: string
fromIndex?: numberoptional
Returns
number
public indexOf(element: HTMLElement, fromIndex?: number): number
see
ZeptoCollection.indexOf
Parameters
element: HTMLElement
fromIndex?: numberoptional
Returns
number
public indexOf(element: any, fromIndex?: number): number
Check if the first element of the current collection matches the CSS selector. For basic support of jQuery’s non-standard pseudo-selectors such as :visible, include the optional “selector” module.
(!) jQuery CSS extensions are not supported. The optional "selector" module only provides limited support for few of the most used ones.
Set the html contents of the current collection to the result of a GET Ajax call to the given URL. Optionally, a CSS selector can be specified in the URL, like so, to use only the HTML content matching the selector for updating the collection:
$('#some_element').load('/foo.html #bar')
If no CSS selector is given, the complete response text is used instead.
Note that any JavaScript blocks found are only executed in case no selector is given.
public map(fn: (index: number, item: any) => any): ZeptoCollection
Iterate through all elements and collect the return values of the iterator function. Inside the iterator function, this keyword refers to the current item (also passed as the second argument to the function).
Returns a collection of results of iterator function, with null and undefined values filtered out.
Filter the current collection to get a new collection of elements that don’t match the CSS selector. If another collection is given instead of selector, return only elements not present in it. If a function is given, return only elements for which the function returns a falsy value. Inside the function, the this keyword refers to the current element.
For the opposite, see filter.
Detach event handlers added with on. To detach a specific event handler, the same function must be passed that was used for on(). Otherwise, just calling this method with an event type with detach all handlers of that type. When called without arguments, it detaches all event handlers registered on current elements.
Get position of the element in the document. Returns an object with properties: top, left, width and height.
When given an object with properties left and top, use those values to position each element in the collection relative to the document.
Add event handlers to the elements in collection. Multiple event types can be passed in a space-separated string, or as an object where event types are keys and handlers are values. If a CSS selector is given, the handler function will only be called when an event originates from an element that matches the selector.
Event handlers are executed in the context of the element to which the handler is attached, or the matching element in case a selector is provided. When an event handler returns false, preventDefault() is called for the current event, preventing the default browser action such as following links.
Get all ancestors of each element in the collection. If CSS selector is given, filter results to include only ones matching the selector.
To get only immediate parents, use parent. To only get the first ancestor that matches the selector, use closest.
Get values from a named property of each element in the collection, with null and undefined values filtered out.
(!) This is a Zepto-provided method that is not part of the jQuery API.
Get the position of the first element in the collection, relative to the offsetParent. This information is useful when absolutely positioning an element to appear aligned with another.
Returns an object with properties: top, left.
Read or set properties of DOM elements. This should be preferred over attr in case of reading values of properties that change with user interaction over time, such as checked and selected.
Attach an event handler for the “DOMContentLoaded” event that fires when the DOM on the page is ready. It’s recommended to use the $() function instead of this method.
Remove the specified class name from all elements in the collection. When the class name isn’t given, remove all class names. Multiple class names can be given in a space-separated string.
Gets the value of how many pixels were scrolled so far on window or scrollable element on the page.
Returns
number
public serialize(): string
Serialize form values to an URL-encoded string for use in Ajax post requests.
Returns
string
Seralized form values in URL-encoded string.
public serializeArray(): Array<any>
Serialize form into an array of objects with name and value properties. Disabled form controls, buttons, and unchecked radio buttons/checkboxes are skipped. The result doesn’t include data from file inputs.
Get all sibling nodes of each element in the collection. If CSS selector is specified, filter the results to contain only elements that match the selector.
Trigger or attach a handler for the submit event. When no function given, trigger the “submit” event on the current form and have it perform its submit action unless preventDefault() was called for the event.
When a function is given, this simply attaches it as a handler for the “submit” event on current elements.
Get or set the text content of elements in the collection. When no content is given, returns the text content of the first element in the collection. When content is given, uses it to replace the text contents of each element in the collection. This is similar to html, with the exception it can’t be used for getting or setting HTML.
Toggle between showing and hiding each of the elements, based on whether the first element is visible or not. If setting is present, this method behaves like show if setting is truthy or hide otherwise.
public toggleClass(names: string, setting?: boolean): ZeptoCollection
Toggle given class names (space-separated) in each element in the collection. The class name is removed if present on an element; otherwise it’s added. If setting is present, this method behaves like addClass if setting is truthy or removeClass otherwise.
public trigger(event: string, data?: Array<any>): ZeptoCollection
Trigger the specified event on elements of the collection. Event can either be a string type, or a full event object obtained with $.Event. If a data array is given, it is passed as additional arguments to event handlers.
(!) Zepto only supports triggering events on DOM elements.
Remove immediate parent nodes of each element in the collection and put their children in their place. Basically, this method removes one level of ancestry while keeping current elements in the DOM.
Wrap each element of the collection separately in a DOM structure. Structure can be a single element or several nested elements, and can be passed in as a HTML string or DOM node, or as a function that is called for each element and returns one of the first two types.
Keep in mind that wrapping works best when operating on nodes that are part of the DOM. When calling wrap() on a new element and then inserting the result in the document, the element will lose the wrapping.
Wrap all elements in a single structure. Structure can be a single element or several nested elements, and can be passed in as a HTML string or DOM node.
Wrap the contents of each element separately in a structure. Structure can be a single element or several nested elements, and can be passed in as a HTML string or DOM node, or as a function that is called for each element and returns one of the first two types.