mQuery

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

     

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

1    npm i @ecromaneli/mquery

How to use

Module

Just import mQuery or m$ with require and use like jQuery:

1    const {m$, mQuery} = require('@ecromaneli/mquery')
2
3    // DOM Ready, see https://api.jquery.com/ready/
4    m$(() => { 
5        let $elem = m$('tag.class#id[attr="value"]')
6        $elem.find('child').css({ style: 'value'  })
7    })

Web

Download script into /dist/web/ folder and import normally:

1    <script type="text/javascript" src="mquery.min.js"/>
2
3    <script>
4        // DOM Ready, see https://api.jquery.com/ready/
5        m$(() => { 
6            let $elem = m$('tag.class#id[attr="value"]')
7            $elem.find('child').css({ style: 'value'  })
8        });
9    </script>

Constructors

All principal jQuery constructors works fine:

1    // on ready callback
2    m$(handler: Function): mQuery
3
4    // Array of HTMLElements
5    m$(elemArr: Array<HTMLElement>): mQuery
6
7    // HTML Element
8    m$(elem: HTMLElement): mQuery
9
10    // NodeList
11    m$(list: NodeList): mQuery
12
13    // mQuery instance
14    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

1    // http://api.jquery.com/ready/
2    .ready(handler: Function): this
3
4    // http://api.jquery.com/each/
5    .each(iterator: Function): this
6
7    // http://api.jquery.com/on/ [BASIC IMPLEMENTATION]
8    .on(events: string, selector?: any, handler: Function): this
9
10    // http://api.jquery.com/off/ [BASIC IMPLEMENTATION]
11    .off(events: string, selector?: Selector, handler: Function): this
12
13    // http://api.jquery.com/one/ [BASIC IMPLEMENTATION]
14    .one(events: string, selector?: any, handler: Function): this
15
16    // http://api.jquery.com/trigger/
17    .trigger(events: string, data?: any): this
18
19    // http://api.jquery.com/find/
20    .find(selector: string): mQuery
21
22    // http://api.jquery.com/is/
23    .is(filter: Function | string): boolean
24
25    // http://api.jquery.com/not/
26    .not(filter: Function | string): mQuery
27
28    // http://api.jquery.com/has/
29    .has(selector: string | HTMLElement): mQuery
30
31    // http://api.jquery.com/filter/
32    .filter(filter: Function | string): mQuery
33
34    // http://api.jquery.com/end/
35    .end(): mQuery
36
37    // http://api.jquery.com/parent/
38    .parent(selector?: string): mQuery
39
40    // http://api.jquery.com/parents/
41    .parents(selector?: string): mQuery
42
43    // http://api.jquery.com/css/
44    .css(prop: string, value?: string): this | string
45
46    // http://api.jquery.com/css/
47    .css(propArray: Array<string, string>): this
48
49    // http://api.jquery.com/attr/
50    .attr(attr: PlainObject | string, value?: string): this
51
52    // http://api.jquery.com/removeAttr/
53    .removeAttr(attrNames: string): this
54
55    // http://api.jquery.com/prop/
56    .prop(propName: PlainObject | string, value?: string): this
57
58    // http://api.jquery.com/removeProp/
59    .removeProp(propNames: string): this
60
61    // http://api.jquery.com/html/
62    .html(htmlText?: string): this | string
63
64    // http://api.jquery.com/text/
65    .text(text: string): this | string
66
67    // http://api.jquery.com/data/
68    .data(key: PlainObject | string, value?: string): this
69
70    // http://api.jquery.com/val/
71    .val(value?: string): this | string
72
73    // http://api.jquery.com/remove/
74    .remove(selector?: string): mQuery
75
76    // http://api.jquery.com/empty/
77    .empty(): this
78
79    // http://api.jquery.com/map/
80    .map(beforePush: Function): Array
81
82    // http://api.jquery.com/children/
83    .children(selector?: string): mQuery
84
85    // http://api.jquery.com/simblings/
86    .simblings(selector?: string): mQuery
87
88    // http://api.jquery.com/prev/
89    .prev(selector?: string): mQuery
90
91    // http://api.jquery.com/next/
92    .next(selector?: string): mQuery
93
94    // http://api.jquery.com/addclass/
95    .addClass(class: string): this
96
97    // http://api.jquery.com/removeclass/
98    .removeClass(class: string): this
99
100    // http://api.jquery.com/toggleclass/
101    .toggleClass(class: string): this
102
103    // http://api.jquery.com/prepend/
104    .prepend(...elem: mQuery | NodeList | HTMLElement): this
105
106    // http://api.jquery.com/append/
107    .append(...elem: mQuery | NodeList | HTMLElement): this
108
109    // http://api.jquery.com/width/
110    .width(value?: string | number): this | number
111
112    // http://api.jquery.com/height/
113    .height(value?: string | number): this | number
114
115    // http://api.jquery.com/load/
116    .load(url: string, data?: Object | string, complete?: Function): this | number

