CODEWITHSUNDEEP
javascriptjquery
Joe Torraca
Joe Torraca

Reputation: 2018

Can JQuery and Javascript be mixed together?

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

Upvotes: 2

Views: 7796

Answers (7)

nnnnnn
nnnnnn

Reputation: 150080

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.

Upvotes: 5

natedavisolds
natedavisolds

Reputation: 4295

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"
}

Upvotes: 1

ThinkingStiff
ThinkingStiff

Reputation: 65391

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";

Upvotes: 1

qiao
qiao

Reputation: 18229

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');

Upvotes: 2

Christoph Winkler
Christoph Winkler

Reputation: 6418

You can do it with jQuery too:

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

Upvotes: 2

Sergio Tulentsev
Sergio Tulentsev

Reputation: 230561

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.

Upvotes: 5

Michael Berkowski
Michael Berkowski

Reputation: 270795

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.

Upvotes: 3

Related Questions