Skip to content
This repository has been archived by the owner on Jun 21, 2024. It is now read-only.
/ mQuery Public archive

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

License

Notifications You must be signed in to change notification settings

ECRomaneli/mQuery

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

95 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published