@ecromaneli/mquery

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

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Aug 17, 2019Apr 19, 2018Minified + gzip package size for @ecromaneli/mquery in KB

Readme

mQuery

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

Objective

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.

Install

    npm i @ecromaneli/mquery

How to use

Module

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'  })
    })

Web

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>

Constructors

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

Functions

Actually, all functions listed behind, are jQuery compatible. Then, all mQuery code with any functions listed, will works with jQuery.

Stable

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

AJAX

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

Promise

    // 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'])

Utils

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

Author

License

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.