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.
or
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
:
moduleexports = 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.
= document = = document = Array
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.
// regularevent'.elements' 'click' {} // multiple eventsevent'.elements' 'click touchstart' {} // live eventeventdocument 'click' '.element' {} // EventListenerOptionsevent'.element' 'click' {} once: true passive: true capture: true // remove all listeners (just call returned function)const removeEvents = event'.elements' 'click' {}
index
Returns the index of an element among it's siblings.
// regular // query string // non-zerobased index (+ 1)
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*/ // jQuerydocument // native...document // for array functions // no$ /*selecting first element*/ // jQuerydocument // native // no$ /*selecting parent elements*/$element // jQueryelement // native (polyfilled) /*selecting child elements */$element // jQueryelement // nativeelement // no$ /*selecting next/previous sibling */$elementnext // jQuery$elementelementnextElementSibling // nativeelementpreviousElementSibling /*extracting element index */$elementindex // jQuery...elementparentElementchildren // native // no$ /*extracting CSS styles*/$element // jQuerywindowmarginTop // nativeelementattributeStyleMap // native houdini (faster)element /*setting CSS styles*/$element // jQueryelementstylemarginTop = '30px' // nativeelementattributeStyleMap // native houdini (faster) /*extracting data attributes*/$elementdata'id' // jQueryelementdatasetid // native /*checking if element has attribute*/$element // jQueryelement // native (polyfilled) /*looping through elements*/ // jQuerydocument // native & faster // no$ /*listening for events on multiple elements*/ // jQuerydocument // nativeevent'.elements' 'click' elchecked = true // no$ /*triggering an event */$element //jQueryelement // native clickelement // native other events (needs 'custom-event-polyfill') /*adding a css class to multiple elements*/ // jQuerydocument // native // no$