Can JQuery and Javascript be mixed together?

Question

I am wondering if I could use query and javascript together so I could select an element by class with the javascript and then use javascript to work on that element. Sorry if that didn't make sense. Here is an example:

$('.nav_flag').src = "images/flags/"+userCountryLower+".gif";

Would that work, if not how do I get an element by class using regular javascript. Thanks!

EDIT:I know JQUERY is JavaScript but I was wondering if I could mix jquery selectors and javascript 'controller'-for a loss of a better word

jQuery is JavaScript. jQuery is a library that is written in JavaScript. — user596075
– user596075, Commented Jan 2, 2012 at 4:38

nnnnnn · Accepted Answer · 2012-01-02 04:53:22Z

To answer your question as asked, there are several ways to take a jQuery object, i.e., what is returned by $('some selector'), and get a reference to the underlying DOM element(s).

You can access the individual DOM elements like array elements:

// update the src of the first matching element:
$(".nav_flag")[0].src = "images/flags/"+userCountryLower+".gif";

// if you're going to access more than one you should cache the jQuery object in
// a variable, not keep selecting the same thing via the $() function:
var navFlgEls = $(".nav_flag");
for (var i = 0; i < navFlgEls.length; i++) { ... }

But you wouldn't manually loop through the elements when you can use jQuery's .each() method, noting that within the callback function you provide this will be set to the current DOM element:

$(".nav_flag").each(function() {
    this.src = "images/flags/"+userCountryLower+".gif";
});

However, jQuery provides a way to set attributes with one line of code:

$(".nav_flag").attr("src", "images/flags/"+userCountryLower+".gif");

To answer the second part of your question, doing the same thing without jQuery, you can use .getElementsByClassname() or .querySelectorAll() if you don't care about supporting older browsers.

Sergio Tulentsev · Accepted Answer · 2012-01-02 04:38:29Z

5

jQuery IS Javascript. You can mix and match them together. But you better know what you're doing.

In this case, you probably want to use .attr function to set value of attribute.

answered Jan 2, 2012 at 4:38

Sergio Tulentsev

231k43 gold badges381 silver badges373 bronze badges

Comments

Michael Berkowski · Accepted Answer · 2012-01-02 04:38:20Z

3

Use .attr() in jQuery, rather than mix the two here.

$('.nav_flag').attr('src', "images/flags/"+userCountryLower+".gif");

In many instances, it is fine to mix jQuery with plain JavaScript, but if you have already included the jQuery library, you might as well make use of it. Unless, that is, you have an operation which in jQuery would be more computationally expensive than the same operation in plain JavaScript.

answered Jan 2, 2012 at 4:38

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

1 Comment

Joe Torraca Over a year ago

Thanks! I have been looking for quite some time on google and it gave me no results.

Christoph Winkler · Accepted Answer · 2012-01-02 04:38:51Z

2

You can do it with jQuery too:

$('.nav_flag').attr("src", "images/flags/"+userCountryLower+".gif");

answered Jan 2, 2012 at 4:38

Christoph Winkler

6,4181 gold badge20 silver badges18 bronze badges

Comments

qiao · Accepted Answer · 2012-01-02 04:41:45Z

2

keep in mind that jQuery is simply a library built upon javascript.

for any jQuery object, selecting its elements by subscription will return the corresponding dom element.

e.g.

$('#foo')[0] // is equivalent to document.getElementById('foo');

answered Jan 2, 2012 at 4:41

qiao

18.3k7 gold badges60 silver badges46 bronze badges

Comments

ThinkingStiff · Accepted Answer · 2012-01-02 04:42:51Z

1

You need to add an index to the jQuery object to get the native Javascript object. Change:

$('.nav_flag').src = "images/flags/"+userCountryLower+".gif";

To:

$('.nav_flag')[0].src = "images/flags/"+userCountryLower+".gif";

To get elements by class name in Javascript you can use:

document.getElementsByClassName( 'nav_flag' )[0].src = "images/flags/"+userCountryLower+".gif";

answered Jan 2, 2012 at 4:42

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

Comments

natedavisolds · Accepted Answer · 2012-01-02 04:50:47Z

To answer your question, you could use .toArray() to convert the jQuery object into an array of standard DOM elements. Then either get the first element or loop through the array to set all the elements with the class.

However, you could do this easier with pure jquery with attr or prop depending on the version:

$('.nav_flag').attr("src", "images/flags/"+userCountryLower+".gif");

Or use pure javascript:

if (navFlagElements = document.getElementsByClassName("nav_flag") && navFlagElements.length > 0) {
  navFlagElements[0].src = "images/flags/"+userCountryLower+".gif"
}

Collectives™ on Stack Overflow

Can JQuery and Javascript be mixed together?

7 Answers 7

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Related