AJAX

1    // http://api.jquery.com/jQuery.ajax/
2    m$.ajax(url?: string, settings: AJAXSettings): Deferred
3
4    // http://api.jquery.com/jQuery.get/
5    m$.get(url: string, data?: any, success: AJAXSuccess): Deferred
6    m$.get(settings: AJAXSettings): Deferred
7
8    // http://api.jquery.com/jQuery.post/
9    m$.post(url: string, data: any, success: AJAXSuccess): Deferred
10    m$.post(settings: AJAXSettings): Deferred

Promise

1    // http://api.jquery.com/jQuery.Deferred/
2    m$.Deferred(beforeStart?: Function): Deferred

Shorthand Methods

1    // To use shorthand event methods, declare it using:
2    m$.shorthands(events: string[])
3
4    // Example:
5    m$.shorthands(['click', 'mouseenter', 'focus'])

Utils

1    // http://api.jquery.com/jQuery.isArrayLike/
2    m$.isArrayLike(obj): boolean
3
4    // http://api.jquery.com/jQuery.isEmptyObject/
5    m$.isEmptyObject(obj: any): boolean
6
7    // http://api.jquery.com/jQuery.globalEval/
8    m$.globalEval(code: string): void
9
10    // http://api.jquery.com/jQuery.parseHTML/
11    m$.parseHTML(htmlString: string): NodeList
12
13    // http://api.jquery.com/jQuery.param/
14    m$.param(obj: ArrayLikeObject, tradicional = false): string
15
16    // http://api.jquery.com/jQuery.merge/
17    m$.merge(first: ArrayLike, second: ArrayLike): ArrayLike
18
19    // http://api.jquery.com/jQuery.makeArray/
20    m$.makeArray(obj: ArrayLike): Array
21
22    // http://api.jquery.com/jQuery.proxy/
23    m$.proxy(target: Function, context: any): Function
24
25    // http://api.jquery.com/jQuery.each/
26    m$.each(arr: ArrayLikeObject, it: ForEachIterator): ArrayLikeObject
27
28    // http://api.jquery.com/jQuery.grep/
29    m$.grep(arr: ArrayLike, filter: (value, index) => boolean, invert = false): ArrayLike
30
31    // http://api.jquery.com/jQuery.map/
32    m$.map(arr: ArrayLikeObject, beforePush: (value, index) => any): Array
33
34    // http://api.jquery.com/jQuery.type/
35    m$.type(obj: any): string
36

Exclusive Utils

1    // Transforms object into string and string into object
2    m$.json(objOrText: Object | string, ignoreErr: boolean, forceStringify?: boolean): Object | string
3
4    // Get and set cookies by key
5    m$.cookie(key: string, value?: any, options: {timeout: seconds, path: string}): any

Author

• Created and maintained by Emerson C. Romaneli (@ECRomaneli).

License

mQuery: MIT License

jQuery: License Page