#Cash An absurdly small jQuery alternative for modern browsers (IE9+)

Cash is a small library for modern browsers (Chrome, Firefox, Safari and Internet Explorer 9+) 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.

Size Comparison

| Library | Cash | jQuery 3.0 | jQuery 2.2 | | ------------------------- | --------------:| -----------:| -----------:| | Uncompressed | 20K | 263K | 253K | | Minified | 9.8K | 86K | 76K | | Minified & Gzipped | 3.5K | 34K | 30K |

Usage

Add cash to your project on your server or using the jsDelivr or CloudFlare CDNs, and use cash to manipulate the DOM!

<script src="https://cdn.jsdelivr.net/cash/1.3.0/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

And through Bower as cash:

bower install cash

Documentation

$()

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

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

| Attributes | Collection | CSS | Data | Dimensions | Events | | ---------- | ---------- | --- | ---- | ---------- | ------ | | $.fn.addClass() | $.fn | $.fn.css() | $.fn.data() | $.fn.height() | $.fn.off() | | $.fn.attr() | $.fn.add() | | $.fn.removeData() | $.fn.innerHeight() | $.fn.on() | | $.fn.hasClass() | $.fn.each() | | | $.fn.innerWidth() | $.fn.one() | | $.fn.prop() | $.fn.eq() | | | $.fn.outerHeight() | $.fn.ready() | | $.fn.removeAttr() | $.fn.filter() | | | $.fn.outerWidth() | $.fn.trigger() | | $.fn.removeClass() | $.fn.first() | | | $.fn.width() | | | $.fn.removeProp() | $.fn.get() | | | | | | $.fn.toggleClass() | $.fn.index() | | | | | | | $.fn.last() | | | | |

| Forms | Manipulation | Offset | Traversal | | ----- | ------------ | ------ | --------- | | $.fn.serialize() | $.fn.after() | $.fn.offset() | $.fn.children() | | $.fn.val() | $.fn.append() | $.fn.offsetParent() | $.fn.closest() | | | $.fn.appendTo() | $.fn.position() | $.fn.find() | | | $.fn.before() | | $.fn.has() | | | $.fn.clone() | | $.fn.is() | | | $.fn.empty() | | $.fn.next() | | | $.fn.html() | | $.fn.not() | | | $.fn.insertAfter() | | $.fn.parent() | | | $.fn.insertBefore() | | $.fn.parents() | | | $.fn.prepend() | | $.fn.prev() | | | $.fn.prependTo() | | $.fn.siblings() | | | $.fn.remove() | | | | | $.fn.text() | | |

Utilities

| Type Checking | Utilities | | ------------- | --------- | | $.isArray() | $.each() | | $.isFunction() | $.extend() | | $.isNumeric() | $.matches() | | $.isString() | $.parseHTML() |

$.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 argument to collection elements.

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

$.fn.after()

Inserts content or elements after the collection.

$(element).after(element) // => collection
$(element).after(htmlString) // => collection

$.fn.append()

Appends the target element to the each element in the collection.

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

$.fn.appendTo()

Adds the elements in a 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) // => AttributeValue
$(element).attr(attrName, attrValue) // => collection

$.fn.before()

Inserts content or elements before the collection.

$(element).before(element) // => collection
$(element).before(htmlString) // => 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() // => collection
$(element).closest(selector) // => collection

$.fn.clone()

Returns a clone of the collection.

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

$.fn.css()

Returns a CSS property value when just property is supplied. Sets a CSS property when property and value are supplied, and set 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

$.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(key) // => value
$(element).data(key, value) // => collection
$(element).data(object) // => collection

$.fn.each()

Iterates over a collection with callback(value, index, array).

$(element).each(callback) // => collection

$.fn.empty()

Empties an elements interior markup.

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

$.fn.eq()

Returns a collection with the element at index.

$(element).eq(index) // => collection

$.fn.extend()

Adds properties to the cash collection prototype.

$.fn.extend(source) // => object

$.fn.filter()

Returns the collection that results from applying the filter method.

$(element).filter(function) // => collection

$.fn.find()

Returns selector match descendants from the first element in the collection.

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

$.fn.first()

Returns the first element in the collection.

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

$.fn.get()

Returns the element at the index.

$(element).get(index) // => domNode

$.fn.has()

Returns boolean result of the selector argument against the collection.

$(element).has(selector) // => boolean

$.fn.hasClass()

Returns the boolean result of checking if the first element in the collection has the className attribute.

$(element).hasClass(className) // => boolean

$.fn.height()

Returns the height of the element.

