qoob

A lightweight DOM manipulation library for common tasks.


Keywords
dom, manipulation, common
License
MIT
Install
bower install qoob

Documentation

Qoob logo

Qoob (/kjuːb/)

A lightweight DOM manipulation library.

Examples

CSS manipulation

import Q from 'qoob'

Q.css('p', {
    color: 'red',
    fontWeight: 'bold',
})

Events

import Q from 'qoob'

Q.on('.Button', 'click', (e) => {
    alert('Button was clicked!')
})

Iteration + HTML manipulation

import Q from 'qoob'

Q.each('p', (el, i) => {
    Q.html(el, `I am at index ${i}`)
})

Element creation

import Q from 'qoob'

let p_tag = Q.make('p', 'Hello world!')

Q.append('body', p_tag)

and much more...

Install

NPM

$ npm install --save qoob

Bower

$ bower install qoob

CDN

Development

https://cdn.rawgit.com/enzyme/qoob/master/dist/qoob.js

Production

https://cdn.rawgit.com/enzyme/qoob/master/dist/qoob.min.js

Function reference

Name Parameters Description
addClass selector, class_name Add the given class to the element(s) matching the selector.
ancestor selector, ancestor_selector Get an array of ancestors matching the ancestor_selector for the element(s) matching the selector.
append selector, child_element Append the child element given to the element(s) matching the selector.
attr selector, attribute, value = null Get or set the given attribute for the element(s) matching the selector.
children selector, child_selector = null Get an array of children for the element(s) matching the selector.
clone selector Clone the given element(s) matching the selector and return them as an array.
css selector, properties = {} Set the given css description object on the element(s) matching the selector, or get the value of the css property if properties is a string value. E.g. "padding".
data selector, name, content = null Gets or sets the data attributes on the element(s) matching the selector.
documentReady closure Executes the given callback function with the document is ready.
each selector, closure Execute the given callback function for each element in the list provided.
find selector Find and return any element(s) matching the given selector. If the selector is an array or NodeList, simply return it as is. If the selector is a single object, return it as an array with 1 element.
findAll selectors Find and return any element(s) matching the given selectors.
first selector Get the first element matching the given selector.
firstOf fn Returns a function that calls the given function and returns only the first result returned by that function. Eg let firstHtml = Qoob.firstOf(Qoob.html) when called like firstHtml('p') with multiple p tags on the page, will only return the HTML contents of the first p tag.
func name Returns a function that takes an object as an argument and returns the value returned by calling the provided function on it.
hasClass selector, class_name Checks whether the given class exists on the element(s) matching the selector. This will still return true if multiple elements are matched and any one of them has the class applied.
head list Alias for strip(...).
hide selector Hide the element(s) matching the selector.
html selector, content = null Gets or sets the html content on the element(s) matching the selector.
is selector, class_name Whether the element(s) matching the selector have the given class applied.
make type, inner_html = null Create a new html element of the specified type and optionally fill it with the given html.
on selector, event, closure Fire a callback on any element(s) matching the selector when the specified event type occurs.
off selector, event, closure Disable an event for a closure on any element(s) matching the selector when called.
parent selector Get an array of parents for the element(s) matching the selector.
prepend selector, child_element Prepend the child element given to the element(s) matching the selector.
prop name Returns a function that takes an object as an argument and returns the given property value on it.
remove selector Remove the element(s) from the DOM.
removeAttr selector, attribute Remove the attribute from the element(s) matching the selector.
removeClass selector, class_name Remove the given class from the element(s) matching the selector.
show selector, preferred_display = 'block' Show the element(s) matching the selector.
siblings selector Get an array of siblings for the element(s) matching the selector.
state selector, attribute Alias for the setter functionality of attr(...) where the attribute will be set to a value equal to its name. Eg state('input', 'disabled') is equivalent to calling attr('input', 'disabled', 'disabled').
strip list Returns the first value in the array provided, otherwise returns null if the array is empty.
text selector, value = null Get or set the text for the element(s) matching the selector.
toggle selector, preferred_display = 'block' Toggle the visibility of the element(s) matching the selector.
toggler selector, fn_on, fn_off When called on selector, it will either call fn_on or fn_off if the state of the element(s) are transitioning to their on or off states respectively. Element(s) start in an off state.
val selector, value = null Get or set the value for the element(s) matching the selector.

License

MIT, see LICENSE.

Copyright (c) 2016 Tristan Strathearn <r3oath@gmail.com>