#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.
| Library | Cash | jQuery 3.0 | jQuery 2.2 |
|---|---|---|---|
| Uncompressed | 20K | 263K | 253K |
| Minified | 9.8K | 86K | 76K |
| Minified & Gzipped | 3.5K | 34K | 30K |
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
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 callbackThese methods from the collection prototype ( $.fn ) are available once
you create a collection with $() and are called like so:
$(element).addClass(className) // => collection| Type Checking | Utilities |
|---|---|
| $.isArray() | $.each() |
| $.isFunction() | $.extend() |
| $.isNumeric() | $.matches() |
| $.isString() | $.parseHTML() |
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) // => collectionAdds the className argument to collection elements.
$(element).addClass(className) // => collectionInserts content or elements after the collection.
$(element).after(element) // => collection
$(element).after(htmlString) // => collectionAppends the target element to the each element in the collection.
$(element).append(element) // => collectionAdds the elements in a collection to the target element(s).
$(element).appendTo(element) // => collectionWithout 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) // => collectionInserts content or elements before the collection.
$(element).before(element) // => collection
$(element).before(htmlString) // => collectionWithout 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) // => collectionReturns the closest matching selector up the DOM tree.
$(element).closest() // => collection
$(element).closest(selector) // => collectionReturns a clone of the collection.
$(element).clone() // => collectionReturns 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) // => collectionLink 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) // => collectionIterates over a collection with callback(value, index, array).
$(element).each(callback) // => collectionEmpties an elements interior markup.
$(element).empty() // => collectionReturns a collection with the element at index.
$(element).eq(index) // => collectionAdds properties to the cash collection prototype.
$.fn.extend(source) // => objectReturns the collection that results from applying the filter method.
$(element).filter(function) // => collectionReturns selector match descendants from the first element in the collection.
$(element).find(selector) // => collectionReturns the first element in the collection.
$(element).first() // => collectionReturns the element at the index.
$(element).get(index) // => domNodeReturns boolean result of the selector argument against the collection.
$(element).has(selector) // => booleanReturns the boolean result of checking if the first element in the collection has the className attribute.
$(element).hasClass(className) // => booleanReturns the height of the element.
$(element).height() // => IntegerReturns the HTML text of the first element in the collection, sets the HTML if provided.
$(element).html() // => HTML Text
$(element).html(HTML) // => HTML TextReturns 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) // => IntegerReturns the height of the element + padding.
$(element).innerHeight() // => IntegerReturns the width of the element + padding.
$(element).innerWidth() // => IntegerInserts collection after specified element.
$(element).insertAfter(element) // => collectionInserts collection before specified element.
$(element).insertBefore(element) // => collectionReturns whether the provided selector, element or collection matches any element in the collection.
$(element).is(selector) // => booleanReturns last element in the collection.
$(element).last() // => collectionReturns next sibling.
$(element).next() // => collectionFilters collection by false match on selector.
$(element).not(selector) // => collectionRemoves event listener from collection elements.
$(element).off(eventName,eventHandler) // => collectionGet the coordinates of the first element in a collection relative to the document.
$(element).offset() // => ObjectGet the first element's ancestor that's positioned.
$(element).offsetParent() // => collectionAdds event listener to collection elements. Event is delegated if delegate is supplied.
$(element).on(eventName, eventHandler) // => collection
$(element).on(eventName, delegate, eventHandler) // => collectionAdds 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) // => collectionReturns the outer height of the element. Includes margins if margin is set to true.
$(element).outerHeight() // => Integer
$(element).outerHeight(includeMargin) // => IntegerReturns the outer width of the element. Includes margins if margin is set to true.
$(element).outerWidth() // => Integer
$(element).outerWidth(includeMargin) // => IntegerReturns parent element.
$(element).parent() // => collectionReturns collection of elements who are parents of element. Optionally filtering by selector.
$(element).parents() // => collection
$(element).parents(selector) // => collectionGet the coordinates of the first element in a collection relative to its offsetParent.
$(element).position() // => objectPrepends element to the each element in collection.
$(element).prepend(element) // => collectionPrepends elements in a collection to the target element(s).
$(element).prependTo(element) // => collectionReturns the previous adjacent element.
$(element).prev() // => collectionReturns 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) // => collectionCalls callback method on DOMContentLoaded.
$(document).ready(callback) // => collection/spanRemoves collection elements from the DOM.
$(element).remove() // => collectionRemoves attribute from collection elements.
$(element).removeAttr(attrName) // => collectionRemoves 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) // => collectionRemoves linked data and data-attributes from collection elements.
$(element).removeData(name) // => collectionRemoves property from collection elements.
$(element).removeProp(propName) // => collectionWhen called on a form, serializes and returns form data.
$(form).serialize() // => StringReturns a collection of sibling elements.
$(element).siblings() // => collectionReturns the inner text of the first element in the collection, sets the text if textContent is provided.
$(element).text() // => text
$(element).text(textContent) // => collectionAdds 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) // => collectionTriggers supplied event on elements in collection. Data can be passed along as the second parameter.
$(element).trigger(eventName) // => collection
$(element).trigger(eventName,data) // => collectionReturns an inputs value. If value is supplied, sets all inputs in collection's value to the value argument.
$(input).val() // => value
$(input).val(value) // => collectionReturns the width of the element.
$(element).width() // => numberCheck if the argument is an array.
$.isArray([1,2,3]) // => trueCheck if the argument is a function.
var func = function(){};
$.isFunction(func) // => trueCheck if the argument is numeric.
$.isNumeric(57) // => trueCheck if the argument is a string.
$.isString('hello') // => trueIterates through a collection and calls the callback method on each.
$.each(collection, callback) // => collectionExtends target object with properties from the source object. If no target is provided, cash itself will be extended.
$.extend(target,source) // => objectChecks a selector against an element, returning a boolean value for match.
$.matches(element, selector) // => booleanReturns a collection from an HTML string.
$.parseHTML(htmlString) // => Collection