A blog that dreams of a life without wasted jQuery

Hello.
I'm Mandai, the Wild team member in charge of development.

When developing with JavaScript, you might often find yourself quickly installing jQuery to get things done.
But aren't there times when you only really need one or two of its features?

jQuery is a user-friendly library, and I think I'll continue to use it in the future, but I think it's good to have other options unless I've decided to use it extensively

This time, I would like to introduce "that feature" that you just want

Menu

 

first draft

• I want $.ready()
• I want to grab an object with $('div#hogehoge > .fuga')
• I want $('hoge').on()
• I want datepicker()
• I want $('hoge').addClass()

 

I want $.ready()

I think this is jQuery's greatest invention, but you can also implement it yourself using Promises.
If window.onload works fine, that might be okay too.
However, let's just use a small module that provides only ready() to get it done quickly.

• domready
• document-ready
• doc-ready

There are several options, but these are probably the best choices.
They all generally perform as expected, but there are slight differences in browser (mainly IE) compatibility, so please check each site for details.

 

I want to grab an object with $('div#hogehoge > .fuga')

This is fine as it is standard in browsers

• If you want to specify an ID, use getElementById()
• To specify a single class, use getElementsByClassName()
• If you want to specify more details, use document.querySelector() or document.querySelectorAll()

There is no problem with this

document.querySelector() is very powerful and accepts any CSS selector, so you can search by ID selector, but it is slower than getElementById()

However, methods other than getElementById() were implemented at different times and are not supported by all browsers.
If you need to cover a wide range of browsers, using jQuery is a viable option.

Check it out on Can I Use

 

I want $('hoge').on()

This can also be handled using the browser's standard addEventListener() method

var hoge_obj = document.getElementById('hoge'); // Simple version hoge_obj.addEventListener('', (e)=>{ // Some processing }); // Version that can manage deletion with removeEventListener() var hoge_func = (e) => { // Some processing }; hoge_obj.addEventListener('click', hoge_func); // Remove the listener hoge_obj.removeEventListener('click', hoge_func);

 

While it's easy to write this by setting an anonymous function as the second argument to addEventListener(), the disadvantage is that you cannot remove the registered listener with removeEventListener().
To avoid this, you should declare the anonymous function in the second argument beforehand and then register it.
This procedure allows removeEventListener() to identify the function, enabling you to remove listeners that are no longer needed.

However, depending on the compatibility with IE, I think using jQuery might be a viable option

Check it out on Can I Use

 

I want datepicker()

Since datepickers are jQuery's strong suit, finding a package that doesn't depend on jQuery can be quite difficult.
This time, I'll introduce two packages.

• flatpickr
• Pikaday

There is no clear distinction between the two, but rather they have different design directions, so it would be worth knowing about both

flatpickr has a flat design, which I think would go well with Material Design.
Pikaday, on the other hand, has a somewhat Bootstrap-like feel and seems to have a more neutral design.

Both can be loaded and used as jQuery modules, so they might be a good option if you're okay with jQuery but not quite ready for jQuery UI

 

I want $('hoge').addClass()

Adding (addClass) and removing (removeClass) classes using jQuery is very simple.
However, the number of standard JavaScript methods has increased dramatically, and interfaces for handling classes other than className have now been implemented.

That is what I will introduce to you today: classList

var hoge_obj = document.getElementById('hoge'); hoge_obj.className = 'class_a class_b'; // Get class information console.log(hoge_obj.classList); // Get class information as an array (read-only) console.log(hoge_obj.classList.length); // Since it has been parsed and split by spaces, 2 is returned hoge_obj.classList.add('class_c'); // class_c is added hoge_obj.classList.remove('class_b'); // class_b is deleted hoge_obj.classList.toggle('class_d'); // If class_d does not exist, it is registered; if it does, it is deleted hoge_obj.classList.contains('class_c'); // True if class_c is included

 

Using `classList` has dramatically simplified the processing of classes.
However, it may not be available in all browsers, so you need to use it according to your requirements.

Check it out on Can I Use

 

summary

I've listed some that came to mind off the top of my head, but please note that some may or may not work depending on the type and version of your browser, so please check

Also, if you incorporate various libraries to get rid of jQuery, the loading time may actually become longer, so if you can get by with an all-in-one solution, I think it's better to just use it

We will add more information as it becomes available

That's all