Remember jQuery? It's like that, but no one else uses it.
No build step needed. π
Two options:
- Reference the script in unpkg in your HTML.
<script src="https://unpkg.com/dorkjs@latest"></script>
OR
- Download
dork.min.js
from thedist
folder - Reference the downloaded script in your HTML.
<script src="dork.min.js"></script>
<button id="button1">Button has not been clicked</button>
<script>
dork.onload((onloadEvent, document, $) => {
$.listen("#button1", "click", (buttonEvent, button) => {
$.print(button);
$.inner(button, "Button has been clicked");
});
});
</script>
- 934 B
- 463 B (minified)
- 370 B (brotli)
- $(query) β
Element
Query for a particular element in a document. Classic.
- $$(query) β
Array.<Element>
Query for all elements in a document.
- listen(el, eventName, fn, preventDefault)
Adds an event listener to a particular
Element
.- onload(fn)
Runs a function after the DOM content has been loaded.
- data(el, data, val)
Get (or set) the data value of an
Element
.- value(el, val)
Get (or set) the value of an
Element
.- inner(el, val)
Get the inner HTML of an
Element
.- outer(el, val)
Get (or set) the outer HTML of an
Element
.- hide(el)
Hide an
Element
.- show(el)
Show an
Element
.- print(messages)
Writes to the console.
Query for a particular element in a document. Classic.
Returns: Element
- The first Element
found for the query.
Param | Type | Description |
---|---|---|
query | String |
CSS-like query for an Element . |
Query for all elements in a document.
Returns: Array.<Element>
- All Element
s found for the query.
Param | Type | Description |
---|---|---|
query | String |
CSS-like query for Element s. |
Adds an event listener to a particular Element
.
Param | Type | Description |
---|---|---|
el | String | Element |
Element to listen to. |
eventName | String |
Event to listen to, e.g. "click", "mouseover", etc. |
fn | function |
Function to run when a particular event is fired. |
preventDefault | Boolean |
Whether or not preventDefault() should be called on the event. Useful for the click event. |
Runs a function after the DOM content has been loaded.
Param | Type | Description |
---|---|---|
fn | function |
The function to run after the DOM content has been loaded. |
Get (or set) the data value of an Element
.
Param | Type | Description |
---|---|---|
el | String | Element |
Element to get the value for. |
data | String |
Attribute to get the data from. |
val | * |
Value to set on the data. |
Get (or set) the value of an Element
.
Param | Type | Description |
---|---|---|
el | String | Element |
Element to get the value for. |
val | * |
Value to set on the value. |
Get the inner HTML of an Element
.
Param | Type | Description |
---|---|---|
el | String | Element |
Element to get the inner HTML for. |
val | * |
Value to set on the inner HTML. |
Get (or set) the outer HTML of an Element
.
Param | Type | Description |
---|---|---|
el | String | Element |
Element to get the outer HTML for. |
val | * |
Value to set on the outer HTML. |
Hide an Element
.
Param | Type | Description |
---|---|---|
el | String | Element |
The Element to hide. |
Show an Element
.
Param | Type | Description |
---|---|---|
el | String | Element |
The Element to show. |
Writes to the console.
Param | Type | Description |
---|---|---|
messages | Array.<String> |
The messages to write to the console. |
python3 -m http.server 8000
- Go to http://localhost:8000/example.html in a browser
TBD
npm run b
Every JavaScript ever.