QX

Lightweight JavaScript library for handling HTML

Initialization

Just add the script into your HTML

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

Or install via npm

npm install @surfy/qx

ES6

import '@surfy/qx';

Using

$(selector) - Like JQuery. Using querySelectorAll documentation

Methods

UI

$.isTouch()

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

$.isTouch();

$.isDark()

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

$.isDark();

$.isPassive()

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

$.isPassive();

Listeners

on(eventNames, function)

Add Event Listeners to elements.

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

off(eventNames, function)

Remove Event Listeners from elements.

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

click(function)

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

$(selector).click(functionName);

Classes

addClass(classNames)

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

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

removeClass(classNames)

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

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

hasClass(classNames)

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

$(selector).hasClass(className);

css({properties})

Set css to elements.

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

getAttr(attributeName)

Get Attribute value of elements

$(selector).getAttr(attributeName);

setAttr(attributeName)

Set Attribute to elements

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

removeAttr(attributeName)

Remove Attribute from elements

$(selector).removeAttr(attributeName);

hover()

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

$(selector).hover();

DOM

remove()

Removes an element from the DOM

$(selector).remove();

replace(HTML)

Replace element with new HTML

$(selector).replace(HTML);

append(HTML)

Append HTML before End Of Elements

$(selector).append(HTML);

prepend(HTML)

Insert HTML before the Beging Of Elements

$(selector).prepend(HTML);

after(HTML)

Insert HTML after the End Of Elements

$(selector).after(HTML);

Properties

val(value)

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

UI

hide()

Hide elements. Set display to "none".

$(selector).hide();

show()

Show elements. Set display to "block".

$(selector).show();

text()

Get or Set plain text of elements

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

html()

Get or Set HTML of elements

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

UI

fadeIn(duration, callback)

Fade-in element using the transparency.

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

fadeOut(duration, callback)

Fade-out element using the transparency.

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

width(value)

Get or Set Width of elements

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

height(value)

Get or Set Height of elements

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

each(function)

Executing function for each of elements

$(selector).each(functionName);

slideUp(duration, callback)

Slide Up Elements and fade-out

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

slideDown(duration, callback)

Slide Down Elements and fade-in

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

getBounds()

Return the size and position of elements

$(selector).getBounds();

parent()

Return the list of parent elements

$(selector).parent();

textWidth()

Return the list of elements width

$(selector).textWidth();

top()

Return Offset Top Of Elements

$(selector).top();

find(selector)

Find elements inside the list of selected elements

$(selector).find(selector);

focus()

Set focus at the first element of the list

$(selector).focus();

copy()

Return deep copies of elements

$(selector).copy();

Dataset

dataset

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