API

HTMLElement

addClass

.addClass( className )

classNameOne or more space-separated classes to be added to the class attribute of the element.

Adds the specified class(es) to the element

<div id="d1"></div> <script> qsi("d1").addClass("selected red"); </script>

removeClass

.removeClass(className)

className : One or more space-separated classes to be removed from the class attribute of the element.

Remove a single class, multiple classes, or all classes from the element

<div id="d1" class="selected red"></div> <script> qsi("d1").removeClass("red"); </script>

toggleClass

.toggleClass(classNames)

classNames

Add or remove one or more classes from the element, depending on either the class’s presence or the value of the state argument.

<div id="d1" class="selected red"></div> <script> qsi("d1").toggleClass("red"); </script>

remove

.remove()

remove the element from DOM (polyfill for IE).

<div id="d1" class="selected red"></div> <script> qsi("d1").remove(); </script>

val

.val(str)

strvalue to set to the element

if str is provided, add a attribute called value and set the value to str else return the value of the attribute 'value'

<div id="d1" class="selected red"></div> <script> qsi("d1").val("5"); console.log(qsi("d1")); // "5" </script>

class

.setClass(classNames)

classNames

Add or remove one or more classes from the element. Remove class if the className begins with '-' otherwise add

<div id="d1" class="selected red"></div> <script> qsi("d1").setClass("-red green"); </script>

hasClass

.hasClass(className)

className

Determine whether any of the matched elements are assigned the given class.

<div id="d1" class="selected red"></div> <script> var has = qsi("d1").hasClass("red"); console.log(has); // true </script>

css

.css(jsonObject)

jsonObject

Return the css properties or set the css properties.

<div id="d1" class="selected red" style="background-color:blue;border:solid 1px gray;color:beige"></div> <script> var d1 = qsi("d1"); d1.css({ "background-color": "yellow", border: "dotted 1px green", margin: "10px" }); console.log(d1.css()); // {"background-color":"yellow",border:"dotted 1px green",margin:"10px",color:beige} </script>

beforeBeginHTML

.beforeBeginHTML(htmlString)

htmlString

Insert html string, specified by the parameter, before the beginning of the element

<div id="d1"><span>Martin</span></div> <script> var d1 = qsi("d1"); d1.beforeBeginHTML("<p>Hello</p>"); console.log(d1.outerHtml()); // <p>Hello</p><div id="d1"><span>Martin</span></div> </script>

afterBeginHTML

.afterBeginHTML(htmlString)

htmlString

Insert html string, specified by the parameter, after the beginning of the element

<div id="d1"><span>Martin</span></div> <script> var d1 = qsi("d1"); d1.afterBeginHTML("<p>Hello</p>"); console.log(d1.outerHtml()); // <div id="d1"><p>Hello</p><span>Martin</span></div> </script>

beforeEndHTML

.beforeEndHTML(htmlString)

htmlString

Insert html string, specified by the parameter, before the end of the element

<div id="d1"><span>Martin</span></div> <script> var d1 = qsi("d1"); d1.beforeEndHTML("<p>Hello</p>"); console.log(d1.outerHtml()); // <div id="d1"><span>Martin</span><p>Hello</p></div> </script>

afterEndHTML

.afterEndHTML(htmlString)

htmlString

Insert html string, specified by the parameter, after the end of the element

<div id="d1"><span>Martin</span></div> <script> var d1 = qsi("d1"); d1.afterEndHTML("<p>Hello</p>"); console.log(d1.outerHtml()); // <div id="d1"><span>Martin</span></div><p>Hello</p> </script>

beforeBegin

.beforeBegin(htmlElement)

htmlElement

Insert the element, specified by the parameter, before the beginning of the element

<div id="container"> <div id="d1"><span>Martin</span></div> <input id="i2" /> </div> <script> var container = qsi("container"); var d1 = qsi("d1"); var i2 = qsi("i2"); d1.beforeBegin(i2); console.log(container.html()); // <input id="i2" /><div id="d1"><span>Martin</span></div> </script>

afterBegin

.afterBegin(htmlElement)

htmlElement

Insert the element, specified by the parameter, after the beginning of the element

<div id="container"> <div id="d1"><span>Martin</span></div> <input id="i2" /> </div> <script> var container = qsi("container"); var d1 = qsi("d1"); var i2 = qsi("i2"); d1.afterBegin(i2); console.log(container.html()); // <div id="d1"><input id="i2" /><span>Martin</span></div> </script>

beforeEnd

.beforeEnd(htmlElement)

htmlElement

Insert the element, specified by the parameter, before the end of the element

<div id="container"> <div id="d1"><span>Martin</span></div> <input id="i2" /> </div> <script> var container = qsi("container"); var d1 = qsi("d1"); var i2 = qsi("i2"); d1.beforeEnd(i2); console.log(container.html()); // <div id="d1"><span>Martin</span><input id="i2" /></div> </script>

