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:
<scripttype="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 callbackm$(handler: Function): mQuery// Array of HTMLElementsm$(elemArr: Array<HTMLElement>): mQuery// HTML Elementm$(elem: HTMLElement): mQuery// NodeListm$(list: NodeList): mQuery// mQuery instancem$(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): Deferredm$.get(settings: AJAXSettings): Deferred// http://api.jquery.com/jQuery.post/m$.post(url: string,data: any,success: AJAXSuccess): Deferredm$.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 objectm$.json(objOrText: Object|string,ignoreErr: boolean,forceStringify?: boolean): Object|string// Get and set cookies by keym$.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