Cash

Cash is an absurdly small jQuery alternative for modern browsers (IE11+) 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 Slim 3.4.1
Unminified	36.5 KB	58.7 KB	227 KB
Minified	16 KB	26 KB	71 KB
Minified & Gzipped	6 KB	9.8 KB	24.4 KB

A 76.6% gain in size reduction compared to jQuery Slim. If you need a smaller bundle, we support partial builds too.

Features	Cash	Zepto 1.2.0	jQuery Slim 3.4.1
Supports Older Browsers	❌	️❌	✔
Supports Modern Browsers	✔	️✔	✔
Actively Maintained	✔	❌	✔
Namespaced Events	✔	️❌	✔
Typed Codebase	✔ (TypeScript)	️❌	❌
TypeScript Types	✔ (generated from code)	⚠️ (via DefinitelyTyped)	⚠️ (via DefinitelyTyped)
Partial Builds	✔ (can exclude individual methods)	⚠️ (can exclude whole modules)	⚠️ (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/8.1.5/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 --save cash-dom

That you can then use like this:

import $ from "cash-dom";

$(function () {
  $('html').addClass ( 'dom-loaded' );
  $('<footer>Appended with Cash</footer>').appendTo ( document.body );
});

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, pretty much everything that we do implement should be compatible with jQuery. Cash can be extended with custom methods, read how here.

$()

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 [, element] ) // => collection, using `element` as the context
$( selector [, collection] ) // => collection, using `collection` as the context
$(node) // => collection
$(nodeList) // => collection
$(htmlString) // => collection
$(collection) // => self
$(function () {}) // => document ready callback

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 ) // => collection

Some extra methods are available but disabled by default.

Attributes	Collection	CSS	Data	Dimensions	Effects
fn.addClass ()	fn.add ()	fn.css ()	fn.data ()	fn.height ()	fn.hide ()
fn.attr ()	fn.each ()			fn.innerHeight ()	fn.show ()
fn.hasClass ()	fn.eq ()			fn.innerWidth ()	fn.toggle ()
fn.prop ()	fn.filter ()			fn.outerHeight ()
fn.removeAttr ()	fn.first ()			fn.outerWidth ()
fn.removeClass ()	fn.get ()			fn.width ()
fn.removeProp ()	fn.index ()
fn.toggleClass ()	fn.last ()
	fn.map ()
	fn.slice ()

Events	Forms	Manipulation	Offset	Traversal
fn.off ()	fn.serialize ()	fn.after ()	fn.offset ()	fn.children ()
fn.on ()	fn.val ()	fn.append ()	fn.offsetParent ()	fn.closest ()
fn.one ()		fn.appendTo ()	fn.position ()	fn.contents ()
fn.ready ()		fn.before ()		fn.find ()
fn.trigger ()		fn.clone ()		fn.has ()
		fn.detach ()		fn.is ()
		fn.empty ()		fn.next ()
		fn.html ()		fn.nextAll ()
		fn.insertAfter ()		fn.nextUntil ()
		fn.insertBefore ()		fn.not ()
		fn.prepend ()		fn.parent ()
		fn.prependTo ()		fn.parents ()
		fn.remove ()		fn.parentsUntil ()
		fn.replaceAll ()		fn.prev ()
		fn.replaceWith ()		fn.prevAll ()
		fn.text ()		fn.prevUntil ()
		fn.unwrap ()		fn.siblings ()
		fn.wrap ()
		fn.wrapAll ()
		fn.wrapInner ()

$.fn

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

fn.add ()

Returns a new collection with the element(s) added to the end.

$(element).add ( element ) // => collection
$(element).add ( selector ) // => collection
$(element).add ( collection ) // => collection

fn.addClass ()

Adds the className class to each element in the collection.

Accepts space-separated className for adding multiple classes.

$(element).addClass ( className ) // => collection

fn.after ()

Inserts content or elements after the collection.

$(element).after ( element ) // => collection
$(element).after ( htmlString ) // => collection
$(element).after ( content [, content] ) // => collection

fn.append ()

Appends content or elements to each element in the collection.

$(element).append ( element ) // => collection
$(element).append ( htmlString ) // => collection
$(element).append ( content [, content] ) // => collection

fn.appendTo ()

Adds the elements in the collection to the target element(s).

$(element).appendTo ( element ) // => collection

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 ) // value
$(element).attr ( attrName, attrValue ) // => collection
$(element).attr ( object ) // => collection

fn.before ()

Inserts content or elements before the collection.

$(element).before ( element ) // => collection
$(element).before ( htmlString ) // => collection
$(element).before ( content [, content] ) // => collection

fn.children ()

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

fn.closest ()

Returns the closest matching selector up the DOM tree.

$(element).closest ( selector ) // => collection

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 ( '*' ) // => collection

fn.clone ()

Returns a collection with cloned elements.

$(element).clone () // => collection

fn.detach ()

Removes collection elements, optionally that match the selector, from the DOM.

$(element).detach () // => collection
$(element).detach ( selector ) // => collection

fn.css ()

Returns a CSS property value when just property is supplied.

Sets a CSS property when property