Still using jQuery, even if you can create your own if you want?

Thanks to jQuery for making our pass time lot easier, but you might not need jQuery for now, it's not deprecated anymore but it was completely outdated.

I remember the time when jQuery was become a very popular JS Framework, most of Javascript user using it, i almost always founded Javascript tutorial covered with jQuery, it's good at that time but not for nowadays.

What's the problem?

You must stop using jQuery, but why? It's really helpful to me? I thought you even know that, that's outdated and with just using a native API of Javascript it can be done.

But how if i was written an complex app with it? Or i want to work again with my old project? Should i rewrite from scratch? If like so then what do you need is just write your own jQuery. Fortunately this is can be really simple 😁

I'll show you how simple it was, as example we can make jQuery $ selector with native JavaScript API, like this:

const $ = (q) => document.querySelector(q)

Then try to find element using CSS selector like what we do in jQuery like $('.box') and it's work perfectly.

But if you can realize, we can't get all of the whole elements if there is more than one .box classed div, to fix that change the querySelector to querySelectorAll, the return will give you a list of founded node as object.

const $ = (q) => document.querySelectorAll(q)

How about the Function?

In jQuery we have a lot of "helper" function to manipulate the DOM, we can also do that too.

To extend our own simple jQuery code we need to wrap it in a class and define the selector by creating the class instance using a function.

Let's move to the real part of making your own jQuery:

class ownJQ {
  constructor(q) {
    const el = document.querySelectorAll(q)
    el.forEach((node, index) => this[index] = node)

    this.length = el.length
  }

  toggle(className) {
    for (let i = 0; i < this.length; i ++) {
      this[i].classList.toggle(className)
    }

    return this
  }
}

Then lets define the selector function, you can freely choose the selector variable but for similarity purpose i use $ sign:

const $ = (q) => new ownJQ(q)
// Return result:
// ownJQ {0: div.box, 1: div.box, 2: div.box, length: 3}

Now our own jQuery has ready to use, to prove that work as expected lets testing our toggle function, what this function do is toggle the founded elements with the given class name.

$('.box').toggle('bg-red')
// Return result:
// ownJQ {0: div.box.bg-red, 1: div.box.bg-red, 2: div.box.bg-red, length: 3}

That's cool, but how it's work?

I designing the class API as similar as the jQuery do, at first after we defined the ownJQ class we need to find all the target element inside the constructor function.

constructor(q) {
  // Find element by query
  const el = document.querySelectorAll(q)
  // Push founded node element to class itself
  // with their index number as key
  el.forEach((node, index) => this[index] = node)

  // All elements total
  this.length = el.length
}

constructor is class built-in function that run when the class instance is on creation

toggle(className) {
  // Iterate all element
  for (let i = 0; i < this.length; i ++) {
    // Do toggle class to each node
    this[i].classList.toggle(className)
  }

  // Return the class itself,
  // make it work with chaining function
  return this
}

Hopefully this actually as simple as i said, and this is for bonus:

// You can try this at home
text(v) {
  let texts = []
  for (let i = 0; i < this.length; i++) {
    v ? this[i].innerText = v : texts.push(this[i].innerText)
  }

  return v ? this : texts
}

I think it's better then rewrite your whole project especially if you're lazy people like me, but i strongly recommended to you by rewriting your old project with new technology then you can learned new things from it.

Here's the example & source code:

Source: https://repl.it/@bramaudi/YourOwnJQuery
Demo: https://yourownjquery--bramaudi.repl.co/