$()
QueryResult, rethinking the
In a nutshell
This model is a modern, minimal, 60LOC (esm) based version of a jQuery(ish) utility.
Features:
$(readyFunction)
to run code when document is ready$(CSS, optionalParent)
to return a collection of elements$(document || window)
to use methods with these globals$(anyArrayLike)
to transform a collection into aQueryResult
instanceany instanceof $
to know if an object implements allQueryResult
methods$.extend(name, function () { ... })
to pollute theQueryResult
prototype$(...).on(type, handler, options)
to add listeners to all entries$(...).off(type, handler, options)
to remove listeners from all entries$(...).dispatch(type, initDictionary)
to dispatch aCustomEvent
to all entries
Everything else can be added via $.extend(methodName, function () {})
,
remembering that arrow functions aren't a good idea if you need a context too.
// ready equivalent $(ready);
:first
If a string contains the pseudo selector :first
at its end,
the result will stop at the very first encountered match.
This is the only non-standard pseudo-selector implemented.
// will return only first matched p// and the first matched span
This is especially handy in term of performance since
the browser will actually stop searching instead of analyzing
the entire document (using querySelector
instead of querySelectorAll
).
Examples
// add a listener; // dispatch an event; // using Array methodsvar newCollection = ; // extending via method$; // extending via descriptor$;
Compatibility
You can verify by yourself through this page but it should work down to very old browsers.
How to include
import $ from 'query-result'
for ESM (query-result/esm/index.js
explicitly)const $ = require('query-result/cjs')
for CJS<script src="min.js"></script>
for browsers as global$