Docs

Everything You Need to Know

DOM

Intro

ChocolateChip-UI has its own DOM selector engine which provides identical functionality to jQuery. ChocolateChip-UI's DOM engine is quite a bit smaller than jQuery's. This is because it is targetting modern browsers.

Stack

ChocolateChip-UI uses a special object to hold and manipulate DOM nodes: Stack. Whenever you use $(selector) to get an element, you're actually getting a DOM Stack object. This holds the results of the query in an array and exposes a number of operations you can perform on the node/nodes. The following are DOM functions.

  • $(selector)
  • element.find(selector)
  • element.is(selector)
  • element.index(element?)
  • element.siblings(selector?)
  • element.closest(selector)
  • element.css(property)
  • element.css(property, value)
  • element.before(content)
  • element.after(content)
  • element.prepend(content)
  • element.append(content)
  • element.empty()
  • element.html(content)
  • element.html()
  • element.text(content)
  • element.text()
  • element.remove()
  • element.replaceWith()
  • element.val(value)
  • element.val()
  • element.hide()
  • element.show()
  • element.on(event, callback, type)
  • element.on(event, element, callback, type)
  • element.off(event, callback, type)
  • element.off(event, element, callback, type)
  • element.trigger(event)
  • element.serializeArray()
  • element.serialize()
  • element.eq(index)
  • element.push(element)
  • element.pop()
  • element.unshift(element)
  • element.shift()
  • element.slice()
  • element.splice()
  • element.filter(callback)
  • element.map(callback)
  • element.every(callback)
  • element.some(callback)
  • element.unique()

Besides these DOM functions, there are two extra methods related to creating nodes that ChocolateChip-UI offers:

  • html`template literal`: returns a template literal
  • $.h(markup): converts markup into a document fragment

There are also two ways to run code when the DOM is ready. The traditional jQuery way, and one specific to ChocolateChip-UI. Use whichever you like.

  • $(function)
  • app(function)

For more useful functions, check out the documentation for utilities.