dork

Remember jQuery? It's like that, but no one else uses it.

• https://github.com/adamghill/dorkjs
• https://www.npmjs.com/package/dorkjs

Installation

No build step needed. 🎉

Two options:

1. Reference the script in unpkg in your HTML.

<script src="https://unpkg.com/dorkjs@latest"></script>

OR

1. Download dork.min.js from the dist folder
2. Reference the downloaded script in your HTML.

<script src="dork.min.js"></script>

Simple example of how dork looks

<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>

Size

• 934 B
• 463 B (minified)
• 370 B (brotli)

Functions

$(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) ⇒ Element

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) ⇒ Array.<Element>

Query for all elements in a document.

Returns: Array.<Element> - All Elements found for the query.

Param	Type	Description
query	String	CSS-like query for Elements.

listen(el, eventName, fn, preventDefault)

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.

onload(fn)

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.

data(el, data, val)

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.

value(el, val)

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.

inner(el, val)

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.

outer(el, val)

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(el)

Hide an Element.

Param	Type	Description
el	String | Element	The Element to hide.

show(el)

Show an Element.

Param	Type	Description
el	String | Element	The Element to show.

print(messages)

Writes to the console.

Param	Type	Description
messages	Array.<String>	The messages to write to the console.

Developing

See examples

1. python3 -m http.server 8000
2. Go to http://localhost:8000/example.html in a browser

Run tests

TBD

Build

npm run b

Colophon

• Rollup
• jsdoc2md

Inspiration

Every JavaScript ever.