abquery/README.md

a very lightweight library like JQuery with fewer features and somewhat different

# 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. 

## Prerequisites:
` just a basic javascript knowledge`

# Installation

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"`
##### or
`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")
$("a").$$ // ths will get the actual element 
$("a, #navlink, p") //this queries each of those selectors in one instance
```

### query selectorAll
```
$('*a')
$('* 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
```
$(el)
# usages example
$('*div').on('click',(ev)=>{
        ev // this is a click event
        let e=ev.target // to get the actual element
        $(e).toggleClass("class1,class2,etc").show().attr('id','IDname')
})
```

### 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
        ```

#### classes
```
.addClass(cls)
.rmClass(cls)
.toggleClass(cls)

.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
    ({cls='class-to-show-or-hide',animate='your-animate-class',delay=600,keep=false}={},func_to_run_after)
       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
```
### eventListeners
`.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'

NOTE:
   $("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  
              $("div#main").$('<p>')

find the p tag in the div#main
$("div#main").$('p')

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)
 .debounce 
      $().debounce('mouseover',(e)=>{
        console.log(e.clientX,e.clientY)
      },2000)
 .throttle
      $().throttle('mouseover',(e)=>{
        console.log(e.clientX,e.clientY)
      },2000)
    // 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
    
    NOTE: NOT ALL INPUT TYPES CAN BE SET
    

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

$.form_value(input_element) 
        gets the value whether its .checked,.value, select fields

$.form_data(list_of_inputs)
        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);

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

        returns=>  
        @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}}

$.add_keyframes(name,frames,id=$.styleElementId) 
         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

$.add_style(selector,rules,id=$.styleElementId)
        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)

$.throttle
        $().click($.throttle((e)=>{
                console.log(e)
        },2000))
$.debounce
        $().on('click', $.debounce((e)=>{
                console.log(e)
        },2000))
```
##### 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
```
$("*[data-toggle=modal]").on('click',(e)=>$(`$(e.target).attr("data-target")}`).toggleClass("show"))

```


## You can check the code to see the methods
`src/index.js`

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

#### NOTE:
```
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")
```
!!!ENJOY
### more to come
Like modal time-ago tooltips fetch etc
## issues are most welcomed