The mQuery (or Mini-jQuery) is a most simple and clean way to query HTML elements and bind Event Handlers without jQuery.


003.0.03 years ago4 years agoMinified + gzip package size for @ecromaneli/mquery in KB



The mQuery (or Mini-jQuery) is a most simple and clean way to query HTML elements and bind Event Handlers without jQuery

module version  GitHub license  CircleCI  contributions welcome


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/mquery

How to use


Just 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"/>

        // DOM Ready, see https://api.jquery.com/ready/
        m$(() => { 
            let $elem = m$('tag.class#id[attr="value"]')
            $elem.find('child').css({ style: 'value'  })


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): mQuery


Actually, 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

Shorthand Methods

    // 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

Exclusive Utils

    // 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



mQuery: MIT License

jQuery: License Page

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.