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
66 lines (56 loc) • 1.92 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test parent function</title>
</head>
<body>
<div class="textShouldBeHere">
<div id="child"></div>
</div>
<div id="parent">
<div class="textShouldBeHere"></div>
</div>
<div id="testContainer"></div>
<script type="module">
import { $, $$ } from "../index.js"
const testContainer = $("#testContainer")
const test = () => {
const parent = $("#child").parent()
parent.text("Parent text").css("color", "blue")
const child = $("#parent").kids()
child.text("Child text").css("color", "red")
const textShouldBeHere = $$(".textShouldBeHere")
textShouldBeHere
.takeWhile((el) => el.parentNode.id !== "parent")
.if({
is: (el) => el.textContent === "Parent text",
then: (el) =>
testContainer
.attach("<h2>parent test PASSED</h2>")
.css("color", "green"),
or: (el) =>
testContainer
.attach("<h2>parent test NONONONO</h2>")
.css("color", "red"),
})
.refresh()
textShouldBeHere
.takeWhile((el) => el.parentNode.id === "parent", true)
.if({
is: (el) => el.textContent === "Child text",
then: (el) =>
testContainer
.attach("<h2>child test PASSED</h2>")
.css("color", "green"),
or: (el) =>
testContainer
.attach("<h2>child test NONONONO</h2>")
.css("color", "red"),
})
}
document.addEventListener("DOMContentLoaded", test)
</script>
</body>
</html>