blingjs

A lightweight and lazer-focused DOM manipulation library for building modern web apps.

With blingJS, this:

const container = document.querySelector('.container')
const articles = container.querySelectorAll('.article')
const makeBtn = () => {
  const btn = document.createElement('button')
  btn.className = 'btn'
  return btn
}
 
articles.forEach(article => {
  const btn = makeBtn()
  btn.addEventListener('click', () => {
    ///doSomething
  })
  article.appendChild(btn)
})

becomes:

import $ from 'blingjs'
 
const container = $('.container')
 
$('.article', container).each(article => {
  $('<button class="btn" />').appendTo(article).on('click', () => {
    ///doSomething
  })
})

Usage

npm i --save-dev blingjs

or:

yarn add blingjs

Release History

• 0.0.2
  • Updated README with docs

API (WIP)

$

Core module

• $
  • module.exports ⏏
  • new module.exports(selector, [context])
  • instance
    • .get(index) ⇒ Element
    • .first() ⇒ Element
    • .last() ⇒ Element
    • .appendTo(element)
    • .data(key, [value])
    • .addClass(...names)

module.exports ⏏

Kind: Exported class

new module.exports(selector, [context])

The blingJS Constructor - new keyword not necessary!

Param	Type	Default	Description
selector	HTMLElement | string		The selector(s), element(s), or HTML string to convert to a blingJS collection.
[context]	HTMLElement | string	document	Limit the selector param to this context.

Example

// Using an HTMLElement
$(document.body)
 
// CSS Selectors
$('.nav-main')
$('#header')
 
// With context
const header = $('header')
$('.nav-main', header)
 
// HTML string
$('<div id="nav-main" />')

$.get(index) ⇒ Element

Returns the element at the specified index in the collection.

Kind: instance method of $
Returns: Element - The original HTMLElement

Param	Type	Description
index	number	The index of the element

$.first() ⇒ Element

Returns the first element in the collection.

Kind: instance method of $
Returns: Element - The original HTMLElement

$.last() ⇒ Element

Returns the last element in the collection.

Kind: instance method of $
Returns: Element - The original HTMLElement

$.appendTo(element)

Appends the collection to the supplied element.

Kind: instance method of $

Param	Type	Description
element	Element	The element to append this collection to.

$.data(key, [value])

Gets or sets a data object to the collection.

Kind: instance method of $

Param	Type	Description
key	string	The object key or name attribute. Don't prepend the data keyword!
[value]	*	If supplied, will return the value saved previously with the given key

$.addClass(...names)

Adds a single or list of CSS class names to the collection

Kind: instance method of $

Param
...names

---

Meta

Jeff Miller – @jamiller619 – [e-mail]

Distributed under the MIT license. See LICENSE for more information.

https://github.com/jamiller619