CODEWITHSUNDEEP
javascriptjquery
Mustapha Aoussar
Mustapha Aoussar

Reputation: 5923

Can I combine jQuery with Javascript?

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!

Upvotes: 2

Views: 11527

Answers (3)

Farid
Farid

Reputation: 1665

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.

Upvotes: 0

jslayer
jslayer

Reputation: 484

$.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.

Upvotes: 2

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

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.

Upvotes: 5

Related Questions