🗒️Docs

THESE DOCS ARE NOT COMPLETE!

Methods

The elem parameter is a parameter used by almost all of the quick.js methods, and takes either a querySelector ("#editMe", ".className", "p", etc) or an Element object ("document.getElementById()", "document.getElementByClassName()", "_.get()", etc)

get()

Gets an element using a querySelector and returns an Element object. Usage: _.get(elem)

Example:

<p id="editme"></p>
<script>
    var elem = _.get("#editme")
    _.edit(elem, "hello there")
</script>

edit()

Edits an element's innerHTML

Usage: .edit(elem, text)

Parameters:

text accepts any string or number

Example:

<p id="editme"></p>

<script>
    var edit = _.get("#editme")
    _.edit(edit, "I was edited!") // -> <p id="editme">I was edited!</p>
    
    _.edit("#editme", "I was edited again!") // -> <p id="editme">I was edited again!</p>
</script>

addClass()

Add a class to an element.

Usage: .addClass(elem, property, value)

Parameters:

property takes a CSS property

value takes a value that works with property

Example:

<p id="#changeClass">My class will be changed!</p>

<script>
    _.addClass("#changeClass", "text") // <p id="changeClass" class="text">
</script>

removeClass()

Removes a class from an element

Usage: _.removeClass(elem, classname)

Parameters:

classname takes a name of an element class

Example:

<p id="editme" class="removeMe keepMeHere"></p>
<script>
    var elem = _.get("#editme")
    _.removeClass(elem, "removeMe") // -> <p id="editme" class="keepMeHere"></p>
</script>

setCSS()

Removes a class from an element

Usage: _.setCSS(elem, property, value)

Parameters:

property takes the name of a CSS class

value takes a valid CSS value of property

Example:

<p id="editme">I will red!</p>
<script>
    var elem = _.get("#editme")
    _.setCSS(elem, "color", "red") // -> <p id="editme">I will be red!</p> (colored red)
    _.setCSS("#editme", "font-size", "25px") // -> <p id="editme">I will be red!</p> (colored red and 25px)
</script>

on()

Add an event listener to an element

Usage: _.on(elem, event, callback)

Parameters:

event takes any HTML event

callback takes any callback function

Example:

<p id="clickme">Click me!</p>
<script>
    var elem = _.get("#clickme")
    _.on(elem, "click", function() {
        alert("I was clicked!");
    })
</script>

hide()

Hide an element on the document.

Usage: .hide(elem)

Example:

<p id="hideme">I will be hidden!</p>

<script>
    _.hide("#hideme") // Element is now hidden
</script>

show()

Show an element.

Usage: .show(elem)

Example:

<p id="showme">I will be shown!</p>

<script>
    _.hide("#showme") // Element is now hidden
    _.show("#showme") // Element is now shown
</script>

loop()

Loop a function an amount of times

Usage: .loop(times, function)

Parameters:

times takes an integer

function takes any JavaScript function

Example:

<script>
    _.loop(5, function() {
        document.write("Hello!")
    }) // "Hello!" was written 5 times
</script>

Last updated