A blog that dreams of a life without wasted jQuery

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

When developing with JavaScript, there are many situations where you might be tempted to just install jQuery and get things done,
but aren't there times when you only really need one or two 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 if you use Promise, you can implement it yourself.
If window.onload is fine, that might be fine.
However, let's quickly get it done by using a small module that only provides ready().

• domready
• document-ready
• doc-ready

There are several candidates, but these are probably the best.
They all work roughly as expected, but there are slight differences in browser (mainly IE) compatibility, so please check each site.

 

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() have been implemented at different times and are not supported in all browsers.
If you need to cover a wide range of browsers, I think using jQuery is a good choice.

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);

 

This can be easily written by setting an anonymous function as the second argument to addEventListener(), but the disadvantage of this is that the registered listener cannot be removed with removeEventListener().
To avoid this, you can declare the anonymous function as the second argument in advance and then register it.
This procedure allows removeEventListener() to identify the function, allowing 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()

Datepicker is a strong area for jQuery, so it may be difficult to find a package that doesn't depend on jQuery.
This time, we will introduce two types of 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 that seems to go well with Material Design.
Pikaday has a somewhat Bootstrap-like feel and a simple 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()

Registering (addClass) and deleting (removeClass) classes using jQuery is very easy.
However, the number of standard JavaScript methods has increased dramatically, and interfaces that can handle classes other than className have 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 dramatically simplifies the processing of classes.
This may not be available depending on the browser, 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