Getting rid of jQuery

PublishedFebruary 19, 2021

•3 min read•View as Markdown

Thomas Portelange

A Web Developer based in Belgium, specialized in PHP & JS development

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

A git diff with all changed and new unstaged files

I recently needed to collect all changes in one file for reporting purposes. Found this article: https://ratfactor.com/cards/git-diff-with-new-files In case you need something similar on Windows, here

Jul 27, 20261 min read

A git diff with all changed and new unstaged files

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Some projects start with a grand plan. Others start because you just need to read a file without thinking too much about it. That was the case for spread-compat. I needed a common interface for CSV, X

Mar 6, 20265 min read

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Media Queries Level 5 are awesome

With modern css, you can almost get rid of sass. But there is one last pain point : media queries. Not being able to use variables or an easy, common syntax for typical breakpoints is really annoying. That is, until you meet Media Queries Level 5. I’...

Oct 10, 20253 min read

Modern tooltips

This is a quick article to share this demo I just made. https://codepen.io/lekoalabe/pen/JoPNWpX

Dec 20, 20241 min read

Using Dialog elements today

Modals are typical UI elements for many web apps. There are countless packages dedicated to that specific features, each framework creating its own variation. Popular frameworks like Bootstrap also have custom code to deal with it. But all this feels...

Oct 29, 20243 min read

LeKoala Dev Blog

47 posts

$.each in vanilla js

One thing that we often find ourselves doing, is to loop on a list of elements of the dom. In modern native javascript (IE11+) nothing could be easier:

document .querySelectorAll(selector) .forEach(function (item) { item.addEventListener("click", function (e) { e.preventDefault(); console.log(item); }); });

Classy without jQuery

Another classic example is sticky headers. Why use jQuery when a few lines are enough?

if (window.pageYOffset > sticky) { header.classList.add("sticky"); } else { header.classList.remove("sticky"); }

Or do you just want to show or hide a block? Here is another example

item.addEventListener("click", function (e) { e.preventDefault(); var t = document.querySelector(this.getAttribute("href")); if (window.getComputedStyle(t).display === "none") { t.style.display = "block"; } else { t.style.display = "none"; } });

Note the "getComputedStyle" that lets you know whether the element is visible or hidden, whether it is via the style attribute or a css class.

Attaching behaviours

What would jQuery be without its famous plugins! Fortunately more and more javascript components take a multi framework approach and are essential written in "pure" javascript with just a wrapper around it to react, view, angular... Well, not all of them unfortunately, there are still some components that are written only for a given library.

I recently published ModularBehaviour.js which allows to attach a javascript behavior to a given node. Currently, it also works with jQuery plugins, but eventually when I will have found alternatives for all my plugins, I plan to do this in "pure" js.

Happy coding to all of you!

Command Palette

Comments

More from this blog

Dom ready or not

$.each in vanilla js

Classy without jQuery

Attaching behaviours