Freedom
Freedom 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 Freedom comes helpfully close, covering most day to day use cases.
Comparison
| Size | Freedom | jQuery Slim 3.4.1 |
|---|---|---|
| Unminified | 34 KB | 227 KB |
| Minified | 16 KB | 71 KB |
| Minified & Gzipped | 6 KB | 24.4 KB |
A 76.6% gain in size reduction compared to jQuery.
| Features | Freedom | jQuery Slim 3.4.1 |
|---|---|---|
| Supports Older Browsers | ❌ | ✔ |
| Supports Modern Browsers | ✔ | ✔ |
| Actively Maintained | ✔ | ✔ |
| Namespaced Events | ✔ | ✔ |
Usage
Get Freedom from CaveOps and use it like this:
<script src="https://caveops.com/static/packages/freedom/1.0.0/freedom.min.js"></script>
<script>
$(function () {
$('html').addClass ( 'dom-loaded' );
$('<footer>Appended with Freedom</footer>').appendTo ( document.body );
});
</script>
Documentation
$()
This is the main selector method for Freedom. 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
$.fn
The main prototype for collections, allowing you to extend Freedom with plugins by adding methods to all collections.
$.fn // => Freedom.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 and value are supplied.
Sets 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 ()
Without arguments, returns an object mapping all the data-* attributes to their values.
With a key, return the value of the corresponding data-* attribute.
With both a key and value, sets the value of the corresponding data-* attribute to value.
Multiple data can be set when an object is supplied.
$(element).data () // => object
$(element).data ( key ) // => value
$(element).data ( key, value ) // => collection
$(element).data ( object ) // => collection
fn.each ()
Iterates over a collection with callback ( index, element ). The callback function may exit iteration early by returning false.
$(element).each ( callback ) // => collection
fn.empty ()
Empties the 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 Freedom collection prototype.
$.fn.extend ( object ) // => object
fn.filter ()
Returns the collection that results from applying the filter selector/method.
$(element).filter ( selector ) // => collection
$(element).filter ( function ( index, element ) {} ) // => collection
fn.find ()
Returns selector match descendants from the first element in the collection.
$(element).find ( selector ) // => collection
fn.first ()
Returns a collection containing only the first element.
$(element).first () // => collection
fn.get ()
Returns the element at the index, or returns all elements.
$(element).get ( index ) // => domNode
$(element).get () // => domNode[]
fn.has ()
Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
$(element).has ( selector ) // => collection
$(element).has ( element ) // => collection
fn.hasClass ()
Returns the boolean result of checking if any element in the collection has the className attribute.
$(element).hasClass ( className ) // => boolean
fn.height ()
Returns or sets the height of the element.
$(element).height () // => Integer
$(element).height ( number ) // => collection
fn.hide ()
Hide the elements.
$(element).hide () // => collection
fn.html ()
Returns the HTML text of the first element in the collection, sets the HTML if provided.
$(element).html () // => HTML Text
$(element).html ( htmlString ) // => 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 a collection containing only the last element.
$(element).last () // => collection
fn.map ()
Returns a new collection, mapping each element with callback ( index, element ).
$(selector).map ( callback ) // => collection
fn.next ()
Returns the next adjacent elements.
$(element).next () // => collection
$(element).next ( selector ) // => collection
fn.nextAll ()
Returns all the next elements.
$(element).nextAll () // => collection
$(element).nextAll ( selector ) // => collection
fn.nextUntil ()
Returns all the next elements, until the provided selector matches.
$(element).nextUntil ( selector ) // => collection
$(element).nextUntil ( selector, filterSelector ) // => collection
fn.not ()
Filters collection by false match on collection/selector.
$(element).not ( selector ) // => collection
$(element).not ( collection ) // => collection
fn.off ()
Removes event listener from collection elements.
Accepts space-separated eventName for removing multiple events listeners.
Removes all event listeners if called without arguments.
$(element).off ( eventName, eventHandler ) // => collection
$(element).off ( eventName ) // => collection
$(element).off ( eventsMap ) // => collection
$(element).off () // => 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.
Accepts space-separated eventName for listening to multiple events.
Event is delegated if delegate is supplied.
$(element).on ( eventsMap ) // => collection
$(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.
Accepts space-separated eventName for listening to multiple events.
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 includeMargings is set to true.
$(element).outerHeight () // => Integer
$(element).outerHeight ( includeMargins ) // => Integer
fn.outerWidth ()
Returns the outer width of the element. Includes margins if includeMargings is set to true.
$(element).outerWidth () // => Integer
$(element).outerWidth ( includeMargins ) // => Integer
fn.parent ()
Returns collection of elements who are parent of elements.
$(element).parent () // => collection
$(element).parent ( selector ) // => collection
fn.parents ()
Returns collection of elements who are parents of elements. Optionally filtering by selector.
$(element).parents () // => collection
$(element).parents ( selector ) // => collection
fn.parentsUntil ()
Returns collection of elements who are parents of elements, until a provided selector matches. Optionally filtering by selector.
$(element).parentsUntil ( selector ) // => collection
$(element).parentsUntil ( selector, filterSelector ) // => collection
fn.position ()
Get the coordinates of the first element in a collection relative to its offsetParent.
$(element).position () // => object
fn.prepend ()
Prepends content or elements to the each element in collection.
$(element).prepend ( element ) // => collection
$(element).prepend ( htmlString ) // => collection
$(element).prepend ( content [, content] ) // => collection
fn.prependTo ()
Prepends elements in a collection to the target element(s).
$(element).prependTo ( element ) // => collection
fn.prev ()
Returns the previous adjacent elements.
$(element).prev () // => collection
$(element).prev ( selector ) // => collection
fn.prevAll ()
Returns all the previous elements.
$(element).prevAll () // => collection
$(element).prevAll ( selector ) // => collection
fn.prevUntil ()
Returns all the previous elements, until the provided selector matches.
$(element).prevUntil ( selector ) // => collection
$(element).prevUntil ( selector, filterSelector ) // => 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, optionally that match the selector, from the DOM and removes all their event listeners.
$(element).remove () // => collection
$(element).remove ( selector ) // => collection
fn.replaceAll ()
This is similar to fn.replaceWith (), but with the source and target reversed.
$(element).replaceAll ( content ) // => collection
fn.replaceWith ()
Replace collection elements with the provided new content.
$(element).replaceWith ( content ) // => collection
fn.removeAttr ()
Removes attribute from collection elements.
Accepts space-separated attrName for removing multiple attributes.
$(element).removeAttr ( attrName ) // => collection
fn.removeClass ()
Removes className from collection elements.
Accepts space-separated className for adding multiple classes.
Providing no arguments will remove all classes.
$(element).removeClass () // => collection
$(element).removeClass ( className ) // => 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.show ()
Show the elements.
$(element).show () // => collection
fn.siblings ()
Returns a collection of sibling elements.
$(element).siblings () // => collection
$(element).siblings ( selector ) // => collection
fn.slice ()
Returns a new collection with elements taken from start to end.
$(selector).slice ( start, end ) // => 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.toggle ()
Hide or show the elements.
$(element).toggle () // => 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 ( eventObj ) // => collection
$(element).trigger ( eventName, data ) // => collection
$(element).trigger ( eventObj, data ) // => collection
fn.unwrap ()
Removes the wrapper from all elements.
$(element).unwrap () // => 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 or sets the width of the element.
$(element).width () // => number
$(element).width ( number ) // => collection
fn.wrap ()
Wraps a structure around each element.
$(element).wrap ( structure ) // => collection
fn.wrapAll ()
Wraps a structure around all elements.
$(element).wrapAll ( structure ) // => collection
fn.wrapInner ()
Wraps a structure around all children.
$(element).wrapInner ( structure ) // => collection
Freedom Methods
These methods are exported from the global $ object, and are called like so:
$.isArray ( arr ) // => boolean
| Type Checking | Utilities |
|---|---|
| $.isArray () | $.guid |
| $.isFunction () | $.each () |
| $.isNumeric () | $.extend () |
| $.isPlainObject () | $.parseHTML () |
| $.isWindow () | $.unique () |
$.guid
A unique number.
$.guid++ // => number
$.each ()
Iterates through an array and calls the callback ( index, element ) method on each element.
Iterates through an object and calls the callback ( key, value ) method on each property.
The callback function may exit iteration early by returning false.
$.each ( array, callback ) // => array
$.each ( object, callback ) // => object
$.extend ()
Extends target object with properties from the source object, potentially deeply too.
$.extend ( target, source ) // => object
$.extend ( true, target, source ) // => object
$.isArray ()
Check if the argument is an array.
$.isArray ([ 1, 2, 3 ]) // => true
$.isFunction ()
Check if the argument is a function.
function fn () {};
$.isFunction ( fn ) // => true
$.isNumeric ()
Check if the argument is numeric.
$.isNumeric ( 57 ) // => true
$.isPlainObject ()
Check if the argument is a plain object.
$.isPlainObject ( {} ) // => true
$.isWindow ()
Check if the argument is a Window object.
$.isWindow ( window ) // => true
$.parseHTML ()
Returns a collection from an HTML string.
$.parseHTML ( htmlString ) // => collection
$.unique ()
Returns a new array with duplicates removed.
$.unique ( array ) // => array
License
MIT © Ezra