Reuse of CSS Selectors
jQuery came out around the time web designers and front-end web developers were getting used to creating table-less, semantically marked-up web pages. It was a lot of effort to switch from one way of coding to another. CSS was being learned by the web community en masse.
jQuery used the same CSS selectors that people were using for styling their pages to add behavior. There was no context switching when referring to the same elements.
jQuery also implemented many of the CSS3 selectors prior to browser implementations. This meant you could apply behaviors to elements you couldn’t necessarily select with CSS yet! You didn’t feel you were wasting your time learning new selectors as they’d be eventually supported by modern browsers. In most cases these selectors are widely supported today.
Unobtrusive by Design
Not only did jQuery emulate CSS with it’s selectors, it also employed the same separation from content.
If you want to hide all paragraph elements with the class of
.spoiler call the
But what if you want to remove elements from the DOM? That’s right, you call the
It’s the principle of least surprise, both because you’re using pre-existing CSS knowledge and because of jQuery’s simple method names. You’ll find yourself guessing methods rather than looking them up in the documentation. When you do go to the documentation there’s plenty of example code to see each part of the jQuery API in action.
By its design, jQuery has allowed novices and pros to improve the experiences of countless numbers of users. It took the impossible job of thinking about both the end-user and the developer and made something that checked all the right boxes.
jQuery is a testament to John Resig and team’s ingenuity. I can’t imagine how much fun I’d have missed out on without jQuery in my toolbox.
Do you use jQuery? Why do you think it’s so popular? I’d love to hear your opinions in the comments below.