jessquery
Version:
Modern JavaScript is pretty good, but typing document.querySelector() is a pain. This is a tiny library that makes DOM manipulation easy. jQuery is around 80kb (30kb gzipped), while this is only around 8kb (3.5kb gzipped). Lots of JSDoc comments so it's s
47 lines (43 loc) • 1.23 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="button">Click me!</button>
<button id="button">Click me!</button>
<div class="display">In one second!</div>
<script type="module">
import { $, $$ } from "../index.js"
const fadeIn = { opacity: 1 }
const fadeOut = { opacity: 0 }
const oneSecond = 1000
const buttons = $$("button")
const display = $(".display")
display
.wait(1000)
.html("<span>hi</span>", true)
.wait(2000)
.html("bye")
.wait(1000)
.purge()
buttons
.addClass("btn")
.wait(1000)
.attach(
`<p>
"These buttons will animate in 2 seconds. They will fade in and out twice
then disappear."
</p>`
)
.wait(2000)
.transition(fadeIn, oneSecond)
.transition(fadeOut, oneSecond)
.transition(fadeIn, oneSecond)
.transition(fadeOut, oneSecond)
.purge()
</script>
</body>
</html>