Home

bigwheel.js

bigwheel.js is a library of JavaScript functions I use over and over again. It's my personal, hand-crafted answer to jQuery, minus all the functions I never use.

Bigwheel helps me manipulate DOM elements, apply CSS and keep track of events.

It exposes itself as an AMD module or can be used any of the old-fashioned ways.

bW() and the Bigwheel object

bW() is a constructor that returns a Bigwheel object with chainable methods. Pass it a selector string, and it'll fetch DOM references to all the matches it finds. Given ...

<section id="books">
  <ul id="mosley">
    <li class="book" id="bluedress">Devil in a Blue Dress</li>
    <li class="book" id="always">Always Outnumbered, Always Outgunned</li>
    <li class="book" id="gone">Gone Fishin'</li>
    <li class="book" id="fearless">Fearless Jones</li>
  </ul>
  <ul id="leonard">
    <li class="book" id="hombre">Hombre</li>
    <li class="book" id="swag">Swag</li>
    <li class="book" id="getshorty">Get Shorty</li>
    <li class="book" id="blues">Tishomingo Blues</li>
  </ul>
</section>

... calling bW('#leonard .book'); will return ...

Bigwheel {
  0: li#hombre.book,
  1: li#swag.book,
  2: li#getshorty.book,
  3: li#blues.book,
  length: 4,
  all: function,
  event_registry: Object,
  css: function
  …
}

Properties

0...n: The numbered properties are live DOM references for each element matched by the selector.

Each of these elements has a bWid property, which stores a unique string of five random alphanumeric characters.

event_registry: Keeps track of which event listeners are bound to which elements.

length: A total of the matched elements.

Methods that return the Bigwheel object

addClass(): Append to an element's classList.

all(): Apply the given function.

attr(): When used as a setter, updates the attributes of matching elements. Can also be used as a getter.

before(): Insert the given element immediately before the matched element(s) in the DOM.

css(): Set CSS properties.

find(): Matches a new set of elements within the scope of the current ones.

first(): Narrows selected elements to the first one in the set.

listenFor(): Bind and register event listeners.

not(): Removes elements from the current selection.

remove(): Detaches selected elements from the DOM.

removeClass(): Truncate an element's classList.

stopListening(): Unbind and unregister event listeners.

wrap(): Convert a DOM reference to a Bigwheel object.

Methods that return the BigwheelForm object

BigwheelForm instances can access all the properties and methods of the Bigwheel object, plus these:

addCollector(): Stores custom functions for gathering form values.

setForm(): An initializer. Makes the selected element a form and assigns it a submit button.

setRequiredFields(): Specifies which fields the form instance can't ignore.

Methods that return a value from a single element

attr(): When used as a getter, returns the value of a single attribute. Can also be used as a setter.

data(): Retrieve or set values in an element's dataset.

val(): Fetch the element's value, or, given a field name, the value of that field.