no$

Tiny ES6 library to simplify a few tasks usually done with jQuery

Many features of jQuery have become obsolete with new native functions like the document.querySelector.

no$ tries to close the gap, using only 2.1kB of data (jQuery has 30kB). Browser compatibility is tested from IE11 upwards.

Usage

no$ is meant to be used as an ES6 (webpack) module.

import 'nodollar' // only polyfills

or

import $$ from 'nodollar' // import $$ as document.querySelectorAll
import { qsa, qsArray, qs, event, index } from 'nodollar' // import alias and helper functions
import $$, * as no$ from 'nodollar' // import $$ and prefixed functions

ES5

Be sure to specifically include 'nodollar' in the packages babel transpiles, since no precompiled binary is included.

Vue CLI

To make sure Vue CLI transpiles nodollar, add the following to vue.config.js:

module.exports = {
    transpileDependencies: ['nodollar']
}

Alias

A benefit of jQuery is it's short selector syntax. no$ provides an importable alias for the same benefit. qsa is also the default export.

qs('.element') = document.querySelector('.element')
qsa('.elements') = $$('.elements') = document.querySelectorAll('.elements')
qsArray('.elements') = Array.from(document.querySelectorAll('.elements'))

Functions

event

Initializes an event listener that applies to all elements and handles multiple & live events.

The first callback argument is the event.target to reduce final code size and fix the live target.

// regular
event('.elements', 'click', (el, e) => {})

// multiple events
event('.elements', 'click touchstart', (el, e) => {})

// live event
event(document, 'click', '.element', (el, e) => {})

// EventListenerOptions
event('.element', 'click', (el, e) => {}, {
    once: true,
    passive: true,
    capture: true
})

// remove all listeners (just call returned function)
const removeEvents = event('.elements', 'click', (el, e) => {})
removeEvents()

index

Returns the index of an element among it's siblings.

// regular
index(element)

// query string
index('.element')

// non-zerobased index (+ 1)
index(element, false)

automatic polyfills

yola/classlist-polyfill

adds full IE support for classList

element.closest / element.matches

adds general support for element.closest and element.matches

syuji-higa/event-listener-options-polyfill

adds IE/Edge support for EventListenerOptions

NodeList.forEach

adds general support for querySelectorAll().forEach

jQuery vs. native vs. no$

Here are some typical use cases of jQuery, with the native counterpart. The examples also show how no$ can make your life a little easier.

/*
selecting all elements
*/
$('.elements') // jQuery
document.querySelectorAll('.elements') // native
[...document.querySelectorAll('.elements')] // for array functions
qsa('.elements') // no$
$$('.elements')

/*
selecting first element
*/
$('.elements').first() // jQuery
document.querySelector('.elements') // native
qs('.elements') // no$

/*
selecting parent elements
*/
$element.parents('.parent') // jQuery
element.closest('.parent') // native (polyfilled)

/*
selecting child elements
 */
$element.find('.child') // jQuery
element.querySelectorAll('.child') // native
element.qsa('.child') // no$

/*
selecting next/previous sibling
 */
$element.next() // jQuery
$element.prev()
element.nextElementSibling // native
element.previousElementSibling

/*
extracting element index
 */
$element.index() // jQuery
[...element.parentElement.children].indexOf(element) // native
index(element) // no$

/*
extracting CSS styles
*/
$element.css('margin-top') // jQuery
window.getComputedStyle(element).marginTop // native
element.attributeStyleMap.get('margin-top') // native houdini (faster)
element.computedStyleMap().get('margin-top')

/*
setting CSS styles
*/
$element.css('margin-top', '30px') // jQuery
element.style.marginTop = '30px' // native
element.attributeStyleMap.set('margin-top', CSS.px(30)) // native houdini (faster)

/*
extracting data attributes
*/
$element.data('id') // jQuery
element.dataset.id // native

/*
checking if element has attribute
*/
$element.is('[data-active]') // jQuery
element.matches('[data-active]') // native (polyfilled)

/*
looping through elements
*/
$('.elements').each(function() { $(this).prop('checked', true) }) // jQuery
document.querySelectorAll('.elements').forEach(el => el.checked = true) // native & faster
qsa('.elements').forEach(el => el.checked = true) // no$

/*
listening for events on multiple elements
*/
$('.elements').on('click', function() { $(this).prop('checked', true) }) // jQuery
document.querySelector('.elements').forEach(element => element.addEventListener('click', e => e.target.checked = true)) // native
event('.elements', 'click', el => el.checked = true) // no$

/*
triggering an event
 */
$element.trigger('click') //jQuery
element.click() // native click
element.dispatchEvent(new CustomEvent('click')) // native other events (needs 'custom-event-polyfill')

/*
adding a css class to multiple elements
*/
$('.elements').addClass('active') // jQuery
document.querySelectorAll('.elements').forEach(el => el.classList.add('active')) // native
qsa('.elements').forEach(el => el.classList.add('active')) // no$