When jQuery was the new thing, people loved it. It made cross-browser JS so much easier, it taught us a few new tricks, it made AJAX and animations dead simple (which was pretty tricky back when most of the world were on IE6!)
Those were the heady days of jQuery's heyday and it gained a lot of weight as it spent its popularity on better support and more features.
Then came The Smartphone Times. This spelled disaster for jQuery: thanks to slower, inferior CPUs, less memory and often less bandwidth, smartphones just weren't cut out for lugging around all the goodness that jQuery provided - especially if you were only using 10% of it.
This meant that a deep analysis of jQuery's internal elements went underway to see how things could be more modularised. And as we headed into the Golden Age of web development, many realised that the browsers have started to agree on some of the crap that jQuery The Negotiator had been helping them with all along. So they actively and rapidly trimmed the fat.
During this modularisation stage, many factions split off from jQuery to create super-tuned, single-purpose libraries that were extremely lightweight. They could still work everywhere (mostly) and they didn't eat up people's 3G/4G data allowances. They also performed better than jQuery in the browser in some cases.
But don't write jQuery off just yet. It will be 10 years old next year. In internet years that's approx. 1,000 years old. But look, jQuery is still going strong. Sure it's not as slick and fast as some of its younger cousins, but it still got some moves they don't do. And for those of us who remember why jQuery was the shiznit, we still got some deep respect for it and may still use it for convenience.
I completely understand the complaint about jQuery being the 'lightening rod' for some really bad code and practices.
All the same, for me it boils down to choosing the right tools for the right job at the right effort/price level. I'd happily use this battle-hardened library (jQuery) for quick traditional web projects.
Fast-forward a little bit and you see that browsers are becoming more and more standards compliant which means jQuery is no longer needed to solve that original pain. For probably the same reason GWT was abandoned.
With time, we learn what is good code and what is not. Since Node.js, we have developed promises to something real. jQuery rejects to become Promises/A+ compliant - they say they can break the web when changing its behavior (why do they develop 2.x?) With Node.js and a bit React.js we have understood globals and treat them now a bad thing - hey Browserify users, globals are a BAD thing! :-) Web performance matters and yet jQuery rejects to be a modular library like lodash is. This is a problem. Some people use jQuery just for selecting elements in the DOM or doing Ajax but nothing more what jQuery has to over. 84kb for selecting elements and/or Ajax is anything but smart. jQuery does not help to structure code. Spaghetti and jQuery is a de facto unbreakable word combination.
The so often mentioned browser compatibility is a legend from the past. Why should Chrome and Firefox load jQuery to fix looping behavior when only old IE needs to be fixed? We have shims and polyfills, applied selectively if requested. Nginx can parse HTTP headers and rewrite URLs to load shims for the correct browser only.
For me, jQuery was great back in the times when IE6-8 has terrorized us and Firefox as well as Chrome interpreted JS differently, compared to each other. But things have changed fortunately and I can't find any reason why we have to keep this dinosaur alive.
I'm a full convert to React.js, and when using React I only ever have to select from the DOM once
* to find the element into which we inject the React payload. For this we can use
document.getElementById, which is supported across browsers. React also handles pretty much all of the DOM manipulation. It also handles almost all of my event listeners... but if I need to attach something to the document,
So it's not that I hate jQuery, but to me it's a historical artifact. Either I don't need what it offers, or the browsers have now converged on a standard, or there are better, more targeted solutions available via npm (ala browserify or webpack).
* This is mostly true, but in practice there are a few additional cases where you need to reach into the DOM, but React offers an API for this as well.
jQuery is the king of "quick and dirty" (TM) - both by bringing ease of development to a huge community of young developers (when HTML was the thing that an up and coming geek needed to know and "dynamic HTML" was how they learned software development) and with poor plugin syntax that relegated modular design to a bunch of string handlers and magic functions, and lumping everything under a huge messy namespace.
I also wonder why so much hate for the old and reliable jQuery. After read the comments below notice that some of the most experimented devs, have some respect for jQuery besides the bad practices and the poor performance. But trying to catch up with new, shining and shrewdly named frameworks I found some trends that are equaly hateful, from angular, to vue, all of them appears to put all the eggs on performance but little or none on friendlyness.
Thats why (I think) so many novice users are reluctant to change. The old boy stills there doing the job. From my point of view (as a designer who happens to do some web) there are anything close to jquery to solve basic interactions. There are some good libraries like zepto.js that do a great job, so if you are like me trying to make the transition it may be helpful.