Lightweight JavaScript library for handling HTML

Just add the script into your HTML

<script src="/path_to_script/qx.min.js"></script>

npm install @surfy/qx

import '@surfy/qx';

$(selector) - Like JQuery. Using querySelectorAll documentation

Return True if it is a Touch Device or False if not.

$.isTouch();

Return True if the Client uses Dark Mode or False if not

$.isDark();

Return {passive:false} if Passive is available or False if not

$.isPassive();

Add Event Listeners to elements.

$(selector).on(eventNames,functionName);

Remove Event Listeners from elements.

$(selector).off(eventNames,functionName);

Adding Click Or Tap Listener to elements depending on TouchScreen Device Detected.

$(selector).click(functionName);

Adding the class name or list of class names to the element.

$(selector).addClass('className1 className2');

Remove the class name or list of class names from elements classList.

$(selector).removeClass('className1 className2');

Checking elements for class name available. Returning array of values if it needed.

$(selector).hasClass(className);

Set css to elements.

$(selector).css({prop:value});

Get Attribute value of elements

$(selector).getAttr(attributeName);

Set Attribute to elements

$(selector).setAttr(attributeName,value);

Remove Attribute from elements

$(selector).removeAttr(attributeName);

Add a behavior that switches the class "hover" when you hover the mouse or tap on the element.

$(selector).hover();

Removes an element from the DOM

$(selector).remove();

Replace element with new HTML

$(selector).replace(HTML);

Append HTML before End Of Elements

$(selector).append(HTML);

Insert HTML before the Beging Of Elements

$(selector).prepend(HTML);

Insert HTML after the End Of Elements

$(selector).after(HTML);

Get or Set value of inputs. Return typed values, e.g. (string) "1.23" becomes (float) 1.23, "true" > true and "false" > false

$(selector).val(newValue); // Set value
$(selector).val(); // Get value

Hide elements. Set display to "none".

$(selector).hide();

Show elements. Set display to "block".

$(selector).show();

Get or Set plain text of elements

$(selector).text(newText); // Set text
$(selector).text(); // Get text

Get or Set HTML of elements

$(selector).html(newHtml); // Set HTML inner elements
$(selector).html(); // Get Outer HTML

Fade-in element using the transparency.

$(selector).fadeIn(duration=600,callback=false);

Fade-out element using the transparency.

$(selector).fadeOut(duration=600,callback=false);

Get or Set Width of elements

$(selector).width(value=false);

Get or Set Height of elements

$(selector).height(value=false);

Executing function for each of elements

$(selector).each(functionName);

Slide Up Elements and fade-out

$(selector).slideUp(duration=500, callback=false);

Slide Down Elements and fade-in

$(selector).slideDown(duration=500, callback=false);

Return the size and position of elements

$(selector).getBounds();

Return the list of parent elements

$(selector).parent();

Return the list of elements width

$(selector).textWidth();

Return Offset Top Of Elements

$(selector).top();

Find elements inside the list of selected elements

$(selector).find(selector);

Set focus at the first element of the list

$(selector).focus();

Return deep copies of elements

$(selector).copy();

Get and Set dataset properties

// Set
$(selector).dataset = {var1: 1, var2: 2};

// Get
$(selector).dataset.var1;

// Delete
delete $(selector).dataset.var1;

Alexander Yermolenko • surfy.one