Grow your CSS skills. Land your dream job.

The Use of jQuery in Tutorials

Published by Chris Coyier

A question came up in a semi-recent ShopTalk episode about the use of jQuery in tutorials.

Lately I've begun to realize how muddled the line between jQuery and JavaScript has become when learning about the language. It's hard to find a solid tutorial that doesn't include jQuery instead of JavaScript. What's your opinion on the overuse of the library?

The question was from Nick Hehr who wrote about it as well. You can listen to our answer there with this time-jump link.

If you've been reading this site for very long, you know we're a bit guilty of that. I'm not sure there has ever been a tutorial posted here that just used "vanilla" JavaScript (i.e. JavaScript by itself, no framework) rather than jQuery. Or if we have, they are few and far between. Is that a bad thing? I'm not so sure it is. But it is certainly worth discussing.

A little bit later I published an article that covered how to swap out text after an event. I covered five ways to do it. jQuery was used in two of them, vanilla JavaScript another, and CSS for the other two. Including jQuery, even amongst other options, ignited some "that's just overkill" style discussion:

So here's how I feel about it.

I Write What I Do

This blog is a reflection of things that I learn. I use jQuery a bunch. So when I translate things into a tutorial, I do it how I would do it.

I have only worked on a handful of sites that didn't use jQuery in the last many years, and those that didn't used some other library or just didn't need JavaScript at all.

jQuery is JavaScript

Literally. Using jQuery is still literally writing and working with JavaScript directly. jQuery just makes it easier and lowers the bar to entry. I know loads of good JavaScript developers who started with jQuery. Just like there are loads of good guitar players who started as a Dave Matthews Band Cover Band Cover Band.

Tutorials are Concepts

The goal of a tutorial is to teach an idea and do it fairly succinctly.

Let's say you wanted to select a button with a certain class name and change some text when it is clicked. To avoid any dependancies, maybe you do document.querySelectorAll(".my-button"). But that will return an array so you need to use [0] at the end of it to target the element and attach the event. Or should we just use querySelector instead which selects the first? Or should we run a loop or map over the array to bind to all of them? Or should we have used getElementByClassName? What about browser support? Should we talk about polyfills for that? Or should we just add an ID and use getElementById since that's likely a best practice?

Or, we could just do $(".my-button") and get on with the tutorial. All of that stuff is interesting and worthy of discussion, but not in every single tutorial every single time. jQuery allows the concepts in tutorials to shine without getting bogged down in detail.

The Future

Right now I feel like jQuery is still a pretty important part of the front end stack, well worth learning, and still appropriate to use in tutorials.

But things will change on the web. How JavaScript is presented in tutorials will change as well. Probably. We'll change with it. Probably. I've seen comments floating around the last few months like "I feel like if I'm using jQuery I did it wrong." which I've never heard before and may be harbingers of change. The newschool approaches of Ember/Angular also loom.