afterEnd

.afterEnd(htmlElement)

htmlElement

Insert the element, specified by the parameter, after the end of the element

<div id="container"> <div id="d1"><span>Martin</span></div> <input id="i2" /> </div> <script> var container = qsi("container"); var d1 = qsi("d1"); var i2 = qsi("i2"); d1.afterEnd(i2); console.log(container.html()); // <div id="d1"><span>Martin</span></div><input id="i2" /> </script>

outerHeight

.outerHeight()

Get the current computed outer height (including padding, border, and optionally margin) for the element in the set of matched elements

<style> p { margin: 10px; padding: 5px; border: 2px solid #666; } </style> <p id="p1">Hello</p> <script> var p = qsi("p1"); console.log(p.outerHeight()); </script>

outerWidth

.outerWidth()

Get the current computed outer width (including padding, border, and optionally margin) for the element.

<style> p { margin: 10px; padding: 5px; border: 2px solid #666; } </style> <p id="p1">Hello</p> <script> var p = qsi("p1"); console.log(p.outerWidth()); </script>

show

.show(visible)

visibleboolean indicate if show or hide

Display or hide the element.

<div id="d1" style="display:none"></div> <script> qsi("d1").show(true); </script>

isVisible

.isVisible()

Indicate if the element is visible or not

<div id="d1" style="display:none"></div> <script> console.log(qsi("d1").isVisible()); // false </script>

toggleVisible

.toggleVisible()

Toggle visibility of the element

<div id="d1" style="display:none"></div> <script> qsi("d1").toggleVisible(); console.log(qsi("d1").isVisible()); // true qsi("d1").toggleVisible(); console.log(qsi("d1").isVisible()); // false </script>

html

.html(htmlString)

htmlString if specified, set the inner HTML of the element with it, else return the inner HTML

Get the inner HTML contents of the element or set the inner HTML contents of the element.

<div id="d1"> <p>Hello Martin</p> </div> <script> var d1 = qsi("d1"); console.log(d1.html()); // <p>Hello Martin</p> d1.html("<span>Bye John</span>"); console.log(d1.html()); // <span>Bye John</p> </script>

text

.text(str)

strif specified, set the inner text of the element with it, else return the text of the element

Get the combined text contents of the element, including their descendants

<div id="d1"> <p>Hello Martin</p> </div> <script> var d1 = qsi("d1"); console.log(d1.text()); // Hello Martin d1.text("Bye John"); console.log(d1.text()); // Bye John </script>

parent

.parent()

Get the parent of the element.

<div id="container"> <div id="d1"> <p>Hello Martin</p> </div> </div> <script> var d1 = qsi("d1"); var p = d1.parent(); console.log(p.outerHtml()); // <div id="container"> //<div id="d1"><p>Hello Martin</p></div> // </div> </script>

outerHtml

.outerHtml()

<div id="container"> <div id="d1"> <p>Hello Martin</p> </div> </div> <script> var container = qsi("container"); console.log(container.outerHtml()); // <div id="container"> //<div id="d1"><p>Hello Martin</p></div> // </div> </script>

attr

.attr(attributeName[,attributeValue])

attributeName

attributeValue

Get the value of an attribute for the element or set one attribute for the element.

attrs

.attrs()

Get the list of attributes of the element.

contains

.contains(elem)

elem

offset

.offset()

Get the current coordinates of the element.

qs

.qs(selectors)

selectors

execute the querySelector function with the specified argument relative to the element

returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

<div id="d1" class="cl"> <span class="aze">Hello</span> <span class="aze">World</span> </div> <script> var d1 = qsi("d1"); var el = d1.qs("[class:'aze']"); console.log(el.text()); // Hello </script>

qsa

.qsa(selectors)

selectors

returns all elements within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

<div id="d1" class="cl"> <span class="aze">Hello</span> <span class="aze">World</span> </div> <script> var d1 = qsi("d1"); var el = d1.qsa("[class:'aze']"); console.log(el.text()); // Hello World </script>

qsn

.qsn(selectors)

selectors

returns the first Element within the document that have the specified name. If no matches are found, null is returned.

<div id="d1" class="cl"> <input type="text" id="id1" name="t1" value="1" /> <input type="text" id="id2" name="t2" value="2" /> <input type="text" id="id3" name="t3" value="3" /> </div> <script> var d1 = qsi("d1"); var el = d1.qsn("t2"); console.log(el.val()); // 2 </script>

qsnames

.qsnames(selectors)

selectors

returns all Elements within the document that matches the specified name. If no matches are found, null is returned.

<div id="d1" class="cl"> <input type="text" id="id1" name="t" value="1" /> <input type="text" id="id2" name="t" value="2" /> <input type="text" id="id3" name="t" value="3" /> </div> <script> var d1 = qsi("d1"); var el = d1.qsnames("t"); console.log(el.text); // 123 </script>