Can I combine jQuery with Javascript?

Question

I want to use the Javascript selector document.querySelector insted of $ or jQuery jQuery selector but I want to combine the Javascript selector with jQuery functions (like .getJSON(), .html(), .append() , etc.).

For example:

$.getJSON("list.json", function(data) {
    document.querySelector("#content").html(data.name);
});

Here when I use the document.querySelector I get Uncaught TypeError: undefined is not a function and when I use $ I don't get any error.

jsFiddle Test

Is it possible to run jQuery and Javascript together?

Thanks!

You can do $(document.querySelector("#content")).test(data.name), but it makes no sense. And won't work in browsers that don't support querySelector. — Bergi
– Bergi, Commented May 25, 2014 at 18:07
Of course you can mix both syntaxes - JS and jQuery. Sometimes pure JS is faster, e.g. using this.id is faster than $(this).attr('id'). Keep in mind that when mixing, code might get confusing. Either way, it's your personal choice. — lesssugar
– lesssugar, Commented May 25, 2014 at 18:09
@dandavis Erm, jQuery is JavaScript, so that comment makes no sense... — Tieson T.
– Tieson T., Commented May 25, 2014 at 18:18
@wumm: it works in ie7, which runs jScript, not javascript. there are only a few hundred differences between jScript and JavaScript, but they are not the same... — dandavis
– dandavis, Commented May 25, 2014 at 18:18

Afzaal Ahmad Zeeshan · Accepted Answer · 2014-05-25 18:19:30Z

5

Off couse yes! It is possible to run jQuery and JavaScript together in you application.

All you need to know is, which is a JavaScript Object when trying to run some methods of it. jQuery can be handy sometimes. But, yes! You can work with them together.

Secondly, remember that jQuery is a JavaScript's Library. It isn't anything other than JS. To be simple, jQuery needs JavaScript to run. JavaScript doesn't need jQuery to run.

From this MDN source, it is stated that you can use that method just the way it is.

document.querySelector(".someclass");

https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

All you now need to make sure is of that, that class you're trying to access exists.

answered May 25, 2014 at 18:19

Afzaal Ahmad Zeeshan

15.9k14 gold badges61 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mustapha Aoussar Over a year ago

Thank you so much! But the document.querySelector doesn't work with jQuery functions. Please see this test: jsfiddle.net/g4ZZK

ajp15243 Over a year ago

@Fuiba That's because many of jQuery's methods are properties on a jQuery object, and the way to get a jQuery object is to pass something to the $/jQuery function. A jQuery object is not an Element object, which is what is returned by querySelector(). This is why Bergi suggested what he did in his comment (the fourth comment on your question that he mentions here), because that wraps the Element from querySelector in a jQuery object, thereby allowing you to now use many of jQuery's methods.

jslayer · Accepted Answer · 2014-05-25 18:46:16Z

2

$.getJSON("list.json", function(data) {
    $(document.querySelector("#content")).html(data.name);
});

PS:

But there isn't any sense to use it everywhere. Check the @afzaal-ahmad-zeeshan answer & read how to use native functional of DOM elements. jQuery isn't a panacea.

answered May 25, 2014 at 18:46

jslayer

4843 silver badges11 bronze badges

Comments

Farid · Accepted Answer · 2019-01-27 03:32:25Z

0

jslayer's answer gave me an idea, which seems to work. Wrapping js code in $() seems to work (though I'm not sure why).

For example, to use slideToggle() (which is only available in jQuery, I think), doing

event.target.nextElementSibling.slideToggle()

does not work, but

$(event.target.nextElementSibling).slideToggle()

does.

answered Jan 27, 2019 at 3:32

Farid

1,6854 gold badges23 silver badges36 bronze badges

Collectives™ on Stack Overflow

Can I combine jQuery with Javascript?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related