An absurdly small jQuery alternative for modern browsers (IE10+)
Cash is a small library 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.
| Cash | jQuery 3.3.1 | |
|---|---|---|
| Uncompressed | 28.7 KB | 271 KB |
| Minified | 11 KB | 87 KB |
| Minified & Gzipped | 4.4 KB | 30.3 KB |
An 85% gain in size reduction. If you need a smaller file, partial builds are supported too since this project is bundled using pacco.
Some alternative configuration files for pacco for generating partial builds are available here.
Let's compare the size of those partial builds (you could actually exclude individual methods and get even smaller builds):
| Enabled Modules | Minified | Minified & Gzipped |
|---|---|---|
| QSA | 1.1 KB | 0.6 KB |
| attributes | 2.8 KB | 1.2 KB |
| events | 3.5 KB | 1.5 KB |
| collection + manipulation + traversal | 5.3 KB | 1.9 KB |
Get cash from CloudFlare or jsDelivr and use it like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/2.1.3/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
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] ) // => collection
$(node) // => collection
$(nodeList) // => collection
$(htmlString) // => collection
$(collection) // => self
$(function () {}) // => document ready callback
These methods from the collection prototype ($.fn) are available once you create a collection with $() and are called like so:
$(element).addClass ( className ) // => collection
The main prototype for collections, allowing you to extend cash with plugins by adding methods to all collections.
$.fn // => cash.prototype
$.fn.myMethod = function () {}; // Custom method added to all collections
$.fn.extend ( object ); // Add multiple methods to the prototype
Returns a new collection with the element(s) added to the end.
$(element).add ( element ) // => collection
$(element).add ( selector ) // => collection
$(element).add ( collection ) // => collection
Adds the className class to each element in the collection.
Accepts space-separated className for adding multiple classes.
$(element).addClass ( className ) // => collection
Inserts content or elements after the collection.
$(element).after ( element ) // => collection
$(element).after ( htmlString ) // => collection
$(element).after ( content [, content] ) // => collection
Appends content or elements to each element in the collection.
$(element).append ( element ) // => collection
$(element).append ( htmlString ) // => collection
$(element).append ( element [, element] ) // => collection
Adds the elements in the collection to the target element(s).
$(element).appendTo ( element ) // => collection
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 ) // => AttributeValue
$(element).attr ( attrName, attrValue ) // => collection
Inserts content or elements before the collection.
$(element).before ( element ) // => collection
$(element).before ( htmlString ) // => collection
$(element).before ( content [, content] ) // => collection
Without a selector specified, returns a collection of child elements.
With a selector, returns child elements that match the selector.
$(element).children () // => collection
$(element).children ( selector ) // => collection
Returns the closest matching selector up the DOM tree.
$(element).closest () // => collection
$(element).closest ( selector ) // => collection
Returns a clone of the collection.
$(element).clone () // => collection
Removes collection elements from the DOM.
$(element).detach () // => collection
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 ) // => value
$(element).css ( property, value ) // => collection
$(element).css ( object ) // => collection
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 () // => object
$(element).data ( key ) // => value
$(element).data ( key, value ) // => collection
$(element).data ( object ) // => collection
Iterates over a collection with callback ( index, element ).
$(element).each ( callback ) // => collection
Empties the elements interior markup.
$(element).empty () // => collection
Returns a collection with the element at index.
$(element).eq ( index ) // => collection
Adds properties to the cash collection prototype.
$.fn.extend(object) // => object
Returns the collection that results from applying the filter selector/method.
$(element).filter ( selector ) // => collection
$(element).filter ( function ( index, element ) {} ) // => collection
Returns selector match descendants from the first element in the collection.
$(element).find ( selector ) // => collection
Returns a collection containing only the first element.
$(element).first () // => collection
Returns the element at the index, or returns all elements.
$(element).get ( index ) // => domNode
$(element).get () // => domNode[]
Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
$(element).has ( selector ) // => collection
$(element).has ( element ) // => collection
Returns the boolean result of checking if the first element in the collection has the className attribute.
$(element).hasClass ( className ) // => boolean
Returns or sets the height of the element.
$(element).height () // => Integer
$(element).height ( number ) // => collection
Returns the HTML text of the first element in the collection, sets the HTML if provided.
$(element).html () // => HTML Text
$(element).html ( htmlString ) // => HTML Text
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 () // => Integer
$(element).index ( element ) // => Integer
Returns the height of the element + padding.
$(element).innerHeight () // => Integer
Returns the width of the element + padding.
$(element).innerWidth () // => Integer
Inserts collection after specified element.
$(element).insertAfter ( element ) // => collection
Inserts collection before specified element.
$(element).insertBefore ( element ) // => collection
Returns whether the provided selector, element or collection matches any element in the collection.
$(element).is ( selector ) // => boolean
Returns a collection containing only the last element.
$(element).last () // => collection
Returns a new collection, mapping each element with callback ( index, element ).
$(selector).map ( callback ) // => collection
Returns next sibling.
$(element).next () // => collection
Filters collection by false match on collection/selector.
$(element).not ( selector ) // => collection
$(element).not ( collection ) // => collection
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 ) // => collection
$(element).off ( eventName ) // => collection
$(element).off () // => collection
Get the coordinates of the first element in a collection relative to the document.
$(element).offset () // => Object
Get the first element's ancestor that's positioned.
$(element).offsetParent () // => collection
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 ) // => collection
$(element).on ( eventName, delegate, eventHandler ) // => collection
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 ) // => collection
$(element).one ( eventName, delegate, eventHandler ) // => collection
Returns the outer height of the element. Includes margins if includeMargings is set to true.
$(element).outerHeight () // => Integer
$(element).outerHeight ( includeMargins ) // => Integer
Returns the outer width of the element. Includes margins if includeMargings is set to true.
$(element).outerWidth () // => Integer
$(element).outerWidth ( includeMargins ) // => Integer
Returns parent element.
$(element).parent() // => collection
Returns collection of elements who are parents of element. Optionally filtering by selector.
$(element).parents () // => collection
$(element).parents ( selector ) // => collection
Get the coordinates of the first element in a collection relative to its offsetParent.
$(element).position () // => object
Prepends content or elements to the each element in collection.
$(element).prepend ( element ) // => collection
$(element).prepend ( htmlString ) // => collection
$(element).prepend ( content [, content] ) // => collection
Prepends elements in a collection to the target element(s).
$(element).prependTo ( element ) // => collection
Returns the previous adjacent element.
$(element).prev () // => collection
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 ) // => property value
$(element).prop ( property, value ) // => collection
$(element).prop ( object ) // => collection
Calls callback method on DOMContentLoaded.
$(document).ready ( callback ) // => collection/span
Removes collection elements from the DOM and removes all their event listeners.
$(element).remove () // => collection
This is similar to fn.replaceWith(), but with the source and target reversed.
$(element).replaceAll ( content ) // => collection
Replace collection elements with the provided new content.
$(element).replaceWith ( content ) // => collection
Removes attribute from collection elements.
Accepts space-separated attrName for removing multiple attributes.
$(element).removeAttr ( attrName ) // => collection
Removes className from collection elements.
Accepts space-separated className for adding multiple classes.
Providing no arguments will remove all classes.
$(element).removeClass () // => collection
$(element).removeClass ( className ) // => collection
Removes linked data and data-attributes from collection elements.
$(element).removeData ( name ) // => collection
$(element).removeData () // => collection
Removes property from collection elements.
$(element).removeProp ( propName ) // => collection
When called on a form, serializes and returns form data.
$(form).serialize () // => String
Returns a collection of sibling elements.
$(element).siblings () // => collection
Returns a new collection with elements taken from start to end.
$(selector).slice ( start, end ) // => collection
Returns the inner text of the first element in the collection, sets the text if textContent is provided.
$(element).text () // => text
$(element).text ( textContent ) // => collection
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 ) // => collection
$(element).toggleClass ( className, force ) // => collection
Triggers supplied event on elements in collection. Data can be passed along as the second parameter.
$(element).trigger ( eventName ) // => collection
$(element).trigger ( eventObj ) // => collection
$(element).trigger ( eventName, data ) // => collection
$(element).trigger ( eventObj, data ) // => collection
Returns an inputs value. If value is supplied, sets all inputs in collection's value to the value argument.
$(input).val () // => value
$(input).val ( value ) // => collection
Returns or sets the width of the element.
$(element).width () // => number
$(element).width ( number ) // => collection
These methods are exported from the global $ object, and are called like so:
$.isString ( str ) // => boolean
| Type Checking | Utilities |
|---|---|
| $.isArray () | $.guid |
| $.isFunction () | $.camelCase () |
| $.isNumeric () | $.each () |
| $.isString () | $.extend () |
| $.hasData () | |
| $.matches () | |
| $.parseHTML () | |
| $.prefixedProp () | |
| $.unique () |
A unique number.
$.guid++ // => number
Transforms a string to camelCase.
$.camelCase ( 'border-width' ) // => 'borderWidth'
Iterates through an array and calls the callback ( value, index, array ) method on each.
$.each ( array, callback ) // => undefined
Extends target object with properties from the source object. If no target is provided, cash itself will be extended.
$.extend ( target, source ) // => object
Determine whether an element has any cash data associated with it.
$.hasData ( document.body ) // => boolean
Check if the argument is an array.
$.isArray ([ 1, 2, 3 ]) // => true
Check if the argument is a function.
function fn () {};
$.isFunction ( fn ) // => true
Check if the argument is numeric.
$.isNumeric ( 57 ) // => true
Check if the argument is a string.
$.isString ( 'hello' ) // => true
Checks a selector against an element, returning a boolean value for match.
$.matches ( element, selector ) // => boolean
Returns a collection from an HTML string.
$.parseHTML ( htmlString ) // => collection
Return a prefixed CSS property, if necessary.
$.prefixedProp ( 'transform' ) // => 'mozTransform'
Returns a new array with duplicates removed.
$.unique ( array ) // => array
v2.2.1 (2018-06-16)
FAQs
An absurdly small jQuery alternative for modern browsers.
The npm package cash-dom receives a total of 21,324 weekly downloads. As such, cash-dom popularity was classified as popular.
We found that cash-dom demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.