Hello friends,

People often say “Love programmers because they are so loyal” , but that is only in love life!

For me, a programmer must have a reputation for being a “bad guy” in his own work. We can’t just love a way of code, a framework, a library, a design pattern … and we just want to attach ourselves to them everywhere. Sometimes, we even need a cool head to continually change the way we do our work in order to achieve “fullness” and bring everything “to the top” in a subtle, informative way. the most intelligent …

Returning to the title of the article, I believe Jquery is still a good and useful library in practice. However, with the rapid development of modern browsers gradually strongly supporting ES6, along with the extremely fast development of Javascript, Jquery gradually revealed many of its own weaknesses: leaving With the React – Vue – Angular frameworks, lagging behind the development speed of Javascript, wasting additional installation in projects, many errors, … I bet there will be a lot of friends who agree with me. In this case, you can do a trial search on Stackoverflow, the results we get for Jquery-related problems are over 1 million .

Have I moved your hearts to leave Jquery and go to pure Javascript? If you are still hesitant to “break up” with Jquery, and “flirt” with the Javascipt girl quickly – the real Fuckboi – then let me take a look at the situations below.

1. Selection of ingredients

This is probably the most basic and important job in Jquery when we need to manipulate the DOM. Equivalent to $() or jQuery() are two functions querySelector() and querySelectorAll() . We can easily code the following:

2. Perform the function on all selected ingredients

querySelectorAll() returns us an array of NodeList s . Unlike jQuery, we simply call the function over the jQuery object, with Javascript we will need to traverse the entire NodeList array retrieved with NodeList.foreach () . No problem, “flirting” sometimes difficult

3. Find an ingredient within another

jQuery provides us with the find() function so we can search for something inside another guy. Personally, in this situation, I prefer Javascript, because simply we still use the querySelector() and querySelectorAll() to get the component we want.

4. Navigate the DOM tree for some common scenarios

There will be times when you need to quickly browse the previous, next, or parent of an existing element. jQuery has familiar functions parent() , next() and prev() . Not less edge, Javascript also gives us directly 3 properties of a component, that is parentElement , nextElementSibling and previousElementSibling . Geez, what do you think

5. Work with events

jQuery has dozens of functions to attach a specific event to our element. As for JS, let’s see the power of the addEventListener() function:

6. Add the event to listen to

The on() function in jQuery is how we add dynamic events to our element, once in this situation we will encounter the familiar addEventListener() function of the “girl” Javascript.

7. Activate or launch the event

Equivalent to jQuery’s trigger function and JS-side dispatchEvent() function, this function can be called at any component and will take input as an Event object. This is a bit “stretch” ah

8. Styling for ingredients

I’ve tried searching for the word “styling” in Vietnamese and it’s really banana …

To style the element, similar to the css function in jQuery is the .style attribute in JS

In addition, for the css() function we can pass an object containing the attributes that need style. Whereas to style multiple properties in Javascript, we need to change each of the remaining .style in that element.

9. Document ready event

There are many times when we need to execute an event when the entire page / DOM has finished loading, for jQuery we simply use the $(document).ready() or we can be more concise with the $() . As for Javascript, it takes a bit of effort to write a function that does this, but it’s okay, it’s just a little more difficult to “flirt”, right?

10. Work with CSS Classes

To manipulate CSS Classes in Javascript, we will need to pass the classList property of the component

We can also do this with a bunch of classes like this

Or even change the class, Javascript really doesn’t lack anything!

11. Check whether the component has a class or not?

Well, as far as I can see, jQuery is indeed more concise than JS, no matter how many people like it. But if we lose this amount, we can get a lot more.

jQuery has a built-in hasClass() function, while with Javascript, we will need a little more work:

12. Call HTTP Requests

This is definitely a very important function in any Front-end project. You may be familiar with jQuery AJAX, but don’t worry, with Javascript we have a very powerful and easy-to-use Fetch API . Fetch will give us a Promise so we can quickly process the results. Don’t worry guys, my comrades …