0.3.4 • Public • Published

abQuery v 0.3.4

Re-designing JQuery : If you are like me, you hate large js libraries

this is minimal library similar to Jquery in some ways with somewhat fewer features but amazing

It was a personal mini project to help me code js faster. If interested you can try it.


just a basic javascript knowledge


To get started quickly try the CDN instead:

compiled with babel for browser compatibility [https://cdn.jsdelivr.net/npm/abquery@0.3.4/dist/index.min.js]

or may only be compatible for modern browsers. [https://cdn.jsdelivr.net/npm/abquery@0.3.4/dist/mb.index.min.js]

getting started using npm:

npm i abquery --save

import $ from "abquery"


const $ = require("abquery")

NOTE: for some hide and show animation features you have to run this:

$.init_style_defaults() this is only for npm, for the cdn no need

usage and api

$ is the main object :: Library

$('query') is similar to document.querySelector but with the $ instance
$('*query') is similar to document.querySelectorAll but with the $ instance
$.new(tagname) or $('<tagname>') it's used to create a html element with the $ instance
$(el) useful when you want an element to have an $ instance as it has useful methods

the arg (el) can be a NodeList or an element or even a list/array of elements

query selector

$("a").$$ // ths will get the actual element 
$("a, #navlink, p") //this queries each of those selectors in one instance

query selectorAll

$('* a, .nav-link') // select all _a_ tags and .nav-link in one instance

create new element

$.new('a') or $("<a>")
$.new('a',num=1) default
eg: create 10 anchor tags and append it to a div
let div=$('div')
let anchors=$('<a>',10)
anchors.appendParent(div.$$) || div.append(anchors.$$)

existing elements

# usages example
        ev // this is a click event
        let e=ev.target // to get the actual element

Getting actual elements

use .$$ to get the actual element or nodeList(for selectorAll)

use .arr[index] to get an element an a particular index eg: $('*div').arr[0] //first element $('*div').arr[10] //element at index 10

getting new single instances of $ from a query

use [index] to get element as an instance of $ at a particular index eg: $('*div')[0] //first element as an instance $('*div')[10] //element at index 10 as an instance



.class //this will get the className of all the anchors
.class="btn-link d-none" //this will set the className of all the anchors

.hasClass(cls,{someClass: false, someEl: false}) # default
        eg: .hasClass('d-none') // checking a single class
            .hasClass("class1, class1",{someClass=false,someEl=false})
                someEl will be useful if you queried many elements in an instance of $
                 if false returns true only if all the elements have the class
                 else returns true if atleast an element has the class
                someClass is a similar logic like someEl

here are some cool methods and properties

getting or setting properties or attributes

.prop //to get or set any property 
.attr //to get or set any attributes. 

 to GET multiple pass in a list of attrs eg: .attr('attr1,attr2,etc') || .prop('prop1,prop2,etc')
 to SET multiple attrs pass in an object eg: .attr({id:'man',etc}) || prop({width:'56px',etc})
 .attr('id')//to GET a single =>SAME for prop
 .attr('id','hmm')//to SET id to hmm : setting single =>SAME for prop
 .rmAttr('id') // to remove/del an attr
attrs functions similar to props but different

attr('id') and .prop('id') gives the same result but .attr('style') returns the style string and .prop('style') returns the style object

NB: this has notthing to do with this mini library, thant's how js works

hiding and showing elements

.hide() .show() // it does just that
  it can accept params
       delay is the delay time
       keep if true the animate class will be kept else it will be remove after
.toggleDisplay() // it does just that


.on('click', func) //single listener

.on("mouseover, mouseout, click", func) // multiple listeners

You can also write it like this: .on(['mouseover','mouseout','click'], func)

dealing with styles

.css('width')//to get the width
.css('width','100%') // to set the width to 100%
.css('width','100%',true) //to set it as important
.css("margin-top,height,display") //to get those values
.css({width:"100%",display:"flex !important"})// to set it

to add a new element or new query to a query or any instance of $

.$(query) similar to .find in jQuery but you have to prepend '*' for selectorAll and .$new of an instance of $

$("div#main").$new('p').text='this a new paragraph'

   $("div#main").$.new('p') will not work
        because $.new is a static method so it 
        be called on an instance of $
        so use in case of an instance of $:
           eg:$("div#main").$new('p') or  

find the p tag in the div#main

find all the p tag in the div#main
$("div#main").$("*p") // to querySelcetorAll p tags in the div

$() will query the document as an instance

().$$ equals to document

some methods

 .run //this will run a func for all or the element queried
        eg: .run(func) || .run(e=>{})
 .$run //this will run a func for all or the element queried against a variable or array
        eg: .$run(func,arr) || $run((e,var||array_item)=>{},var||array)

 .append // to append a child node/element

 .appendParent // to append to a parent node/element

 .detach // to detach or remove a child node/element

 .detachParent // to detach self from a parent node/element
 .on(event,func) similar to .addEventListener(event,func)
    // if you don't debounce and throttle
    // you may ask Google
    // it's very useful

some properties getters and setters

 .len // to get the length of the query

 .index // to get the index of an element or instance of $ in a query 
 useful for query selectorAll

 .html //to get or set the innerHTML

 .text //to get or set the textContent

 .val //to get or set form inputs or textarea or files or checkboxes or radios etc
    //you do not need to think whether it is .value or .checked or .files etc. it will do the job for you

 .children // to get children nodes
 .parent // to get an element/node's parent

 .parents // similar to .parent but usefull querySelectorAll/$(*q)

### other getters and setters

["title", "lang", "translate", "dir", "hidden", "accessKey", "draggable", "spellcheck", "autocapitalize", "contentEditable", "isContentEditable", "inputMode", "offsetParent", "offsetTop", "offsetLeft", "offsetWidth", "offsetHeight", "innerText", "outerText", "dataset", "nonce", "autofocus", "tabIndex", "attachInternals", "enterKeyHint"]

some useful static methods

$.new(tagname) // to create a new element 
$.id(id) // similar to document.getElementById(id)
        $.id('id1,id2,etc') or $.id('id1')
$.cls(cn) // similar to document.getElementsByClassName(cn)
        $.cls('cn1,cn2,etc') or $.cls('cn1')
$.attrs('attr' or 'attr=value') it can be used to get all element by that attr or "attr=value"
        similar to document.querySelectorAll("[attr or attr=value]")
        $.attrs('attr=val,attr2=val,etc') or $.attrs('attr=val')

        gets the value whether its .checked,.value, select fields

        similar to above but returns an object

$.css_prefix('css style')
        eg: $.css_prefix("transform: scale(.8)")

            returns=> transform: scale(.8);-webkit-transform: scale(.8);-moz-transform: scale(.8);

        it will generate keyframes
        eg: $.gen_frames('animatekf',`0% {${$.css_prefix('transform: scale(1)')}opacity: 1;} 100%{opacity: 0}`)

        @keyframes animatekf {0% {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);opacity: 1;} 100%{opacity: 0}}
        @-webkit-keyframes animatekf {0% {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);opacity: 1;} 100%{opacity: 0}}

         does just the above but adds it to the dom
         if the style element id specified does not exist
         it will create it instead
         and later append the keyframes

        it is used to create a css style
        eg: to create a new class
            $.add_style('.classname','margin-top:50px;padding:20px 12px;')
            Now you can use that class in your elements
$.ready(func) to run the functin on DOMContentLoaded
$.on(event,func,el=document) similar to el.addEventListener(event,func)

        $().on('click', $.debounce((e)=>{
some examples

Get a form data without hussle

$("form").$("* input, select, textarea").val //this will return an object which can directly be sent to the server

 NOTE: the inputs should have a name or id attrs SET eg: input type file, can only be set/added by a user interraction

hide and show modals eg: let say there are elements/anchors with a data-toggle="modal" and a data-target property that is equal to a query to toggle like how bootstrap declares its modals


You can check the code to see the methods


The compiled version dist/index.js and dist/index.min.js or only minified version dist/mb.index.min.js


multiple selectors eg:- $("#nav, a, etc") can ONLY be strings separated by commas.

BUT methods maybe list/array of strings OR strings separated by commas 
        eg:- .addClass(['hide','nav-link', etc]) or .addClass("hide, nav-link, etc")
        either is fine
Also spaces doesn't matter
Eg:- .addClass("show  ,      nav")


more to come

Like modal time-ago tooltips fetch etc

issues are most welcomed


Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.3.4
    • latest

Version History

Package Sidebar


npm i abquery

Weekly Downloads






Unpacked Size

79 kB

Total Files


Last publish


  • anyass