The jTools are a collection of useful DOM manipulation tools. They allow the selection, traversal, event handling, and changing of DOM elements.
Simply add jtools.js to your HTML file:
<script src="./js/jtools.js" charset="utf-8"></script>
To select DOM elements, use the $j
selector. This takes the following arguments:
$j(string)
: Select by CSS selector, p.e.$j("h1")
$j(HTMLElement)
: Select by HTML elements
In both cases, $j will return a collection of type DOMNodeCollect
.
A DOM Node collection offers the following methods:
html()
: Return the innerHTML of the current node(s).html(value)
: Set the innerHTML of the current node(s) to the passedvalue
.empty()
: Clear the content of the node(s).append(add)
: Add content to node(s).add
can be aString
, aDOMNodeCollect
, or anHTMLElement
.attr(key, value)
: Will add or update the attributekey
with the newvalue
.remove()
: Remove the HTML and the node(s).addClass(className)
: Add the class namedclassName
to the node(s).removeClass(className)
: Remove the class namedclassName
from the node(s).
children()
: Return the children objects of the selected node(s).parent()
: Return the parent object(s) of the selected node(s).find(selector)
: Find all descending nodes matching the passed CSSselector
.
on(event, callback)
: Add an event handler to the node(s) that invokescallback
onevent
. For example:$j("h1").on("click", () => {alert("h1 clicked!")})
off(event)
: Remove all event callbacks from the node(s) that matchevent
.
Passing a function to $j
will queue a function to be invoked once the document is fully loaded. If the document has already finished loading, the function is invoked immediately.
$j.ajax(options)
: Create a new AJAX request. Takes the followingoptions
:contentType
: The media type of the request. Default:application/x-www-form-urlencoded; charset=UTF-8
method
: The HTTP method used. Default:GET
url
: The target URL for the request. Default: emptysuccess
: Callback function to be invoked on successful request. Default: Noneerror
: Callback function to be invoked on unsuccessful request. Default: Nonedata
: Data submitted with the AJAX request. Default: None