#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])
$(node)
$(nodeList)
$(htmlString)
$(collection)
$(function)
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)
Utilities
$.fn
The main prototype for collections, allowing you to extend cash with plugins
by adding methods to all collections.
$.fn
$.fn.myMethod = function(){ };
$.fn.extend(object);
$.fn.add()
Returns a new collection with the element(s) added to the end.
$(element).add(element)
$(element).add(selector)
$(element).add(collection)
$.fn.addClass()
Adds the className argument to collection elements.
$(element).addClass(className)
$.fn.after()
Inserts content or elements after the collection.
$(element).after(element)
$(element).after(htmlString)
$.fn.append()
Appends the target element to the each element in the collection.
$(element).append(element)
$.fn.appendTo()
Adds the elements in a collection to the target element(s).
$(element).appendTo(element)
$.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)
$(element).attr(attrName, attrValue)
$.fn.before()
Inserts content or elements before the collection.
$(element).before(element)
$(element).before(htmlString)
$.fn.children()
Without a selector specified, returns a collection of child elements. With a
selector, returns child elements that match the selector.
$(element).children()
$(element).children(selector)
$.fn.closest()
Returns the closest matching selector up the DOM tree.
$(element).closest()
$(element).closest(selector)
$.fn.clone()
Returns a clone of the collection.
$(element).clone()
$.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)
$(element).css(property, value)
$(element).css(object)
$.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)
$(element).data(key, value)
$(element).data(object)
$.fn.each()
Iterates over a collection with callback(value, index, array).
$(element).each(callback)
$.fn.empty()
Empties an elements interior markup.
$(element).empty()
$.fn.eq()
Returns a collection with the element at index.
$(element).eq(index)
$.fn.extend()
Adds properties to the cash collection prototype.
$.fn.extend(source)
$.fn.filter()
Returns the collection that results from applying the filter method.
$(element).filter(function)
$.fn.find()
Returns selector match descendants from the first element in the collection.
$(element).find(selector)
$.fn.first()
Returns the first element in the collection.
$(element).first()
$.fn.get()
Returns the element at the index.
$(element).get(index)
$.fn.has()
Returns boolean result of the selector argument against the collection.
$(element).has(selector)
$.fn.hasClass()
Returns the boolean result of checking if the first element in the collection
has the className attribute.
$(element).hasClass(className)
$.fn.height()
Returns the height of the element.
$(element).height()
$.fn.html()
Returns the HTML text of the first element in the collection, sets the HTML if
provided.
$(element).html()
$(element).html(HTML)
$.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()
$(element).index(element)
$.fn.innerHeight()
Returns the height of the element + padding.
$(element).innerHeight()
$.fn.innerWidth()
Returns the width of the element + padding.
$(element).innerWidth()
$.fn.insertAfter()
Inserts collection after specified element.
$(element).insertAfter(element)
$.fn.insertBefore()
Inserts collection before specified element.
$(element).insertBefore(element)
$.fn.is()
Returns whether the provided selector, element or collection matches any element in the collection.
$(element).is(selector)
$.fn.last()
Returns last element in the collection.
$(element).last()
$.fn.next()
Returns next sibling.
$(element).next()
$.fn.not()
Filters collection by false match on selector.
$(element).not(selector)
$.fn.off()
Removes event listener from collection elements.
$(element).off(eventName,eventHandler)
$.fn.offset()
Get the coordinates of the first element in a collection relative to the document.
$(element).offset()
$.fn.offsetParent()
Get the first element's ancestor that's positioned.
$(element).offsetParent()
$.fn.on()
Adds event listener to collection elements. Event is delegated if delegate is
supplied.
$(element).on(eventName, eventHandler)
$(element).on(eventName, delegate, eventHandler)
$.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)
$(element).one(eventName, delegate, eventHandler)
$.fn.outerHeight()
Returns the outer height of the element. Includes margins if margin is set to true.
$(element).outerHeight()
$(element).outerHeight(includeMargin)
$.fn.outerWidth()
Returns the outer width of the element. Includes margins if margin is set to true.
$(element).outerWidth()
$(element).outerWidth(includeMargin)
$.fn.parent()
Returns parent element.
$(element).parent()
$.fn.parents()
Returns collection of elements who are parents of element. Optionally filtering by selector.
$(element).parents()
$(element).parents(selector)
$.fn.position()
Get the coordinates of the first element in a collection relative to its offsetParent
.
$(element).position()
$.fn.prepend()
Prepends element to the each element in collection.
$(element).prepend(element)
$.fn.prependTo()
Prepends elements in a collection to the target element(s).
$(element).prependTo(element)
$.fn.prev()
Returns the previous adjacent element.
$(element).prev()
$.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)
$(element).prop(property, value)
$(element).prop(object)
$.fn.ready()
Calls callback method on DOMContentLoaded.
$(document).ready(callback)
$.fn.remove()
Removes collection elements from the DOM.
$(element).remove()
$.fn.removeAttr()
Removes attribute from collection elements.
$(element).removeAttr(attrName)
$.fn.removeClass()
Removes className from collection elements. Accepts space-separated classNames
for removing multiple classes. Providing no arguments will remove all classes.
$(element).removeClass()
$(element).removeClass(className)
$.fn.removeData()
Removes linked data and data-attributes from collection elements.
$(element).removeData(name)
$.fn.removeProp()
Removes property from collection elements.
$(element).removeProp(propName)
$.fn.serialize()
When called on a form, serializes and returns form data.
$(form).serialize()
$.fn.siblings
Returns a collection of sibling elements.
$(element).siblings()
$.fn.text
Returns the inner text of the first element in the collection, sets the text if
textContent is provided.
$(element).text()
$(element).text(textContent)
$.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)
$(element).toggleClass(className,force)
$.fn.trigger()
Triggers supplied event on elements in collection. Data can be passed along as the second parameter.
$(element).trigger(eventName)
$(element).trigger(eventName,data)
$.fn.val()
Returns an inputs value. If value is supplied, sets all inputs in collection's
value to the value argument.
$(input).val()
$(input).val(value)
$.fn.width()
Returns the width of the element.
$(element).width()
Type Checking
$.isArray()
Check if the argument is an array.
$.isArray([1,2,3])
$.isFunction()
Check if the argument is a function.
var func = function(){};
$.isFunction(func)
$.isNumeric()
Check if the argument is numeric.
$.isNumeric(57)
$.isString()
Check if the argument is a string.
$.isString('hello')
Utilities
$.each()
Iterates through a collection and calls the callback method on each.
$.each(collection, callback)
$.extend()
Extends target object with properties from the source object. If no target is provided,
cash itself will be extended.
$.extend(target,source)
$.matches()
Checks a selector against an element, returning a boolean value for match.
$.matches(element, selector)
$.parseHTML()
Returns a collection from an HTML string.
$.parseHTML(htmlString)