Cash
Cash is an absurdly small jQuery alternative for modern browsers (IE10+) that provides jQuery-style syntax for manipulating the DOM. Utilizing modern browser features to minimize the codebase, developers can use the familiar chainable methods at a fraction of the file size. 100% feature parity with jQuery isn't a goal, but Cash comes helpfully close, covering most day to day use cases.
Comparison
Size | Cash | Zepto 1.2.0 | jQuery 3.3.1 |
---|
Uncompressed | 28.7 KB | 58.7 KB | 271 KB |
Minified | 12.7 KB | 26 KB | 87 KB |
Minified & Gzipped | 4.5 KB | 9.8 KB | 30.3 KB |
An 85% gain in size reduction compared to jQuery. If you need a smaller bundle, we support partial builds too.
Features | Cash | Zepto 1.2.0 | jQuery 3.3.1 |
---|
Supports Modern Browsers | ✔ | ️✔ | ✔ |
Actively Maintained | ✔ | ❌ | ✔ |
Namespaced Events | ✔ | ️❌ | ✔ |
Modern Codebase | ✔ (TypeScript) | ️❌ | ❌ |
TypeScript Types | ✔ (generated from code) | ⚠️ (via DefinitelyTyped) | ⚠️ (via DefinitelyTyped) |
Partial Builds | ✔ (can exclude single files) | ⚠️ (can exclude whole modules) | ❌ |
If you're migrating from jQuery be sure to read our migration guide.
Usage
Get Cash from CloudFlare or jsDelivr and use it like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/3.0.0-beta.1/cash.min.js"></script>
<script>
$(function () {
$('html').addClass ( 'dom-loaded' );
$('<footer>Appended with Cash</footer>').appendTo ( document.body );
});
</script>
Cash is also available through npm as the cash-dom
package:
npm install cash-dom --save-dev
Documentation
Cash gives you a query selector, collection methods and some library methods. If you need more details about our API just check out jQuery's, while we don't implement everything that jQuery provides, everything what we do implement should be compatible with jQuery.
$()
This is the main selector method for Cash. It returns an actionable collection of nodes.
If a function is provided, the function will be run once the DOM is ready.
$( selector [, context] )
$(node)
$(nodeList)
$(htmlString)
$(collection)
$(function () {})
Collection Methods
These methods from the collection prototype ($.fn) are available once you create a collection with $()
and are called like so:
$(element).addClass ( className )
$.fn
The main prototype for collections, allowing you to extend Cash with plugins by adding methods to all collections.
$.fn
$.fn.myMethod = function () {};
$.fn.extend ( object );
fn.add ()
Returns a new collection with the element(s) added to the end.
$(element).add ( element )
$(element).add ( selector )
$(element).add ( collection )
fn.addClass ()
Adds the className
class to each element in the collection.
Accepts space-separated className
for adding multiple classes.
$(element).addClass ( className )
fn.after ()
Inserts content or elements after the collection.
$(element).after ( element )
$(element).after ( htmlString )
$(element).after ( content [, content] )
fn.append ()
Appends content or elements to each element in the collection.
$(element).append ( element )
$(element).append ( htmlString )
$(element).append ( element [, element] )
fn.appendTo ()
Adds the elements in the collection to the target element(s).
$(element).appendTo ( element )
fn.attr ()
Without attrValue, returns the attribute value of the first element in the collection.
With attrValue, sets the attribute value of each element of the collection.
$(element).attr ( attrName )
$(element).attr ( attrName, attrValue )
fn.before ()
Inserts content or elements before the collection.
$(element).before ( element )
$(element).before ( htmlString )
$(element).before ( content [, content] )
fn.children ()
Without a selector specified, returns a collection of child elements.
With a selector, returns child elements that match the selector.
$(element).children ()
$(element).children ( selector )
fn.closest ()
Returns the closest matching selector up the DOM tree.
$(element).closest ()
$(element).closest ( selector )
fn.contents ()
Get the children of each element in the set of matched elements, including text and comment nodes.
Useful for selecting elements in friendly iframes.
$('iframe').contents ().find ( '*' )
fn.clone ()
Returns a clone of the collection.
$(element).clone ()
fn.detach ()
Removes collection elements from the DOM.
$(element).detach ()
fn.css ()
Returns a CSS property value when just property is supplied.
Sets a CSS property when property and value are supplied.
Sets multiple properties when an object is supplied.
Properties will be autoprefixed if needed for the user's browser.
$(element).css ( property )
$(element).css ( property, value )
$(element).css ( object )
fn.data ()
Link some data (string, object, array, etc.) to an element when both key and value are supplied.
If only a key is supplied, returns the linked data and falls back to data attribute value if no data is already linked.
Multiple data can be set when an object is supplied.
$(element).data ()
$(element).data ( key )
$(element).data ( key, value )
$(element).data ( object )
fn.each ()
Iterates over a collection with callback ( index, element )
.
$(element).each ( callback )
fn.empty ()
Empties the elements interior markup.
$(element).empty ()
fn.eq ()
Returns a collection with the element at index.
$(element).eq ( index )
fn.extend ()
Adds properties to the Cash collection prototype.
$.fn.extend(object)
fn.filter ()
Returns the collection that results from applying the filter selector/method.
$(element).filter ( selector )
$(element).filter ( function ( index, element ) {} )
fn.find ()
Returns selector match descendants from the first element in the collection.
$(element).find ( selector )
fn.first ()
Returns a collection containing only the first element.
$(element).first ()
fn.get ()
Returns the element at the index, or returns all elements.
$(element).get ( index )
$(element).get ()
fn.has ()
Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
$(element).has ( selector )
$(element).has ( element )
fn.hasClass ()
Returns the boolean result of checking if the first element in the collection has the className
attribute.
$(element).hasClass ( className )
fn.height ()
Returns or sets the height of the element.
$(element).height ()
$(element).height ( number )
fn.hide ()
Hide the elements.
$(element).hide ()
fn.html ()
Returns the HTML text of the first element in the collection, sets the HTML if provided.
$(element).html ()
$(element).html ( htmlString )
fn.index ()
Returns the index of the element in its parent if an element or selector isn't provided. Returns index within element or selector if it is.
$(element).index ()
$(element).index ( element )
fn.innerHeight ()
Returns the height of the element + padding.
$(element).innerHeight ()
fn.innerWidth ()
Returns the width of the element + padding.
$(element).innerWidth ()
fn.insertAfter ()
Inserts collection after specified element.
$(element).insertAfter ( element )
fn.insertBefore ()
Inserts collection before specified element.
$(element).insertBefore ( element )
fn.is ()
Returns whether the provided selector, element or collection matches any element in the collection.
$(element).is ( selector )
fn.last ()
Returns a collection containing only the last element.
$(element).last ()
fn.map ()
Returns a new collection, mapping each element with callback ( index, element )
.
$(selector).map ( callback )
fn.next ()
Returns next sibling.
$(element).next ()
$(element).next ( selector )
fn.nextAll ()
Returns all the next elements.
$(element).nextAll ()
$(element).nextAll ( selector )
fn.not ()
Filters collection by false match on collection/selector.
$(element).not ( selector )
$(element).not ( collection )
fn.off ()
Removes event listener from collection elements.
Accepts space-separated eventName for removing multiple events listeners.
Removes all event listeners if called without arguments.
$(element).off ( eventName, eventHandler )
$(element).off ( eventName )
$(element).off ()
fn.offset ()
Get the coordinates of the first element in a collection relative to the document.
$(element).offset ()
fn.offsetParent ()
Get the first element's ancestor that's positioned.
$(element).offsetParent ()
fn.on ()
Adds event listener to collection elements.
Accepts space-separated eventName for listening to multiple events.
Event is delegated if delegate is supplied.
$(element).on ( eventName, eventHandler )
$(element).on ( eventName, delegate, eventHandler )
fn.one ()
Adds event listener to collection elements that only triggers once for each element.
Accepts space-separated eventName for listening to multiple events.
Event is delegated if delegate is supplied.
$(element).one ( eventName, eventHandler )
$(element).one ( eventName, delegate, eventHandler )
fn.outerHeight ()
Returns the outer height of the element. Includes margins if includeMargings
is set to true.
$(element).outerHeight ()
$(element).outerHeight ( includeMargins )
fn.outerWidth ()
Returns the outer width of the element. Includes margins if includeMargings
is set to true.
$(element).outerWidth ()
$(element).outerWidth ( includeMargins )
fn.parent ()
Returns parent element.
$(element).parent ()
$(element).parent ( selector )
fn.parents ()
Returns collection of elements who are parents of element. Optionally filtering by selector.
$(element).parents ()
$(element).parents ( selector )
fn.position ()
Get the coordinates of the first element in a collection relative to its offsetParent
.
$(element).position ()
fn.prepend ()
Prepends content or elements to the each element in collection.
$(element).prepend ( element )
$(element).prepend ( htmlString )
$(element).prepend ( content [, content] )
fn.prependTo ()
Prepends elements in a collection to the target element(s).
$(element).prependTo ( element )
fn.prev ()
Returns the previous adjacent element.
$(element).prev ()
$(element).prev ( selector )
fn.prevAll ()
Returns all the previous elements.
$(element).prevAll ()
$(element).prevAll ( selector )
fn.prop ()
Returns a property value when just property is supplied.
Sets a property when property and value are supplied, and sets multiple properties when an object is supplied.
$(element).prop ( property )
$(element).prop ( property, value )
$(element).prop ( object )
fn.ready ()
Calls callback method on DOMContentLoaded.
$(document).ready ( callback )
fn.remove ()
Removes collection elements from the DOM and removes all their event listeners.
$(element).remove ()
fn.replaceAll ()
This is similar to fn.replaceWith(), but with the source and target reversed.
$(element).replaceAll ( content )
fn.replaceWith ()
Replace collection elements with the provided new content.
$(element).replaceWith ( content )
fn.removeAttr ()
Removes attribute from collection elements.
Accepts space-separated attrName for removing multiple attributes.
$(element).removeAttr ( attrName )
fn.removeClass ()
Removes className from collection elements.
Accepts space-separated className for adding multiple classes.
Providing no arguments will remove all classes.
$(element).removeClass ()
$(element).removeClass ( className )
fn.removeData ()
Removes linked data and data-attributes from collection elements.
$(element).removeData ( name )
$(element).removeData ()
fn.removeProp ()
Removes property from collection elements.
$(element).removeProp ( propName )
fn.serialize ()
When called on a form, serializes and returns form data.
$(form).serialize ()
fn.show ()
Show the elements.
$(element).show ()
fn.siblings ()
Returns a collection of sibling elements.
$(element).siblings ()
$(element).siblings ( selector )
fn.slice ()
Returns a new collection with elements taken from start to end.
$(selector).slice ( start, end )
fn.text ()
Returns the inner text of the first element in the collection, sets the text if textContent is provided.
$(element).text ()
$(element).text ( textContent )
fn.toggle ()
Hide or show the elements.
$(element).toggle ()
fn.toggleClass ()
Adds or removes className from collection elements based on if the element already has the class.
Accepts space-separated classNames for toggling multiple classes, and an optional force
boolean to ensure classes are added (true
) or removed (false
).
$(element).toggleClass ( className )
$(element).toggleClass ( className, force )
fn.trigger ()
Triggers supplied event on elements in collection. Data can be passed along as the second parameter.
$(element).trigger ( eventName )
$(element).trigger ( eventObj )
$(element).trigger ( eventName, data )
$(element).trigger ( eventObj, data )
fn.unwrap ()
Removes the wrapper from all elements.
$(element).unwrap ()
fn.val ()
Returns an inputs value. If value is supplied, sets all inputs in collection's value to the value argument.
$(input).val ()
$(input).val ( value )
fn.width ()
Returns or sets the width of the element.
$(element).width ()
$(element).width ( number )
fn.wrap ()
Wraps a structure around each element.
$(element).wrap ( structure )
fn.wrapAll ()
Wraps a structure around all elements.
$(element).wrapAll ( structure )
fn.wrapInner ()
Wraps a structure around all children.
$(element).wrapInner ( structure )
Cash Methods
These methods are exported from the global $
object, and are called like so:
$.isString ( str )
$.guid
A unique number.
$.guid++
$.camelCase ()
Transforms a string to camelCase.
$.camelCase ( 'border-width' )
$.each ()
Iterates through an array and calls the callback ( value, index, array )
method on each.
$.each ( array, callback )
$.extend ()
Extends target object with properties from the source object.
$.extend ( target, source )
$.hasData ()
Determine whether an element has any Cash data associated with it.
$.hasData ( document.body )
$.isArray ()
Check if the argument is an array.
$.isArray ([ 1, 2, 3 ])
$.isFunction ()
Check if the argument is a function.
function fn () {};
$.isFunction ( fn )
$.isNumeric ()
Check if the argument is numeric.
$.isNumeric ( 57 )
$.isString ()
Check if the argument is a string.
$.isString ( 'hello' )
$.matches ()
Checks a selector against an element, returning a boolean value for match.
$.matches ( element, selector )
$.parseHTML ()
Returns a collection from an HTML string.
$.parseHTML ( htmlString )
$.prefixedProp ()
Return a prefixed CSS property, if necessary.
$.prefixedProp ( 'transform' )
$.unique ()
Returns a new array with duplicates removed.
$.unique ( array )
Contributing
If you found a problem, or have a feature request, please open an issue about it.
If you want to make a pull request you should:
- Clone the repository:
git clone https://github.com/kenwheeler/cash.git
. - Enter the cloned repository:
cd cash
- Install the dependencies:
npm install
. - Automatically recompile Cash whenever a change is made:
npm run dev
. - Automatically rerun the tests whenever a change is made:
npm run test:watch
. - Remember to update the readme, if necessary.
Thanks
- @hisk - The "design focused engineer" behind our awesome logo.
- Sauce Labs - The cross-browser testing platform we use for testing our builds in all the supported environments.
License
MIT © Ken Wheeler