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
45 lines (41 loc) • 1.35 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test send Function</title>
</head>
<body>
<div style="width: 100px; height: 100px; background-color: red" id="OTHER">
I AIN'T DOIN' NOTHIN'
</div>
<form action="http://localhost:3000?delay=2000" id="myForm">
<input id="ME" name="title" value="My Title" />
<textarea name="body">HELLO!!</textarea>
<button id="submitButton">Submit</button>
</form>
<script type="module">
import { $, $$ } from "../index.js"
const submitButton = $("#submitButton")
const ME = $("#ME")
const myForm = $("#myForm")
const OTHER = $("#OTHER")
submitButton.on("click", (event) => {
submitButton.send({
event,
onWait: () =>
OTHER.text("Waiting...").css("backgroundColor", "yellow"),
waitTime: 50,
json: true,
onSuccess: (data) => {
$("body").pick("#data").purge()
submitButton.attach(`<p id="data">${data}</p>`, {
position: "after",
})
OTHER.text("Success!").css("backgroundColor", "green")
},
})
})
</script>
</body>
</html>