//////////////////////////////////////// // Vanilla JQuery by Paul Caron /////////////////////////////////////// const $ = (query)=>{ if(typeof(query)==="function"){ document.addEventListener("DOMContentLoaded", query); return; }else if(query===window){ this.els=[window]; }else if(typeof(query)==="object"){ this.els=[query]; }else{ this.els=Array.from(document.querySelectorAll(query)); } this.html=(h="")=>{ if(h!=""){this.els.forEach((e)=>e.innerHTML=h);} return this.els.map((e)=>e.innerHTML); }; this.css=(property, value)=>{this.els.forEach((e)=>e.style[property]=value)}; this.on=(e,f)=>{this.els.forEach((elem)=>elem.addEventListener(e,f,true));}; this.off=(e,f)=>{this.els.forEach((elem)=>elem.removeEventListener(e,f,true));} this.attr=(a,value="")=>{ if(value!="") this.els.forEach((e)=>e.setAttribute(a,value)); return this.els.map((e)=>e[a]); } this.hide=(duration="")=>{ if(typeof(duration)==="number"){ this.els.forEach((e)=>hiding(e,duration)); }else{ this.els.forEach((e)=>e.style.display="none");} } this.show=(duration="")=>{ if(typeof(duration)==="number"){ this.els.forEach((e)=>showing(e,duration)); }else{ this.els.forEach((e)=>e.style.display="");} } this.fadeIn=(duration=600)=>{this.els.forEach((e)=>fadingIn(e,duration))} this.fadeOut=(duration=600)=>{this.els.forEach((e)=>fadingOut(e,duration))} this.text=()=>{return this.els.map((e)=>e.textContent);} this.val=()=>{return this.els.map((e)=>e.value);} this.append=()=>{} this.prepend=()=>{} this.at=(index)=>{return $(this.els[index]);} return this; } let isAnimating=false; function hiding(el,dur){ if(isAnimating){setTimeout(()=>{hiding(el,dur)},10);return;} isAnimating=true; let count=0; let W=el.width; let H=el.height; let O=el.style.opacity; (function animate(){ el.style.width=W*(20-count)/20+"px"; el.style.height= H*(20-count)/20+"px"; ; el.style.opacity=(20-count)/20; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.display="none"; el.style.height=H+"px"; el.style.width=W+"px"; el.style.opacity="1.0"; isAnimating=false; } })(); } function showing(el,dur){ if(isAnimating){setTimeout(()=>{showing(el,dur)},10);return;} isAnimating=true; let count=0; let W=el.width; let H=el.height; let O=el.style.opacity; (function animate(){ el.style.display=""; el.style.width=W*(count)/20+"px"; el.style.height= H*(count)/20+"px"; ; el.style.opacity=(count)/20; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.opacity="1.0"; isAnimating=false; } })(); } function fadingIn(el,dur){ if(isAnimating){setTimeout(()=>{fadeIn(el,dur)},10);return;} isAnimating=true; let count=0; (function animate(){ el.style.opacity=(count)/20; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.opacity="1.0"; isAnimating=false; } })(); } function fadingOut(el,dur){ isAnimating=true; let count=0; (function animate(){ el.style.opacity=(20-count)/20; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.opacity="0.0"; isAnimating=false; } })(); } ////////End of JQuery ////////////////////////////// let fun=(e)=>{ $("h1").html("clicked"); $("img").off("click",fun); $("img").on("click",fun2); $("img").fadeOut(200); $("img").fadeIn(200); } let fun2=(e)=>{ $("h1").html("clicked twice"); $("img").off("click",fun2); $("img").hide(300); $(window).on("click",()=>{ $("img").hide(); $("img").attr("src", "https://picsum.photos/200/300/?random"+Date.now()); } ); $("img").on("load",()=>{ $("h1").html("thrice"); $("img").show(300); }) } let w; let ctx; function start(){ $(".classybody").html("

Paul's JQuery/PQuery

"); $("#mybody").css("color","white"); $("#mybody").css("background-color","black"); $("h1").css("margin-bottom","0"); $("p").at(0).html("this is a paragraph"); $("p").at(1).html("this is another paragraph"); $("img").attr("src", "https://picsum.photos/200/300/?random"+Date.now()); $("img").on("load",()=>alert("image loaded")); $("img").on("click",fun); w=$("h1").attr("offsetWidth").join(""); $("#mycanvas").attr("width",w+"px"); $("#mycanvas").attr("height","15px"); console.log(`The canvas width: ${$("canvas").attr("width")}`); ctx=$("canvas").els[0].getContext("2d"); window.requestAnimationFrame(animate); } function animate(){ ctx.fillStyle="rgba(0,0,0,1.0)"; ctx.fillRect(0,0,w,5); let d=(Date.now()/10)%360; ctx.fillStyle=`hsla(${d},50%,50%,${1/(d/72)})`; ctx.fillRect(0,0,w*d/360,5); window.requestAnimationFrame(animate); } $(start);

Vanilla JQuery - PQuery