$(element).height() // => Integer

$.fn.html()

Returns the HTML text of the first element in the collection, sets the HTML if provided.

$(element).html() // => HTML Text
$(element).html(HTML) // => HTML Text

$.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() // => Integer
$(element).index(element) // => Integer

$.fn.innerHeight()

Returns the height of the element + padding.

$(element).innerHeight() // => Integer

$.fn.innerWidth()

Returns the width of the element + padding.

$(element).innerWidth() // => Integer

$.fn.insertAfter()

Inserts collection after specified element.

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

$.fn.insertBefore()

Inserts collection before specified element.

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

$.fn.is()

Returns whether the provided selector, element or collection matches any element in the collection.

$(element).is(selector) // => boolean

$.fn.last()

Returns last element in the collection.

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

$.fn.next()

Returns next sibling.

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

$.fn.not()

Filters collection by false match on selector.

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

$.fn.off()

Removes event listener from collection elements.

$(element).off(eventName,eventHandler) // => collection

$.fn.offset()

Get the coordinates of the first element in a collection relative to the document.

$(element).offset() // => Object

$.fn.offsetParent()

Get the first element's ancestor that's positioned.

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

$.fn.on()

Adds event listener to collection elements. Event is delegated if delegate is supplied.

$(element).on(eventName, eventHandler) // => collection
$(element).on(eventName, delegate, eventHandler) // => collection

$.fn.one()

Adds event listener to collection elements that only triggers once for each element. Event is delegated if delegate is supplied.

$(element).one(eventName, eventHandler) // => collection
$(element).one(eventName, delegate, eventHandler) // => collection

$.fn.outerHeight()

Returns the outer height of the element. Includes margins if margin is set to true.

$(element).outerHeight() // => Integer
$(element).outerHeight(includeMargin) // => Integer

$.fn.outerWidth()

Returns the outer width of the element. Includes margins if margin is set to true.

$(element).outerWidth() // => Integer
$(element).outerWidth(includeMargin) // => Integer

$.fn.parent()

Returns parent element.

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

$.fn.parents()

Returns collection of elements who are parents of element. Optionally filtering by selector.

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

$.fn.position()

Get the coordinates of the first element in a collection relative to its offsetParent.

$(element).position() // => object

$.fn.prepend()

Prepends element to the each element in collection.

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

$.fn.prependTo()

Prepends elements in a collection to the target element(s).

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

$.fn.prev()

Returns the previous adjacent element.

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

$.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) // => property value
$(element).prop(property, value) // => collection
$(element).prop(object) // => collection

$.fn.ready()

Calls callback method on DOMContentLoaded.

$(document).ready(callback) // => collection/span

$.fn.remove()

Removes collection elements from the DOM.

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

$.fn.removeAttr()

Removes attribute from collection elements.

$(element).removeAttr(attrName) // => collection

$.fn.removeClass()

Removes className from collection elements. Accepts space-separated classNames for removing multiple classes. Providing no arguments will remove all classes.

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

$.fn.removeData()

Removes linked data and data-attributes from collection elements.

$(element).removeData(name) // => collection

$.fn.removeProp()

Removes property from collection elements.

$(element).removeProp(propName) // => collection

$.fn.serialize()

When called on a form, serializes and returns form data.

$(form).serialize() // => String

$.fn.siblings

Returns a collection of sibling elements.

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

$.fn.text

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

$.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) // => collection
$(element).toggleClass(className,force) // => collection

$.fn.trigger()

Triggers supplied event on elements in collection. Data can be passed along as the second parameter.

$(element).trigger(eventName) // => collection
$(element).trigger(eventName,data) // => collection

$.fn.val()

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

$.fn.width()

Returns the width of the element.

$(element).width() // => number

Type Checking

$.isArray()

Check if the argument is an array.

$.isArray([1,2,3]) // => true

$.isFunction()

Check if the argument is a function.

var func = function(){};
$.isFunction(func) // => true

$.isNumeric()

Check if the argument is numeric.

$.isNumeric(57) // => true

$.isString()

Check if the argument is a string.

$.isString('hello') // => true

Utilities

$.each()

Iterates through a collection and calls the callback method on each.

$.each(collection, callback) // => collection

$.extend()

Extends target object with properties from the source object. If no target is provided, cash itself will be extended.

$.extend(target,source) // => object

$.matches()

Checks a selector against an element, returning a boolean value for match.

$.matches(element, selector) // => boolean

$.parseHTML()

Returns a collection from an HTML string.

$.parseHTML(htmlString) // => Collection