Mauve.js is a JavaScript library similar to jQuery / Zepto core for modern browsers
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
README.md

README.md

mauve.js

Mauve is a JavaScript library similar to jQuery / Zepto core for modern browsers. Mauve currently minifies in Google Closure Compiler's advanced mode without warnings and passes JSHint.

#Goals

  • Be fast
  • Be readable
  • Be small
  • Be familiar to jQuery / Zepto users
  • Be free to depart from the jQuery / Zepto API
  • Be well documented, especially where departing from the jQuery or Zepto API

#API ###$ $(selector, [context]) => mauve array

Return a mauve array which contains all of the elemtnts in the document which match the selector string. If a context is given, the selection is limited to descendants of the elements represented by the context. Pseudo-selectors (such as :before) are not supported because they are not valid as parameters to document.querySelectorAll. For best performance, call $.queryAll directly, or $.query if you only need the first match.

$(mauve array) => mauve array

Return the given argument

$(Node) => mauve array

Return a mauve array containing the given element.

$(anything[] | NodeList) => mauve array

Return a mauve array containing the nodes of the given array that are valid DOM elements.

$(html) => mauve array

Return a mauve array containing the elements represented in the given HTML string. For best performance, call $.fragment directly.

$(function)

Register a function to be called when the document becomes ready.

###$.fragment $.fragment(html) => mauve array

Return a mauve array containing the elements represented in the given HTML string.

###$.query $.query(selector, [context]) => mauve array

Return a mauve array which contains the first element in the document which matches the selector string. If a context is given, the selection is limited to descendants of the elements represented by the context. Pseudo-selectors (such as :before) are not supported because they are not valid as parameters to document.querySelector.

###$.queryAll $.query(selector, [context]) => mauve array

Return a mauve array which contains all of the elements in the document which match the selector string. If a context is given, the selection is limited to descendants of the elements represented by the context. Pseudo-selectors (such as :before) are not supported because they are not valid as parameters to document.querySelectorAll.

###$.fn.add $(...).add(anything) => this

Add to this mauve array the elements returned by calling $() with the given arguments.

###$.fn.addClass $(...).addClass(classes) => this

Add the classes in the given space-delimited string to all of the elements in this mauve array.

###$.fn.append $(...).append(html) => this

Append the given HTML string to the innerHTML of all of the elements in this mauve array.

$(...).append(Node) => this

Append the given node as the last child of all of the elements in this mauve array.

$(...).append(Node[] | NodeList) => this

Append the given nodes as the last children of all of the elements in this mauve array.

###$.fn.attr Use prop instead of this function when reading DOM properties that change over time such as checked and selected.

$(...).attr(attribute) => value

Return the value of the given attribute from the first element in this mauve array.

$(...).attr(attribute, value) => this

Set the value of the given attribute to the given value for all of the elements in this mauve array.

###$.fn.before $(...).before(html) => this

Prepend the given HTML string to the outerHTML of all of the elements in this mauve array.

$(...).before(Node) => this

Insert the given node before each of the elements in this mauve array if the node has a parent.

$(...).before(Node[] | NodeList) => this

Insert the given nodes before each of the nodes in this mauve array if the node has a parent.

###$.fn.children $(...).children() => mauve array

Return a mauve array containing all of the immediate children of each of the elements in this mauve array.

###$.fn.clone $(...).clone() => mauve array

Return a mauve array containing deep clones of each of the elements in this mauve array. This method doesn't have an option for copying data and event handlers over to the new elements, as it has in jQuery.

###$.fn.closest $(...).closest(selector, [context]) => mauve array

Return a mauve array containing the first elements that match the given selector in a walk up the DOM heirarchy from each element in this mauve array including the elements themselves. If a context is given, the selection is limited to descendants of the elements represented by the context.

###$.fn.css $(...).css(property) => value

Return the value of the given CSS property from the first element in this mauve array. The value is fetched from the computed style of the element, or from the style property if the computed value is falsy, as it would be if the element were not in the DOM.

$(...).css(property, value) => value

Set the value of the given CSS property to the given value for all of the elements in this mauve array.

###$.fn.eq $(...).eq(index) => mauve array

Return a mauve array containing the element at the given index in this mauve array. The index may be negative and is wrapped using the length of this mauve array as the modulus. If this mauve array is empty an empty mauve array os returned.

###$.fn.find $(...).find(selector) => mauve array

Return a mauve array containing the elements which match the given selector and are descendents of any element in this mauve array.

###$.fn.findFirst $(...).find(selector) => mauve array

Return a mauve array containing the first element which matches the given selector and is a descendent of any element in this mauve array.

###$.fn.first $(...).first() => mauve array

Return a mauve array containing the first element in this mauve array, or an empty mauve array if this mauve array is empty.

###$.fn.get $(...).get() => Node[]

Return a plain array of the elements in this mauve array.

$(...).get(index) => Element

Return the element at the given index in this mauve array. The index may be negative and is wrapped using the length of this mauve array as the modulus. If this mauve array is empty return undefined.

