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
80 lines (73 loc) • 2.2 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>
<div id="app"></div>
<script type="module">
import { $, $$ } from "../index.js"
$("#app").sanitize(`<div class="container">
<h1>jQuery is for old people.</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<h2 class="truth">This will disappear.</h2>
<h3 class="truth">I love you.</h3>
</div>`)
const container = $(".container")
let count = 0
$("#counter").text(count)
$("#counter").on("click", () => {
$("#counter").text(count++)
})
const randomColor = () => {
const r = Math.floor(Math.random() * 256)
const g = Math.floor(Math.random() * 256)
const b = Math.floor(Math.random() * 256)
return `rgb(${r}, ${g}, ${b})`
}
container
.on("click", () => {
container.css("backgroundColor", randomColor()) // <-- This will not execute until the entire chain is complete.
})
.first()
.css("backgroundColor", "lightblue")
.next()
.wait(2000)
.next()
.css("color", "green")
.prev()
.prev()
.wait(2000)
.css("color", "purple")
.parent()
.css({
backgroundColor: "lightgreen",
border: "1px solid black",
padding: "10px",
margin: "10px",
})
.pick("button")
.css({
width: "100px",
height: "100px",
borderRadius: "50%",
border: "none",
backgroundColor: "red",
color: "white",
fontSize: "2rem",
cursor: "pointer",
})
.wait(2000)
.css("color", "black")
.parent()
.parent()
.pickAll(".truth")
.text("jQuery is forever!")
.css("textAlign", "center")
</script>
</body>
</html>