Why doesn't Jquery let me do this

Question

document.getElementById("main").src = '02.jpg';

works

but

$('#main').src = '02.jpg';

doesn't

Answer 1

$("#main").attr("src", "02.jpg");

Answer 2

$('#main') returns a jQuery object, not a HTMLElement, therefore no src property is defined on the jQuery object. You may find this article useful.

Mike has shown one way of setting the src attribute (the way he has shown could probably be considered the most jQuery like way of doing it). A couple of other ways

$("#main")[0].src = '02.jpg';

or

$("#main").get(0).src = '02.jpg';

Answer 3

$('#main').src = '02.jpg';

The jQuery wrapper you get from $(...) does not reproduce all properties and methods of the DOM object(s) it wraps. You have to stick to jQuery-specific methods on the wrapper object: in this case attr as detailed by Mike.

The ‘prototype’ library, in contrast to jQuery, augments existing DOM objects rather than wrapping them. So you get the old methods and properties like .src in addition to the new ones. There are advantages and drawbacks to both approaches.

Answer 4

$("#main") is a collection of matches from a search. document.getElementById("main") is a single DOM element - that does have the src property. Use the attr(x,y) method for when you want to set some attribute on all of the elements in the collection that gets returned by $(x), even if that is only a single element as in getElementById(x).

It's akin to the difference between int and int[] - very different beasts!