I agree with Vanilla!
jQuery does not fit in todays modern javascript ecosystem and its possibilities.
By abstracting away many things that do not need any abstraction anymore, you punish every user that uses a modern browser with extra kilobytes to load and to parse. If you use a service such as https://polyfill.io/, you can deliver only the fixes to browsers that need them.
For me, the only reason to use jQuery, is because of its plugin ecosystem. Which is quite sad, because you can achieve the same functionality without jQuery. However, mostly there are dependency free alternatives (See http://microjs.com/ for a list). I found, that if you find a module you need in a sophisticated package repository such as npm, chances are, they cared about proper ways of embedding the module into your project.
There are a common pitfalls
It would be unfair to say that when you use jQuery, you start writing spaghetti code.
However, jQuery encourages you to use IDs for a single case scenario. This is what you learn when you start out.
They do that at the very beginning of the homepage, where they show demos of what jQuery can do.
The documentation works in a similar manner. Everything is applied for only one element for that one case.
I can’t tell how often I see beginners applying the same functionality to #item1, #item2,… #item48, when they could just loop over elements. But they are not to blame! They do not know it better. They see jQuery as a full replacement of javascript and never learned how to loop through elements. In many cases you will reach the limits of jQuery and have to resort back to vanilla js. Instead of learning how to create functionality for an element in a component-based fashion. In a recent thread, I explained how to solve a problem as a re-usable component.
When I started to learn about which objects the DOM consisted of and how I can interact with them, it was a lot clearer to me, how everything works together. Like missing pieces in a big puzzle. jQuery can’t entirely remove the need for knowing native javascript. Even though they have their own event objects for something like a mouse click, you still need to know which properties there are. MDN is doing a great job in documenting everything around this topic.
jQuery also started the trend of starting to touch the DOM only after it is completely loaded. Which is not necessary in most cases.
That’s it for now.