###$.fn.hasClass $(...).hasClass(className) => boolean[]

Return true if the first element in this mauve array has the given CSS class, false otherwise. Unlike jQuery, passing a comma-delimited string of class names is not supported.

###$.fn.height $(...).height([extent=$.dimensions.BOXSIZING]) => number

Return the computed value for the height of the first element in this mauve array. The given extent defines how to measure the height. This function differs from both the jQuery and Zepto implementations.

If no value is given or the value is $.dimensions.BOXSIZING then the height is calculated using the current box-sizing of the given element. A box-sizing of 'content-box' evaluates to $.dimensions.CONTENT, a box-sizing of 'padding-box' evaluates to $.dimensions.PADDING and a box-sizing of 'border-box' evaluates to $.dimensions.BORDER. Note that there is no 'margin-box' and 'padding-box' is only available in Gecko and is currently under review.

If the value is $.dimensions.CONTENT then the returned value is the height of the content box of the given element.

If the value is $.dimensions.PADDING then the returned value is the height of the padding box of the given element.

If the value is $.dimensions.BORDER then the returned value is the height of the border box of the given element.

If the value is $.dimensions.MARGIN then the returned value is the height of the margin box of the given element.

###$.fn.hide $(...).hide() => this

Sets the value of the display CSS property to 'none' for each element in this mauve array.

###$.fn.is $(...).is(selector) => this

Return true if the first element in this mauve array matches the given selector, false otherwise.

###$.fn.next $(...).next() => mauve array

Return an mauve array of the the next siblings of the elements in this mauve array. If an element does not have a next sibling it is not included in the returned array.

###$.fn.parent $(...).parent() => mauve array

Return an mauve array of the the immediate parents of the elements in this mauve array. If an element does not have a direct parent it is not included in the returned array.

###$.fn.parents $(...).parents() => mauve array

Return a mauve array of all of the parents of the elements in this mauve array obtained by walking up the DOM tree.

###$.fn.prepend $(...).prepend(html) => this

Prepend the given HTML string to the innerHTML of all of the elements in this mauve array.

$(...).prepend(Node) => this

Prepend the given node as the first child of all of the elements in this mauve array.

$(...).prepend(Node[] | NodeList) => this

Prepend the given nodes as the first children of all of the elements in this mauve array.

###$.fn.prev $(...).prev() => mauve array

Return an mauve array of the the previous siblings of the elements in this mauve array. If an element does not have a previous sibling it is not included in the returned array.

###$.fn.prop

$(...).prop(property) => value

Return the value of the given property from the first element in this mauve array. Use this function over attr when reading DOM properties that change over time such as checked and selected.

$(...).prop(property, value) => this

Set the value of the given property to the given value for all of the elements in this mauve array.

###$.fn.remove $(...).remove() => this

Remove all of the elements in this mauve array from their parent elements, if any.

###$.fn.removeClass $(...).removeClass(className) => this

Remove the classes in the given space-delimited string from all of the elements in this mauve array.

###$.fn.show $(...).show() => this

Sets the display value in the inline style of each of the elements in this mauve array to the empty string so that the display property reverts back to the CSS specified value. This means that unlike jQuery and Zepto, if an element's specified CSS value for display is 'none', then the element will not become visible.

###$.fn.siblings $(...).siblings([selector]) => mauve array

Return a mauve array containing all of the siblings of each of the elements in this mauve array. If a selector is given, only the siblings that match the selector will be returned.

###$.fn.text $(...).text() => string

Return the text content of the first element in this mauve array.

$(...).text(textContent) => this

Sets the text content of each of the elements in this mauve array to the given text content string.

###$.fn.val $(...).val() => string

Return the value of the first element in this mauve array.

$(...).val(value) => this

Sets the value of each of the elements in this mauve array to the given value.

###$.fn.width $(...).width([extent=$.dimensions.BOXSIZING]) => number

Return the computed value for the width of the first element in this mauve array. The given extent defines how to measure the width. This function differs from both the jQuery and Zepto implementations.

If no value is given or the value is $.dimensions.BOXSIZING then the width is calculated using the current box-sizing of the given element. A box-sizing of 'content-box' evaluates to $.dimensions.CONTENT, a box-sizing of 'padding-box' evaluates to $.dimensions.PADDING and a box-sizing of 'border-box' evaluates to $.dimensions.BORDER. Note that there is no 'margin-box' and 'padding-box' is only available in Gecko and is currently under review.

If the value is $.dimensions.CONTENT then the returned value is the width of the content box of the given element.

If the value is $.dimensions.PADDING then the returned value is the width of the padding box of the given element.

If the value is $.dimensions.BORDER then the returned value is the width of the border box of the given element.

If the value is $.dimensions.MARGIN then the returned value is the width of the margin box of the given element.

#Supported Browsers

  • Chrome (latest stable)
  • Firefox (latest stable)
  • Safari (latest stable)
  • iOS 4 (probably) +
  • Android 2.2 (probably) +

#Currently Unsupported Browsers

  • Internet Explorer
  • Opera (mostly because of __proto__)