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,
  selector: "#leonard .book",
  all: function,
  event_registry: Object,
  css: function
  …
}

Bigwheel properties

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

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

length: A total of the matched elements.

Bigwheel methods

These operate on each of the matched elements. They all return the Bigwheel object itself.

all(): Apply the given function.

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

css(): Set CSS properties.

listenFor(): Bind and register event listeners.

stopListening(): Unbind and unregister event listeners.