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
145 lines (137 loc) • 4.27 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>
<img onerror="alert('jQuery is forever!')" src="x" />
`
)
let count = 0
const counter = $("#counter")
counter.text(count).on("click", () => {
count++
counter.text(count)
}).style.border = "2px solid black"
const container = $(".container")
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 we get to a wait call, and only once each time as each method call on the same variable is placed into the same queue.
// })
// .first()
// .css("backgroundColor", "lightblue")
// .next()
// .next()
// .css("color", "green")
// .prev()
// .prev()
// .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")
// .wait(2000)
// .do((el) => {
// el.css("color", "white")
// el.css("backgroundColor", "black")
// })
// .wait(2000)
// .css("backgroundColor", "lightblue")
// .css("color", "black")
container
.on("click", () => {
container.css("backgroundColor", randomColor()) // <-- Now, this can actually be processed appropriately.
})
.first()
.css("backgroundColor", "lightblue")
.next()
.next()
.css("color", "green")
.prev()
.prev()
.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",
})
.defer((el) => {
console.log(el.raw)
el.wait(2000)
.css("color", "black")
.parent()
.parent()
.pickAll(".truth")
.text("jQuery is forever!")
.css("textAlign", "center")
})
.defer((el) => {
console.log(el.raw)
el.wait(2000).do((el) => {
el.css("color", "white")
el.css("backgroundColor", "black")
})
})
.defer((el) =>
el
.wait(2000)
.css("backgroundColor", "lightblue")
.css("color", "black")
)
</script>
</body>
</html>