I just asked this question at SO about some bugginess I am experiencing with jQuery and IE8, and someone commented that he was appalled that I would mix JavaScript with jQuery (he has since deleted his comment for some reason).

This person had a high reputation, relative to mine (3000+), so I don't want to ignore his criticism. I'm still relatively new to web development, and I mostly work alone, so I wasn't aware that this could be a problem. Why should mixing the two be avoided?

  • <offhand comment> Yes it is appaling you would mix JavaScript with jQuery. avoid it. </off hand comment>. Seriously though the only thing strange is lack of consitency either use mostly jQuery or mostly javascript. Don't go for a 50/50 mix. – Raynos Nov 8 '11 at 16:06
  • @Raynos - Exactly it can lead to jSTDs -Seriously, jquery is a javascript tool. there is no 50-50 mix since it is all 100% javascript. – SoylentGray Nov 8 '11 at 16:10
  • jQuery IS JavaScript...it just provides a convenience layer for accessing and manipulating the DOM which if you have jQuery I agree you shouldn't be doing. But if you're using jQuery there is no avoiding using JavaScript. Perhaps your mystery commenter realized his folly. – Michael Brown Mar 17 '15 at 21:38

The issue, and likely, the reason for the comment, seems to be the lines with document.getElementById('firstName');. jQuery can do the exact same thing, and it's generally "safer", since it handles differences between browsers nicely.

The best rule of thumb to follow is use jQuery a DOM manipulation library of your choice (for many people, this is jQuery) to manipulate the DOM, and javascript for everything else you need to do.

  • Not that what you're saying is wrong, but the reason I selected those items that way was because later I wanted to do quick string manipulation that I thought would be easier and faster with basic js – user25791 Nov 8 '11 at 16:10
  • 2
    The best rule of thumb is to use <cross browser manipulation of choice>. And I can defiantly say jQuery is not that one for me, however on the grand scheme of things, it's not that bad – Raynos Nov 8 '11 at 16:10
  • 2
    @tjb1982: that sort of micro-optimization rarely pays. It almost never pays in user interface development, because users are really slow and the number of objects on the screen is small. – kevin cline Nov 8 '11 at 20:21

People like being black and white.

If you're going to use a cross browser normalization tool then use it. Don't use it to normalize some things but not others.


var a = $("#foo");
var b = document.getElementById("bar");

Those two should not be mixed. Either you use jQuery for edge case bugs you might care about or you use the DOM for speed, but not both.

And yes personally I would also say:

WTF, write your code more coherently, why are you mixing DOM calls with jQuery calls.

As a side-note, you can assume that when he says "javascript and jQuery" he means "calls to the DOM API directly in javascript and calls to the DOM API through the jQuery abstraction layer". Any other comment would be misinformation / trolls.

  • 3
    +1 great clarification, though explaining that you should avoid mixed dom and jquery calls is much more effective than the attack WTF. – SoylentGray Nov 8 '11 at 16:24
  • @Chad an off hand WTF without explanation is silly. However for some people (me included) it's all too easy to mock people for using bad practices when they simply don't know better. It's quite easy to assume people know better then they do. – Raynos Nov 8 '11 at 16:27
  • The code in the original SO question would not get past my code review, that's for sure. Don't mix jQuery selectors with getElementById. – Carson63000 Nov 9 '11 at 3:06
  • @Carson63000 agreed. Always use getElementById – Raynos Nov 9 '11 at 3:43
  • @Raynos: use whatever you like but make it consistent. :-) – Carson63000 Nov 9 '11 at 4:52

Not sure where such criticism would come from, seeing as jQuery is javascript.

The comment seems to have been deleted, so it is difficult to say exactly what the criticism was about. Could be more about your usage of jQuery or javascript.

  • The comment read: My god... why do you mix jquery and js?? – user25791 Nov 8 '11 at 16:05
  • 1
    Silly comment, which is probably why it isn't there anymore. – Oded Nov 8 '11 at 16:06

Some programmers tends to think in terms of what a tutorial or some programmer guru states.

Most probably, it would be easier to have the same framework used in your application to make the code easier to read and to understand.

But most of the times, frameworks have limitations or bugs so you can never apply what the tutorial or some programmer guru states.

I guess the most important is to satisfy the customer and to ship a bug free application


First of all, it's not jQuery vs. JavaScript. It's jQuery vs the DOM API as-is which is crufty and ugly and kind of obtuse but traditionally most-importantly, unevenly supported in a big way in Microsoft browsers before IE9. But it's all JavaScript. If you're thinking about it any other way you need to lift open the hood and learn what JQ's internals are actually doing.

And no I honestly don't see what the problem with using both is. If you're mucking with the DOM you should know the DOM. One of the things I like about jQuery is that it gets the hell out of my way. Why should I fire a method to get a property I know is available in all browsers when I can just reference it via [0].someProperty instead for instance? Using both shouldn't make it harder for another UI dev to tweak your stuff if jQuery is in the mix because it's never going to have a problem with you doing that. At any time you can wrap any dom collection or object in a $ produced object wrapper by just tossing it in as an argument of the $ function and you're back in jQuery-land so it's not like you've made your code harder for somebody else to modify because that person was less comfortable with the native API.

But they should be able to read plain vanilla DOM API stuff if it's their business to tweak things at that level, regardless of their comfort-level using it. That's just the threshold of technical literacy for a proper entry-level UI-dev as far as I'm concerned. Generally speaking, of course, it can make code more legible to be consistent in the things that you do, but when you feel there's a sensible reason to go one way or the other, there's no reason not to. The key to making that decision is to know a lot about both.

In the scenario where somebody is really freaked out when they see a mix of things happening both the JQ way and the DOM API way, that's often a server-side dev not wanting to wade through stuff they don't really understand in order to re-use your code when you get smacked by the prodigal programmer-murdering bus. In that scenario, they shouldn't even be looking at this stuff in order to understand how to re-use your code for implementation on other pages or to set some alternate behavior. They should be looking at generic JavaScript objects, methods, and factories that expose a consistent/easily-documented API of your own for doing things like sticking a bunch of UI widgets of a given type on a page or setting all the combo boxes in a table to stop doing the auto-filtering thing when you type. All the DOM stuff should be buried and hidden from people who don't need to know it.

And that shouldn't be hard for you to do if ultimately it's all just JavaScript to you.


I prefer to mix them. I usually start off with using strictly (or mostly) jQuery. Since things can get quite CPU intensive with projects I work on that involve possibly 100's of widgets. I find that writing in jQuery is a great start, but when I want to start optimizing my products, I switch a lot of what I can to JavaScript. jQuery is great, but obviously running the native code is faster in most cases.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy