The mQuery (or Mini-jQuery) is a most simple and clean way to query HTML elements and bind Event Handlers without jQuery
The objective of mQuery is not replace the jQuery, is provide a simple way to manipule HTML elements and your events with jQuery-like functions without your robust functionalities and with that, make a lightweight library.
npm i @ecromaneli/mqueryJust import mQuery or m$ with require and use like jQuery:
const {m$, mQuery} = require('@ecromaneli/mquery') // DOM Ready, see https://api.jquery.com/ready/ m$(() => { let $elem = m$('tag.class#id[attr="value"]') $elem.find('child').css({ style: 'value' }) })Download script into /dist/web/ folder and import normally:
<script type="text/javascript" src="mquery.min.js"/> <script> // DOM Ready, see https://api.jquery.com/ready/ m$(() => { let $elem = m$('tag.class#id[attr="value"]') $elem.find('child').css({ style: 'value' }) }); </script>All principal jQuery constructors works fine:
// on ready callback m$(handler: Function): mQuery // Array of HTMLElements m$(elemArr: Array<HTMLElement>): mQuery // HTML Element m$(elem: HTMLElement): mQuery // NodeList m$(list: NodeList): mQuery // mQuery instance m$(instance: mQuery): mQueryActually, all functions listed behind, are jQuery compatible. Then, all mQuery code with any functions listed, will works with jQuery.
// http://api.jquery.com/ready/ .ready(handler: Function): this // http://api.jquery.com/each/ .each(iterator: Function): this // http://api.jquery.com/on/ [BASIC IMPLEMENTATION] .on(events: string, selector?: any, handler: Function): this // http://api.jquery.com/off/ [BASIC IMPLEMENTATION] .off(events: string, selector?: Selector, handler: Function): this // http://api.jquery.com/one/ [BASIC IMPLEMENTATION] .one(events: string, selector?: any, handler: Function): this // http://api.jquery.com/trigger/ .trigger(events: string, data?: any): this // http://api.jquery.com/find/ .find(selector: string): mQuery // http://api.jquery.com/is/ .is(filter: Function | string): boolean // http://api.jquery.com/not/ .not(filter: Function | string): mQuery // http://api.jquery.com/has/ .has(selector: string | HTMLElement): mQuery // http://api.jquery.com/filter/ .filter(filter: Function | string): mQuery // http://api.jquery.com/end/ .end(): mQuery // http://api.jquery.com/parent/ .parent(selector?: string): mQuery // http://api.jquery.com/parents/ .parents(selector?: string): mQuery // http://api.jquery.com/css/ .css(prop: string, value?: string): this | string // http://api.jquery.com/css/ .css(propArray: Array<string, string>): this // http://api.jquery.com/attr/ .attr(attr: PlainObject | string, value?: string): this // http://api.jquery.com/removeAttr/ .removeAttr(attrNames: string): this // http://api.jquery.com/prop/ .prop(propName: PlainObject | string, value?: string): this // http://api.jquery.com/removeProp/ .removeProp(propNames: string): this // http://api.jquery.com/html/ .html(htmlText?: string): this | string // http://api.jquery.com/text/ .text(text: string): this | string // http://api.jquery.com/data/ .data(key: PlainObject | string, value?: string): this // http://api.jquery.com/val/ .val(value?: string): this | string // http://api.jquery.com/remove/ .remove(selector?: string): mQuery // http://api.jquery.com/empty/ .empty(): this // http://api.jquery.com/map/ .map(beforePush: Function): Array // http://api.jquery.com/children/ .children(selector?: string): mQuery // http://api.jquery.com/simblings/ .simblings(selector?: string): mQuery // http://api.jquery.com/prev/ .prev(selector?: string): mQuery // http://api.jquery.com/next/ .next(selector?: string): mQuery // http://api.jquery.com/addclass/ .addClass(class: string): this // http://api.jquery.com/removeclass/ .removeClass(class: string): this // http://api.jquery.com/toggleclass/ .toggleClass(class: string): this // http://api.jquery.com/prepend/ .prepend(...elem: mQuery | NodeList | HTMLElement): this // http://api.jquery.com/append/ .append(...elem: mQuery | NodeList | HTMLElement): this // http://api.jquery.com/width/ .width(value?: string | number): this | number // http://api.jquery.com/height/ .height(value?: string | number): this | number // http://api.jquery.com/load/ .load(url: string, data?: Object | string, complete?: Function): this | number // http://api.jquery.com/jQuery.ajax/ m$.ajax(url?: string, settings: AJAXSettings): Deferred // http://api.jquery.com/jQuery.get/ m$.get(url: string, data?: any, success: AJAXSuccess): Deferred m$.get(settings: AJAXSettings): Deferred // http://api.jquery.com/jQuery.post/ m$.post(url: string, data: any, success: AJAXSuccess): Deferred m$.post(settings: AJAXSettings): Deferred // http://api.jquery.com/jQuery.Deferred/ m$.Deferred(beforeStart?: Function): Deferred // To use shorthand event methods, declare it using: m$.shorthands(events: string[]) // Example: m$.shorthands(['click', 'mouseenter', 'focus']) // http://api.jquery.com/jQuery.isArrayLike/ m$.isArrayLike(obj): boolean // http://api.jquery.com/jQuery.isEmptyObject/ m$.isEmptyObject(obj: any): boolean // http://api.jquery.com/jQuery.globalEval/ m$.globalEval(code: string): void // http://api.jquery.com/jQuery.parseHTML/ m$.parseHTML(htmlString: string): NodeList // http://api.jquery.com/jQuery.param/ m$.param(obj: ArrayLikeObject, tradicional = false): string // http://api.jquery.com/jQuery.merge/ m$.merge(first: ArrayLike, second: ArrayLike): ArrayLike // http://api.jquery.com/jQuery.makeArray/ m$.makeArray(obj: ArrayLike): Array // http://api.jquery.com/jQuery.proxy/ m$.proxy(target: Function, context: any): Function // http://api.jquery.com/jQuery.each/ m$.each(arr: ArrayLikeObject, it: ForEachIterator): ArrayLikeObject // http://api.jquery.com/jQuery.grep/ m$.grep(arr: ArrayLike, filter: (value, index) => boolean, invert = false): ArrayLike // http://api.jquery.com/jQuery.map/ m$.map(arr: ArrayLikeObject, beforePush: (value, index) => any): Array // http://api.jquery.com/jQuery.type/ m$.type(obj: any): string // Transforms object into string and string into object m$.json(objOrText: Object | string, ignoreErr: boolean, forceStringify?: boolean): Object | string // Get and set cookies by key m$.cookie(key: string, value?: any, options: {timeout: seconds, path: string}): any- Created and maintained by Emerson C. Romaneli (@ECRomaneli).
mQuery: MIT License
jQuery: License Page