Comments

  1. David Benson
    Permalink to comment#

    Hear hear! Just get on with it, I say. You are quite right.

  2. jQuery is a well maintained and well documented library. Reckless abandonment for the sake of ‘javascript purity’ is foolish in my opinion. Truth of the matter is, if you are not using jQuery, chances are you are re-writing jQuery in your own library.

    As for the future of Javascript as MVC frameworks, these are not replacements for jQuery in all respects. As developers we need to tread cautiously in response to the ‘new hotness’.

    • Jeremy
      Permalink to comment#

      I completely disagree. Take a look at my comment below (once I finish writing it).

  3. Stephen Rushing
    Permalink to comment#

    In my opinion, the jQuery API has established the most efficient way of working with the DOM. I love javascript, but it just wouldn’t be the same without jQuery or a similar API like Zepto. Browsers are finally providing more similar methods, like querySelectorAll, but then what do we do with those queried elements? We know event binding and element manipulation with jQuery is efficient to code and cross-compatible with browsers, so regression testing would be a waste of time at this point. Unless someone can show me an API as easy to learn with more concise syntax, I’m not interested :)…if it ain’t broke…

  4. Chris C
    Permalink to comment#

    For me jquery is a great way to move fast and test if a concept works. Afterwards it can the be investigated to improve, refine and refactor but to get a commit banked jquery is still a valid option.

  5. If you only know jQuery, may God have mercy on your soul when (not if) you end up working on a project that doesn’t use it, and you’d better pray to that same God you’re not on my development team when (not if) it happens.

    • camper67
      Permalink to comment#

      Hi Scott- Respectfully, considering the disastrous state of front-end web development (jquery or not), you are coming on a little strong here (and below).

      I checked your CV, and it looks like the minivegas site uses both jquery and wordpress. Another one says “you need an ipad to experience this site” (but also uses jquery). A third uses jquery and modernizr (another abstraction over js).

      So you have some explaining to do, and I’d respectfully suggest you not come on so strong with opinions you do not seem really agree with yourself :-)

      I mean this comment respectfully, and please take it constructively.
      thanks!

    • Jay Large
      Permalink to comment#

      @ Scott Kosman

      Cool story bro…

  6. Ian
    Permalink to comment#

    As a newb (I think I will forever be a newb sometimes), it is a struggle to find vanilla js tutorials. On one hand if a jquery tutorial shows me how to accomplish something that is fine and I’ll take it but on the other hand it has been a struggle to keep from being one of those devs who knows jquery but does not really know js. I have to put in extra effort to find articles that don’t use jquery. Stackoverflow questions seem to always have jquery answers sometimes even when the op question specifically asks for pure js. So my point is, I think it is fine that you use jquery in your tutorials but I think the industry as a whole needs more good quality, detailed, advanced, vanilla js learning resources.

    • The “OMG JUST USE JQUERY” crowd on Stack Overflow drives me batty. Every once in a while I go on a downvoting spree whenever someone does just what you’ve described: giving a jQuery-based answer when not asked for.

      And as for this: “I think the industry as a whole needs more good quality, detailed, advanced, vanilla js learning resources” all I can say is YES YES DEAR LORD A’MIGHTY YOU HAD ME AT HELLO YES. Places like Stack Overflow (despite my last paragraph) and MDN and such are great resources, but what the industry really needs (imo) is a good “Here’s How To Do Common jQuery Tasks Without Using jQuery” resource. There was a great starter article on this over at netttuts in early 2012 but we definitely need more of this.

      Maybe I should start a blog.

    • Jeremy
      Permalink to comment#

      @Scott Kosman I completely agree (with your comment above and reply here). Scroll down to read my mini-rant-but-really-truly-honest-issue-bloated post.

    • Chris C
      Permalink to comment#

      Fellow newb here. My plan is to learn vanilla JS as thoroughly as is practical while learning JQuery. I’ll have a practical and working knowledge of vanilla JS, BUT I’ll probably be using JQuery the majority of the time. It’s just so much easier.
      Addressing your concerns on finding JS articles: I don’t know about you, but I love books. There are PLENTY vanilla JS tutorial books that can get very advanced. I don’t see the problem with finding JS resources if you’re looking in the right place.

    • philtune
      Permalink to comment#

      Echoing Scott, Stack Overflow does get crazy about falling back on jQuery when that wasn’t asked for. I usually don’t mind, but much of the time I’m looking up a vanilla method for concepts I don’t use regularly, and instead I get a suggestion for a jQuery extention. I like love jQuery–it should definitely be use in tutorials when terseness is valude–but making projects dependent on jQuery extensions bug me for some reason. I don’t really care for extentions other than jQueryUI. (And in fact, many times I find jqueryui to be burdensome and I write my own UI functions instead.) Using a buttload of extensions feels like building a car with components from different parts of the world with different documentation in different languages… AND those components may become outdated in just two years time. It’s just messy.

    • Ian, if you’re looking for a GREAT tutorial set, check out JavaScript for Professional Web Developers by Nicholas Zakas. It’s a 10, and all you’ll need to go from noob to moderately advanced.

      http://www.wrox.com/WileyCDA/WroxTitle/Professional-JavaScript-for-Web-Developers-3rd-Edition.productCd-1118222199.html

  7. Permalink to comment#

    I’m guilty of this, mainly because I find jQuery easy and everything seemed to take me an age in vanilla JavaScript.

    That said it does seem crazy including an entire library just to achieve something that can easily be done in JavaScript.

  8. davide
    Permalink to comment#

    I think the issue today is when people starts learning JavaScript. If someone decides to start learning js, they will buy books for example the “Javascript the definite guide” which includes few jQuery chapters. It will ask questions on stackoverflow and even when asking simple questions such as: “how do I toggle a css class” people will answer using jQuery.

    I personally think that firstly you should learn JavaScript, understanding scope inheritance, best practices etc… then “upgrade” to jQuery since it speeds up things but the mindset has already been created. I’ve seen many times people doing:

    $(‘#divId’).each(…)

    when if you’d know a little of JavaScript (or HTML) you would know that there can’t be more than one div with the same id inside a page.

    It seems that jQuery is somehow becoming a completely parallel language instead of a ‘on-top’ language compared to JavaScript, it’s more easy to use and works on any browser. I wouldn’t be suprised to see in the near future browser makers which will optimise jQuery routines in their engines.

  9. Jivanysh Sohoni
    Permalink to comment#

    Well jQuery was the “JavaScript” I learned at first but then as deeper I went into it, I started paying attention to the pure JS as well. Using jQuery is just finishing it off easily and without any hassels.

  10. Jeremy
    Permalink to comment#

    The points you come up with are fine, however there’s still a lot of room for the “say NO to jQuery campaign!” Before I go on, let me get something straight: jQuery is great. I’ll use it when I need to and it’s great for those who understand JavaScript and need a little extra help.

    That really brings us to your second point: jQuery is JavaScript. Exactly. So, why should people who don’t know how to use JavaScript be using jQuery? I’m not saying you (Chris) don’t know how to use JavaScript, I’m saying there are a few out of the countless people who read your blog that don’t. This becomes a major issue when newbies begin to search for things like the article you wrote (linked to above), or in videos like this where jQuery is included simply to append text (what!?) to the page. Eventually, readers will begin to simply include jQuery because of a false, reversed belief like “JavaScript is jQuery.”

    Now, the idea that “JavaScript is jQuery” (instead of “jQuery is JavaScript”) can’t get too harmful (aside from blatant ignorance towards important principles that jQuery-only-users won’t learn) until people begin to actually write their own jQuery instead of simply copying-and-pasting. One could only imagine the outcome of this disaster: ugly, terrible, absolutely barf-inducing code. This elevates into users who think they know JavaScript (because JavaScript is jQuery) coming into the community, spreading bad habbits, and asking for help regarding “better coding practices,” “code optimization,” and “OMG Y THIS NO WORK!?”

    …Here comes the uproar about “reinventing the wheel” and “writing a whole new JavaScript framework library (get it right!)” To be honest though, attacks like this are shouted even when encountering the simplest things, like appending text or removing an element. For me, when I need an animation, sometimes I’ll use CSS3, sometimes I’ll write a 5-line piece of code (Really! It doesn’t take much more than 5 lines), and hey, sometimes I’ll include jQuery. When it comes down to production, as long as you know what you’re doing, you can go ahead and do it. Including jQuery isn’t even that harmful when it comes down to just the HTTP request because it’s cached so often. The biggest issue is those of us who don’t know how to use JavaScript with the willing attitude that “JavaScript is jQuery.”

    (That’s not to say I don’t love your blog and check it everyday for new articles, links, or videos… FYI)

    • What’s wrong with “asking for help regarding ‘better coding practices’,’code optimization’?

      Look, people have different learning styles when it comes to, well… everything. I’ll leave my personal example below. According to what I’ve gathered from your comment, I did something wrong. Just remember, learning is by knowledge coupled with practice/experience, and through practice/experience there is success and failure. The beauty of learning something like the web is that it’s completely open.

      Back when MySpace was hip and cool, one day I saw that someone else posted a link that didn’t have all that funky “https://www…” garbage, but the link was the actual title of the page in their post. I wondered “can I do that too?“. Did a google search and came across a snippet of code for <a href="http://yoururlhere">Your Link Title Here</a>. I had no idea what “a href” was. I copy/pasted it (gasp!) and it worked great (louder gasp!).

      Then the next day, I wanted to post another link. And the next day, and the next… finally I said to myself “what does that ‘a href’ do?” Googled some more and found out. The next week, I tried to hand write it instead of copy/paste. And it failed. So I went back, copy/pasted, compared, and figured it out.

      That inspired me. That stupid failing social website that looked like geocities on crack and my copy/paste learning inspired me to learn more about coding the web. Today I have a full-time job coding the web, and I’m still learning, just like everyone else.

      Please do not dictate learning styles or approaches. And please, for the love of the open web, do not discourage students asking for help.

    • Jeremy
      Permalink to comment#

      Maybe I wasn’t clear enough. Help is great. Questions are better. Curiosity is fantastic. What’s not good is when people request help and questions when the resources are all right in front of them. Unless you’re color blind, you shouldn’t be asking which ball is red and which is white. jQuery promotes this behavior.

    • Jeremy
      Permalink to comment#

      Also, excuse the double post, but questions regarding better coding/optimization in the jQuery category usually originate from copied & pasted code from the internet doing over-complicated things while users who are asking these questions don’t even know a cent about what they’re asking (not to mention the grain of sand they put into researching it).

    • Resources are available for learning thermodynamics… so I should never ask questions when resources are available? And why can’t a question/answer be a resource? You are, again, dictating a learning approach. Not everyone learns by reading W3C or ECMAScript spec or api.jquery.com. Some learn by coaching, some learn by reading, some learn by listening, some learn by seeing, some even learn by copying first.

    • Jeremy
      Permalink to comment#

      Either I still haven’t been clear enough or you’re twisting my words on purpose. Take the calculator approach: using a site like wolframalpha.com is fine. Using a TI Inspire calculator is fine. Using a calculator is fine. But should when does it become too much? When you use calculators for things you don’t know how to do, and question why something isn’t working how you want it to. This sounds a little farfetched, but keep reading.

      Say I want to use basic multiplicaton functions on a calculator. I end up typing something like 10/0 because I want infinity, just to find out that dividing 10 by 0 gets me an error.. what!?

      I think if we all typed this into a calculator without knowing how to divide, we’d all be pretty confused. The first time I found out about this, though, a teacher was right in front of me, teaching me how to divide. You need to learn how to divide before questioning why a division works the way it does. Teachers are fine — great even. That’s why we need to learn from them. If we just used calculators, we wouldn’t know how to divide, we wouldn’t know the errors, and we wouldn’t be able to make calculators and lesson plans for future generations.

    • Ryan Boone
      Permalink to comment#

      You need to learn how to divide before questioning why a division works the way it does.

      What about speaking? We don’t learn proper English (or whatever your mother tongue may be) before we learn to talk. And yet we become prolific talkers, all because we are emulating those around us without ever knowing what we’re saying. Yes, we learn grammar, but only after years of talking.

      Your approach may be right for you, but to others, it can be prohibitive. It can become an excuse to never build anything because one may not have “learned enough.” Personally, I’m all for anything that lowers the bar of entry to anyone that’s curious about coding. It promotes creativity and interest in a growing field. And, yes, there will be people that make mistakes, and thankfully we have a rich community of developers to help steer people in the right direction.

    • Jeremy
      Permalink to comment#

      Your perspective is an interesting one. Before I say anything else, let me establish that I’m not trying to prohibit or prevent people from learning how they want.

      As for speaking, you’re right. We learn to speak in segments, words, mumbles, and cries, but that’s the natural order. Just like how we learn JavaScript. We don’t learn to speak by using poetry, or texting acronyms, or writing novels… In the end, we create our own sort of language through the way we speak (i.e., we all speak differently, just like we all have different ways of programming).

      Now to address the learning perspective. In the past, I’ve helped thousands with programming on forums, Q&A sites, and in chat rooms. In my experience, people don’t understand until they literally understand. There have been help vampires who repeatedly ask the same question (and you better bet this question was answered the dozen times it was asked) using frameworks like jQuery. But then there have also been the ones with true intentions to learn. They’ll start with a rather annoying help-vampire-ish question, and then they take suggestions. I’ve literally seen their avatars (you can’t see eyes in a chat room) light up once they understand why a jQuery function works the way it does, and they only understand it after a simple walk through vanilla lane.

      I hope this makes sense.

    • Ryan Boone
      Permalink to comment#

      I would say JQuery is more like slang, not poetry. There’s a lot that’s not being said. And we learn slang before we learn “proper” English. It’s more efficient to use and communicate with, and as long as the context is correct, it’s the preferable mode of speaking. It may not make you look smart, but it gets the job done.

    • Jeremy
      Permalink to comment#

      I would have to disagree with “jQuery is more like slang.” However, let’s take that approach to still prove why jQuery shouldn’t be used for simple-minded things. Say Mr. Smith is teaching the class about verbs and nouns. I doubt he’d grab a sentence like “I LOL’d at today’s featured post, omg.” He’d choose a grammatically correct sentence so students can understand first what a verb is. After that, he may then insert the “LOL’d” used as a verb (or verb phrase) to show how elements can be switched around.

    • Permalink to comment#

      So, according to your analogy: jQuery = LOL.

  11. Rob
    Permalink to comment#

    In my mind part of a successful blog article, particularly when we are discussing code; is to offer the tutorial in away that is accessible to the greatest number of readers. Raw JavaScript certainly has its place… but when jQuery is quickly becoming the go-to library well… why WOULDN’T you show what the code looks like in jQuery?

    Is it going to be overkill in some cases? Sure. If I’m already using jQuery in my project though, I am more inclined to continue using jQuery syntax where possible so that my code is consistent. Is my site going to take a performance hit? That depends on the code I suppose, and then of course is that hit significant enough to warrant changing the code out?

    There is a certain level of elitism and snark with certain “jQuery isn’t necessary for this” arguments. At the end of the day there is no project where jQuery is NECESSARY. jQuery is about simplifying your process and giving you a nice foundation from which to work (because who wants to reinvent the wheel), not magically offering you something you couldn’t do previously with plain old JavaScript.

  12. Stephen
    Permalink to comment#

    You are doing fine with your tutorials. I follow the 80/20 rule on this. 80% of projects just need to get the cross-browser work done, so developers can use jQuery or another library to help with their work. The remaining 20% are projects where native Javascript is actually warranted.

    As noted in one of your other articles, once the world stops using IE9 and below, you can emphasize more of the W3C and HTML5 native methods, properties, and objects, but until that time, jQuery and its ilk still have their place in the development world.

  13. I find the web crowd to be an interesting one…on one hand the cool web kids say go use a CSS pre-processor…it makes writing CSS easier…and takes you away from writing “pure CSS”…and then this same crowd says…don’t use jQuery even though it makes writing JavaScript easier and instead write pure JavaScript…real developers would never use jQuery…

    I use jQuery because it makes writing JavaScript easier…It takes a lot of the cross browsers issues out of the equation so I can focus on the logic of my code….I can do things likes like select elements by class name and toggle classes with a few characters of code…perhaps it is milliseconds of time slower than pure JavaScript but for web site work…which is what I do, it is fine…

    Chris…please continue to use jQuery in your tutorials…personally I like the look of jQuery code compared against the very verbose look of pure JavaScript code…

    • I agree with you 100%, and I use jQuery in almost all my projects, but CSS preprocessors are different. They compile to pure CSS BEFORE they are pushed to the server. That means no performance hit at all.

      If jQuery compiled to straight JS and we push that to the server, then it’d be a fair comparison. Actually, if anyone out there is looking for a sweet new tool to build, you’re welcome for this free idea. ;)

    • Rob
      Permalink to comment#

      @Josh – I think that’s an excellent point on the end-result differences though it does sort of dismiss Michael’s point that pre-processors don’t necessarily START OUT as pure CSS so someone who started out writing CSS through a pre-processor might have similar logistical issues as jQuery -> JavaScript. The most obvious issue to me would be assuming pure CSS allowed for nested items ( &:before, etc)

      One question I have though… and maybe it really is just “Depends on…” would be how much of a performance hit does jQuery really make against pure JavaScript? Are we talking milliseconds of processing time? Is it significant enough to say “Yes JavaScript really should be used here” or is it more “I prefer…”

  14. Patrick S.
    Permalink to comment#

    I’ll take the time I save reusing code to do other things, like have fun. Cheers!

  15. In a world of client-driven demands for unicorn web designers, I appreciate one who maintains a T-shaped specialization in front-end design. If I wanted to learn more about the nuances of writing in Javascript v. Jquery, I would go to jquery-tricks.com or javascript-tricks.com; but I don’t. I want to be a damn good at CSS3 and HTML5 at the moment. So, Chris, keep doing what you’re doing.

  16. Fabien
    Permalink to comment#

    @Jeremy: You should have given my talk last week on this topic (speaker deck slides).

    This is definitely a hot topic right now. There is no denying that jQuery is great and has made the lives of front end developers easier for the past 6,7…9 (how ever many) years. But most of the headaches from browser support which were crucial at that time, are far less problematic today.

    Learning jQuery because it’s easier than JavaScript is the wrong approach. That doesn’t mean that using jQuery is wrong, but not understanding the tools you use will lead to many unexpected problems.

    jQuery is JavaScript, JavaScript is NOT jQuery

    sums it up for me

    For tutorials, I would rather see jQuery (or any other library) free options – unless what you are trying to achieve would simply be unreasonable without.

  17. There is nothing “vanilla” about the DOM API, it is a library just like any other, except it happens to be included by default with the most common JavaScript runtimes, those found in web browsers. Conflating the DOM API with the JavaScript language is no more correct than conflating JavaScript with jQuery’s API. It’s just that the former conflation is the older one, and so feels more natural.

    The peculiarities of client-side development seems to lead some JS developers to treat libraries and frameworks with a suspicion not often found in server-side programming or other more traditional types of development. The truth is, all your code, even if you’re writing assembly language instructions to execute directly on a CPU, is still an abstraction over some deeper complexity, and with modern application programming you are always working with APIs that wrap APIs that wrap APIs. Whether those APIs are provided by the runtime or by a third-party component shouldn’t matter. What’s important is: Do they work? Do they help you solve a problem? Are they well documented and supported?

    Most server-side devs will easily take a dozen or more dependencies on libraries and frameworks that help with HTTP processing, content management, data serialization, persistence, encoding, etc. Should PHP, C# and Java devs, who find themselves eyeballs deep in the abstractions of some chosen web framework be casting them off to start wrangling raw sockets because it somehow more “vanilla”? No, that would be madness.

    If you don’t need jQuery, by all means don’t use it. If you will gain a measurable, important performance gain by not using it, then don’t use it. But don’t martyr yourself to a meaningless notion of programming purity by rejecting one API to use a worse one. Shipping good software is hard enough already. Take sensible advantage of every framework, component and library that can make your life easier and make your product better.

    • Cp
      Permalink to comment#

      It is an outrageous claim to simply say that writing vanilla JS is inherently better for performance. Try writing a selector engine that both outperforms SizzleJs (jQuery’s selector engine) and isn’t a huge waste of time.

    • Cp
      Permalink to comment#

      I agree with you entirely — I did not mean to write that as a response :(

    • Sean
      Permalink to comment#

      +1000

    • MaxArt
      Permalink to comment#

      @Cp Man, using Sizzle altogether can be a waste of time!
      For 99% of the cases, you can select elements without CSS3 (don’t tell me you really need that extended :not() syntax…), and for the rest… you probably won’t even need to select those! Or you can do it faster with simple Javascript iterations.

      Well, anyway, you can rely on Sizzle, after all. But you can use Sizzle alone, without jQuery :) I did it to provide a polyfill for IE7 (for querySelectorAll) and IE8 (for matchesSelector). Works great.

  18. Dan Jones
    Permalink to comment#

    It would be wrong to teach someone Javascript by using jQuery, but tutorials are not introductions to the language. They’re for teaching new stuff. If you’re reading a tutorial, you already know some Javascript, and since there’s a decent chance you also know some jQuery, it seems fine to me.

  19. Jake
    Permalink to comment#

    I think it’s fair to say that some (not all) JS developers feel like their “turf” is being invaded by folks, designers in particular, who rely completely upon JQuery to build a dynamic element into their site. I see an awful lot of JS purists who are incredibly adverse to people relying upon JQuery, but have no qualms about pulling in Bootstrap each time they start in on a project. While I won’t argue that JS is, for the most part, ‘deeper’ and more complex than HTML markup and CSS, the theory of good design is just as complex as any JS I’ve come across.

    So while it certainly behooves JQuery novices to learn some fundamental JS, I think the same can be said for developers who rely on Bootstrap to ‘prettify’ their sites. How much time is spent learning typography, responsive design, or color theory? Are there some fundamental differences between Bootstrap being prepackaged CSS, vs JQuery being written on top of vanilla JS? Sure, but they ultimately provide the same thing: A bridge to a discipline that might otherwise be foreign to you, or even outside of your reach entirely.

  20. Carrie
    Permalink to comment#

    I’ve used JavaScript since the late 90s, but am certainly no expert (and struggle somewhat with the more modern OOP approaches). When I started using jQuery a few years ago, things really began to click and my capabilities have improved at a faster pace.

    So while some purists may say jQuery is only for beginners, I think it depends on your learning style. And if being easier means that more designers take the plunge into interactive development, how is that a bad thing? Why put up MORE barriers to entry by making things harder?

  21. I agree with the noobs that when starting out, if you’ve got the right mentality, understanding JavaScript before using jQuery is important. And you’ll always have noobs in your audience when writing tutorials.

    But, is it worth making an example 10 lines of code instead of 5 just to stay pure? I’d say no. Should you assume that ‘everyone’ knows what jQuery is (yet)? I’d say no.

    I wrote a post a while back Replacing jQuery. This was off the back of my second non-jQuery project in a row, (both small-ish websites with no DOM manipulation or AJAX). And I got about 50/50 positive/negative comments on the concept of only using jQuery when it’s truly necessary.

  22. I find it exceptionally annoying trying to find information relating to Javascript solutions through google search! It’s mostly jQuery out there!

  23. Rumpel
    Permalink to comment#

    WTF
    The framework choice should be subject to the project requirements instead of toolkit religion.

    What really astonishes me is the total lack of knowledge about prototype.js in this thread. I believe it’s the counterpart to jQuery. JQ uses a functional approach, whereas prototype.js extends the language itself. JS is a prototype based language and as such quite exotic in our zoo of programming languages. Prototype.js is not the only framework using prototype extension, but probably the most developed one.

    If you’re seriously interested in programming and not just searching for a marquee replacement, then you should definitely learn all three: JQ, prototype.js and native JS.

  24. Ico Dimchev
    Permalink to comment#

    As a developer I need my code to work across all browsers. Also, I need to develop things fast… jQuery helps me writing faster, more clean code that executes ( almost ) the same across all browsers. I see nothing wrong with it. Well, it performs slower than vanilla JS, but in this life everything is compromise :)

  25. I tend to use jQuery a lot when I code, but that is only because I feel more comfortable with it than vanilla javascript in many cases. It’s easier for me to get something functional up and out there now, than to wade through pages of StackOverflow to find appropriate answers that serve my specific needs.

    Don’t get me wrong – if I encounter a situation that I know I can handle with vanilla javascript – then I don’t include jQuery. It’s easier on page load times.

    I think that if you know jQuery and you feel comfortable using it, then there is nothing wrong with that. It’s not any less impressive, and functions the same, or better.

    I have seen sites and known developers that refuse to use jQuery and other libraries for whatever reason. That’s fine with me, it’s their site and their code, not mine.

  26. Jeff Carlsen
    Permalink to comment#

    I used to not like jQuery in tutorials. I didn’t understand the syntax. So that is a risk. Now, I’m rather fluent in JavaScript, and I don’t mind.

    Still, I think it’s best if you limit jQuery to DOM selection and events, and don’t overuse chaining.

  27. Rob
    Permalink to comment#

    While I agree you should write what you know (it’s your blog after all!) it is a pet peeve to see just about every tutorial or stack exchange answer about Javascript have only jQuery solutions, especially if you’re working in mobile where there are many frameworks, and adding jQuery if you’re not already using it, is too much of a memory footprint to ask a mobile device to handle — one framework is enough.

    It’s especially ridiculous sometimes when you see answers that are more complicated in jQuery then in plain Javascript. Those are always amusing to see.

  28. Permalink to comment#

    Couldn’t agree more, especially the part about getting bogged down in details. I pretty much said the same thing in this post, which too was a response to someone else:

    http://www.impressivewebs.com/why-use-jquery-simple-tutorials/

    Although a few statements I make in that post were, in retrospect, a bit overly bold, I’ll just quote two paragraphs that still reflect my current view:

    Finally, the other reason I think it’s okay to use jQuery in a post like that is that, well, the point of those posts is often more about principles or concepts, not code architecture, cross-browser issues, or other peripheral matters that would, in my view, distract from the point of the post.

    So, although a discussion of some of the extra code used with raw JavaScript might have its benefits, I think it’s better to stay focused on the main point of the post, and not get clouded with other more complicated issues.

  29. Kamaboko
    Permalink to comment#

    Great topic! As a recruiter I frequently have junior front-end dev’s (e.g., two to three years of exp) tell me that jQuery and JS are exactly the same. (Sigh). My follow up question to that is, “Well, if for some reason jQuery didn’t provide the solution you were looking for, could you develop a solution in pure JS?” I tell them the reason for asking is b/c the companies I recruit for require pure JS testing as part of the interview process. Hearing that, the answer I get about 95% of the time is….”uhhh….hmmm….well…uhhh….I could give it a shot”. Typically senior devs (e.g., 10+ years) say, “bring it on”.

  30. mkdesign
    Permalink to comment#

    .

  31. I think javascript deserves its own tutorials without jQuery. I started off with jQuery alone but then realized I should have learned vanilla javascript properly to better understand the language and effectively use jQuery or other javascript frameworks. With javascript on every platform these days, it seems that one should properly learn javascript alone. I have also written a post in this regard on my blog:

    https://sarfraznawaz.wordpress.com/2012/02/12/learning-javascript/

  32. Woodsy
    Permalink to comment#

    Completely agree that you’re fine to use jQuery in examples as it’s simple, succinct and trustworthy. Those unfamiliar with vanilla JS aren’t bogged down by it’s eccentricities and can just enjoy the article (normally css focused anyway!)

    On a wider note, I can’t help thinking all of the vanilla JS evangelists on here are a little optimistic. The vast majority of enterprise development cannot discount IE8 and below so you NEED jQuery to make your life easier. If you have anything remotely complicated that needs to work in an old browser, save yourself the hassle and write it in jQuery, which is simple to learn and has great documentation.

    Recently I’ve been fortunate enough to be working on an app that only needs to work in IE10 and Chrome. As a firmly entrenched jQuery enthusiast I knocked out a bit of the functionality in that and refactored out the jQuery where possible once I was happy with the solution. It’s quite intuitive and doesn’t necessarily need every tutorial to be rewritten sans jQuery.

    A bit of pragmatism goes a long way here and you have plenty of time to learn both flavours of JS. IE7/8/9 aren’t going away from your company’s stats any time soon!

  33. Brad Metcalf
    Permalink to comment#

    I think tutorials should inform the reader on how to do things right and use great habits. Teaching them in jQuery helps them do that. For example, in JavaScript yeah, you could write something in one line. But then many varibles come into play like cross browser, what if this happens, what about blah. And sudddenly that becomes 10 lines easy. Maybe even more if you gotta do a wicked cross browser work around for several other browsers. Someone finds out hey, I can do this in one after all, and without fully understanding it may cut out a bulk of the code. jQuery usually has all that covered. Luckily for them, the majority of projects will allow them to use jQuery and they can get away with this. I don’t know of a sane project manager that would be against it and normally clients don’t set language tech specs beyond choosing Ruby, PHP, Python, ASP giving the developer their choice.

    But I must say, not all. I have worked on projects that required JavaScript only and jQuery was not an option. But these were projects that used JS as an external scripting language and was not a web site or web app.

    • Brad Metcalf
      Permalink to comment#

      But this being said, if you are serious about web development. Learn JavaScript. When we interview devs that say they know “jQuery” but are not so good with JavaScript, 95 percent of the time they do not get a call back.

  34. MaxArt
    Permalink to comment#

    When I started learning Javascript, there were already several Javascript frameworks around. I refused to learn and use them because it felt like someone else was working for me – and that bugged me.

    It may sound silly nowadays, but I felt the need to dive into the language deep. I had to learn how Javascript works, and learn it in details. That led to gain a deeper comprehension of the language. And why jQuery was so slow in many task that I considered trivial.

    jQuery doesn’t allow that. jQuery is almost like a new language, in coding philosophy and syntax. There are things you can do in vanilla Javascript, but using jQuery you should use a totally different approach to stay consistent – without any particular gain, in coding length or even less clarity.

    Also, jQuery has its own working ways. It could lead to huge memory leaks or become a CPU hog if not correctly used, even in more modern browsers (Twitter learnt it the hard way). That’s why it’s like a totally new language. How many times have you seen some beginner do something like this?

    var text = $("#field").val();
    $("#field").val(text.toUpperCase());
    $("#field").css("color", "red");
    

    And so on with $("#field"). Or even scarier:

    for (var i = 0; i < $("a").length; i++) {
        $("#output").text($("#output").text() + " " + i);
    }
    

    Don’t get me wrong, jQuery is awesome. It’s the weapon of choice for any site open to the vast public of the Internet. Back in the days, forgetting about IE legacy methods and a lot of other incompatibilities and inconsistencies among browsers was liberating, and it still is. And jQuery does save quite a lot of code typing. But it has its caveats.

    First of all, it’s slow and memory expensive. So it’s not good for everything. Not for applications that rely on high performances, like many using the latest web technologies.

    So, it’s pretty understandable that many developers actually want to know a vanilla Javascript solution – because maybe they’re not using jQuery at all.

    Luckily, most developers actually know a bit of jQuery – enough to understand what’s going on. And most of the examples and tutorials use jQuery in a trivial way, usually to save themself the pain to create a polyfill for adding event listeners, and not just relying on addEventListener and read the complaints of some newbie that doesn’t understand why the code doesn’t run on IE8.

    So, actually, if what you want to do with Javascript is simple enough, you can go with jQuery: the beginners would probably use it, while more expert coders will have no problem understanding it. But always describe what you’re doing in details, i.e. in (almost) every line of your code. Something like $("#container").find("input") isn’t exactly trivial for someone who isn’t used to jQuery.

    (The best would be writing both version of the code – with jQuery and without. But that would be time consuming.)

    And if you’re dealing with some modern web technology, always go for vanilla Javascript – and maybe add some like “you can save some pain using $(…)”.

    • Cp
      Permalink to comment#

      “I can get a hell of a good look at a T-Bone steak by sticking my head up a bull’s ass, but I’d rather take the butcher’s word for it.”

  35. As a Web Designer / Front End Developer:

    1. jQuery is a lot easier to learn than plain JavaScript, this means I can accomplish things easier, faster and a bit more scalable because it’s more likely that the next Front End Dev that touches my JavaScript knows more jQuery than plain JavaScript.
    2. When the *jQuery* code starts getting too complex for me, that’s when I stop and let my Web Programmers folks take over.
    3. There’s nothing like reading a tutorial that uses jQuery instead of vanilla JavaScript.
    4. Stack Overflow rocks x 1,000, I’ve learned so much about jQuery from SO than any other website.
    5. I don’t feel “guilty” at all from using jQuery in every site that needs JavaScript. I will keep doing it until I don’t have to deal with IE7 and IE8 anymore, and then I will start using jQuery 2.x or Zepto.
    6. Truth be told though: If a fellow Web Programmer comes to me and says “Hey amigo, I think this is better if we do it with plain JavaScript for these, and these reasons…”, I would more than welcome such advise. However, the chances are very slim of that ever happening.
    • The markdown is not working at all, lol.

    • Ramon
      Permalink to comment#

      100% agree

    • Feel free to let me know how it’s broken. From what I can see from what you posted it is interpreted as Markdown correctly.

    • MaxArt
      Permalink to comment#

      It depends on what you mean with “faster”. If you mean “faster to develop”, you’re probably right. But it’s a no-no if you think it’s “faster to execute”.
      And that’s a wise thing to do.
      Oh yes, there is: reading a tutorial that uses [insert some JS frameworks here]. What? You’re not used to [insert the aforementioned JS framework]? What a shame. (I hope you get my point.)
      Indeed, but sorry, I don’t get your point here. Are you implying that there’s a good place to ask and learn jQuery? The same applies to vanilla Javascript, you know.
      / 6. You don’t have to feel guilty because you’re a web designer, so you’re not requested to know Javascript in depth. That’s understandable. But what if the web developers tell you: “We’re using [insert the previously named JS framework], please use it too”?

    • MaxArt
      Permalink to comment#

      And yes, the markdown failed miserably on my message :(

      It was so good on the preview, and yet it lost all the numbers when I sent it.

      Chris, please help :(

  36. Would the amount of resources we have to hand be so rich and readily available if jQuery wasn’t so prevalent in the community?

  37. Permalink to comment#

    Nice cover up..

  38. caseybaggz
    Permalink to comment#

    I’m a noob and have started with JavaScript, but like using jQuery more because it’s a little faster to code. Interestingly enough though, I was pondering today if it is better to use JavaScript instead since it was the founding father. Either way, I would have to agree with both parties that for demo purposes, I think the use of jQuery is fine (everyone knows it, and for the people who understand vanilla, will more than likely know how to adapt the syntax to be able to script it in JS), and that JS definitely needs as much attention concerning tutorials, etc. that jQuery has.

    Both are important and could be argued that one is better than the other. If it works and it makes since within the context, why not use it? Definitely not a big enough deal to get all raging about.

    Be cool, support each other, let’s grow our community for the better!

  39. Ben
    Permalink to comment#

    I think that using jquery is just fine, though it might be beneficial to make sure that people understand jquery is a library/framework, and not part of the language specs. I see this the same as I see any other language. You learn the basics of java, but you also learn about apache-commons, java FX, spring, and other libraries that make your life easier.

    A well-rounded programmer knows the language and the available libraries out there.

  40. Marco
    Permalink to comment#

    Bitching about why use jQuery is like bitching why use WordPress because there are other CMS’s out there with tons of more features, more this, more that, etc.

    Newsflash. They are popular. People seek them. It’s a demand and supply kind of thing.

    • MaxArt
      Permalink to comment#

      Really? Are you comparing the Javascript – jQuery debate to a comparison among CMS’s? That’s totally not the point of the discussion.

      As some may notice, jQuery is Javascript, so Javascript is, by definition, more popular than jQuery. If you take popularity into account, there would be no doubt.

      The point is whether using a Javascript framework or not. It could be jQuery, Dojo, Prototype… jQuery is used because it is the most popular framework. But we’re not talking about choosing a framework.

  41. Hendra
    Permalink to comment#

    I don’t understand why this is such a problem for Javascript purist. If you read a tutorial about something using jQuery, and you know how to do it in vanilla Javascript, then… use Javascript. Why bother attacking someone for using jQuery? Some people don’t like vanilla Javascript APIs, and jQuery wraps them in a much more sensible for them to use, so what’s wrong with that?

    There’s a reason why jQuery remains very popular, and that’s because people like them. It helps them achieve what they want, and that’s that. Frankly, I’d rather see someone who may know nothing about Javascript but can create brilliant stuff with jQuery. Sure, Javascript purists will then say “I can do it with vanilla Javascript, too”, but then again, it doesn’t matter. Using jQuery, that someone creates something brilliant. Without jQuery, he might not.

    I think the rise of Javascript popularity even owes a lot to jQuery too. Without jQuery popularity, I don’t think Javascript will be at the state it is right now. Even the most popular JS MVCs (Backbone, Ember, Angular to some extent) use jQuery.

    What next? Don’t use SCSS/LESS over vanilla CSS?

    • MaxArt
      Permalink to comment#

      The “wrong” is that jQuery is just a part of the Javascript world. Many developers – not only beginners – may not know jQuery very much, or at all. So your advice “then use Javascript” is useless, if the developer can’t actually translate jQuery into Javascript.

      The writer that is quite fluent in jQuery may tend to use complex syntax structure and abuse chaining, and that would be a nightmare for someone who wants to read the tutorial.

      And let’s admit it: jQuery is overkill for most of the stuff. And I mean not the things in a tutorial – but for web development in general. A good developer can write some helper functions to attach event listeners, add classes and make AJAX calls, and that would cover almost everything that a developer would do with jQuery, using a lot less memory and CPU. That’s something that’s often forgotten, but as IE8 shifts away jQuery becomes less and less important (and I’m sure John Resig wouldn’t mind – it would be the same for the other frameworks too).

      So, in the end, I think it’s ok to use jQuery for very basic stuff, like adding a class or an event listener, just for the sake to show how to apply an effect. Because even $.get or animate can be rather obscure for a beginner. For something more complicated, use vanilla Javascript. Unless, of course, it’s a tutorial explicitly meant for jQuery.

      And yes, the next step is to question whether using vanilla CSS rather than SCSS/LESS, and to an even major extent, since CSS frameworks are nothing as popular for CSS as jQuery is for Javascript, so they’re way more obscure for beginners – i.e., the most common tutorial readers.

      P.S.: and I don’t think jQuery helped to increase Javascript popularity much. It doesn’t matter if every browser now implements querySelectorAll, it’s just minimal. For the rise of Javascript, you can thank the rise of popularity of standard compliant web browsers, especially Firefox and then Chrome.

  42. What I have started to see lately are tutorials written in all different javascript patterns, I have started to learn these patterns so I am I able to fully understand and translate the javascript.

  43. JC.
    Permalink to comment#

    When I started learning web developing I started learning and using JQuery, but somehow I felt empty and I felt the necesity to learn pure javascript, now I keep learning more and more, and I just use jQuery when for some unpredictable reason time gets shorter, well actually let me be more clear… I use “Jquery Plugins” when time gets shorter, other than that I use plain javascript and I love it.

  44. MG
    Permalink to comment#

    I find that the IT/development world, like much else, is quite polarized and to an extent ridiculously so. Linux vs Microsoft, jQuery vs JavaScript, etc. What’s next? Protests and wars based on your development language or platform of choice? Yes, that’s extreme but I have seen some very heated debates about technologies and would just walk away shaking my head. Then again there was that ludicrous occupyflash a while back… really?

    We’re in our line of work to deliver solutions – whether that’s a basic website, e-commerce, game, etc. I don’t know one client of ours that has ever said “We don’t want you using jQuery, pure JavaScript only”. Nor do most care. They care that the experience they want to deliver to their clients/customers meets (or exceeds) their expectations.

    To me what is more important is to know your choice of tools, languages, platforms well and know how to make the best use of them to achieve your goals. You should know their strengths, weaknesses, caveats, and where and when not to use them.

    If your jQuery code is creating a performance issue, optimize it. If it’s optimum, then look to pure JavaScript.

    I don’t want to work on a development team where the lead discards jQuery simply because he/she doesn’t consider it “pure”. Should we not use IDEs because they make coding easier too? Who needs debuggers, tracing, profiling, code completion… yeah, I’d rather accomplish the same thing with more work.

    If you have the interest and inclination, learn what you can. Absolutely learn JavaScript, you’ll be better for it. But don’t brand a person as incompetent because they’re not a JavaScript ninja (btw, I’m so tired of seeing job descriptions asking for ninjas, gurus, code warriors, etc. Do they expect you to show up in your Ninjago costume?)

    • I totally agree and second what MG just said and as Chris cleverly says in his article

      I Write What I Do

      There is no point wasting time fighting about the use or misuse of jQuery. Those who are using it wisely have deployed so many successful projects (I am one of them I can say). There is no point is writing so much plain javascript code and achieving very little, while the reverse can be easily done using jQuery.

      In short, use jQuery,Zepto, underscore or plain js whichever gives you best performance and provides maximum flexibility with your coding style. Nuff said.

  45. Norbert Zentai
    Permalink to comment#

    I think jQuery is wrong for simple tutorials where the tutorial isn’t about jQuery. If you would like to get away from <IE9 event model and other compatibility things, the tutorial should just mention a shim to get the same behavior in IE. Just like $(element).removeClass("active"); can be archived via plain javascript with element.classList.remove("active"); Just point to the shim which adds support.

  46. James
    Permalink to comment#

    What matters is whether or not the given task is completed in a satisfactory manner. Everything else is gossip.

    • tomByrer
      Permalink to comment#

      Exactly: Being militant one way or another when sometimes the best thing for your customers might be opposite of your preference is not wise. However, many front-end & even some back-end web programmers do not take this engineering approach. They either value look & feel over practicality, or simply zerg to the solution that is the lest work for them.

      That said, I wonder often when I visit sites on my mobile phone & my first reaction is, “Why is a jQuery flourish loading on my slow, metered, connection for my small screen? I can’t even see what I came here for yet!”

  47. Charlie Marshall
    Permalink to comment#

    I’ve only been a web developer for just under 3 years now and only in the past year have I learnt to use jQuery/JavaScript and I don’t really understand why people are getting all up in arms about learning jQuery over JavaScript.

    If it makes the job easier to use jQuery, then use it I say. I might not be the right person to say this but it’s just a hell of a lot easier to use jQuery because what you code is literally how you would say it in short-hand.

    • tomByrer
      Permalink to comment#

      You totally right Charlie, jQuery is alot easier to use than vanilla JS. Can be the perfect solution often when you have a bunch of scripting for a site. Plus jQ’s ecosystem is awesome (so many plugins to choose from!).

      But that ease-of-use is what makes jQuery additive. Sometimes jQ is added as an overkill solution when only 10 lines of vanilla JS could have been copy-pasted-tweaked, thus unnecessarily slowing web site download, lowering page ranking, etc. No need to buy an electric drill when a plain screwdriver will work faster & cheaper.

  48. Permalink to comment#

    +1

    I can easily get on board with the concept that you should learn the language before you wrap yourself in a pre-written framework and simply apply the API. Sure.

    Like Jake pointed out, what I also see is a insanely large community of developers using Bootstrap and all the tools that treat Bootstrap as a platform. Not to mention the new wave of Angular developers who jump at the chance to install Angular-Bootstrap.

    Is it not the same conversation when a developer, instead of learning how to better engineer good CSS and use proper architectural practices, their default is to just grab Bootstrap off the shelf?

    Pretty much every example where someone in this thread has said “you don’t need jQuery to do X”, I can have the same arguments with Bootstrap.

    If I am to be flamed for adding 93k of jQuery to a project to make my job easier, then do I not have the right to say that adding Bootstrap (98k minified version) is just as bad?

    I think that we as a community need to spend less time cutting down others who are not doing the ‘perceived’ right thing and understand that we all have jobs to do. It is over time and with experience that we begin to reevaluate our toolsets and begin to engineer our own.

    </peace out>

  49. Tyler Anyan
    Permalink to comment#

    ^^Word.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".