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
117 lines (93 loc) • 3.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Function Tests</title>
<!-- Initial Styles -->
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<!-- Elements for testing purposes -->
<button id="testButton">Button</button>
<div id="delegateTest" class="testDiv">
Delegate Test: <span>Click me</span>
<span>NO, click me.... Like, a lot!</span>
<button>Don't click me</button>
</div>
<div class="testDiv">Test Div 1</div>
<div class="testDiv">Test Div 2</div>
<input id="testInput" type="text" value="Initial Value" />
<select id="testSelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div id="appendToThis"></div>
<div id="prependToThis"></div>
<script type="module">
import { $, $$ } from "../index.js"
$$(".testDiv").map((el) => console.log(el.textContent))
// // 1. on
// $("#testButton").on("click", () => console.log("Button Clicked"))
// // 2. once
// $("#testButton").once("click", () => console.log("Button Clicked Once"))
// // 3. off - We'll setup an event, then remove it.
// const logClick = () => console.log("This should not appear")
// $("#testButton").on("click", logClick)
// $("#testButton").off("click", logClick)
// 4. delegate
$("#delegateTest").delegate("click", "span", (e) =>
console.log("Span within Delegate Test clicked")
)
// // 5. html
// $("#testButton").html("<strong>New HTML</strong>")
// // 6. text
// $("#testButton").text("New Text Content")
// // 7. val (for input)
// $("#testInput").val("New Input Value")
// // 8. val (for select)
// $("#testSelect").val("option2")
// // 9. css
// $(".testDiv").css({ backgroundColor: "lightblue" })
// $(".testDiv").css("border", "1px solid red")
// // 10. addStyleSheet
// $("#testButton").addStyleSheet(".highlight { color: red; }")
// $("#testButton").addClass("highlight")
// // 11. addClass
// $(".testDiv").addClass("highlight")
// // 12. removeClass
// $(".testDiv").removeClass("highlight")
// // 13. toggleClass
// $(".testDiv").toggleClass("highlight")
// // 14. set
// $("#testButton").set("data-test", "testValue")
// // 15. unset
// $("#testButton").unset("data-test")
// // 16. toggle (attribute)
// $("#testButton").toggle("data-toggled")
// // 17. data
// $("#testButton").data("testData", "SomeData")
// // 20. cloneTo
// $(".testDiv").cloneTo("#appendToThis")
// // 21. moveTo
// $(".testDiv").moveTo("#prependToThis")
// // 24. animate - Animate divs by fading them out and scaling them up.
// $(".testDiv").animate(
// [
// { transform: "scale(1)", opacity: 1 },
// { transform: "scale(1.5)", opacity: 0 },
// ],
// {
// duration: 1000,
// }
// )
// // 26. find - Log found nested spans
// const found = $("#delegateTest").find("span")
// // 27. closest
</script>
</body>
</html>