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

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

Utilities

$.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