CODEWITHSUNDEEP
javascriptjquery
oopbase
oopbase

Reputation: 11385

Difference between $(this).src and document.getElementById().src?

in a current project I am using jQuery. I was just wondering why this works,

$('#homeIcon').hover(function(){
    document.getElementById('homeIcon').src = "pic/home-icon_hover.png";
})

but this won't:

$('#homeIcon').hover(function(){
    $(this).src = "pic/home-icon_hover.png";
})

Shouldn't those methods do exactly the same?

FYI homeIcon is an <img>.

Upvotes: 2

Views: 7202

Answers (8)

Tim Down
Tim Down

Reputation: 324567

For setting a property of a single element, don't bother with either attr() or prop(). jQuery conveniently provides you with a reference to the element you want, so use it:

$('#homeIcon').hover(function() {
    this.src = "pic/home-icon_hover.png";
})

Upvotes: 0

Polynomial
Polynomial

Reputation: 28316

$(this) returns a jQuery object that represents the DOM element, but not the DOM element itself.

You need to use .attr() to set the attribute.

$(this).attr("src", "pic/home-icon_hover.png");

See this for more info: http://api.jquery.com/attr/

There's a very nice explanation over at Remy Sharp's blog: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Upvotes: 2

Manuel van Rijn
Manuel van Rijn

Reputation: 10305

$(this) results in a jQuery object. If you want to change the src attribute you have to do 

$(this).attr("src", "icon.png");
// or from version 1.6
$(this).prop("src", "icon.png");

see jQuery attr(), jQuery prop()

to use the .src attribute on a jQuery object you can return the DOM element by doing

$(this).get(0).src = 'icon.png';

see jQuery get()

Upvotes: 0

Leon
Leon

Reputation: 4532

since the getElementById() returns the actual HTML object, that has .src as a property.

whereas $("#dxx") returns a JQuery object - that can be accessed as an array - so you could use $("#dxx")[0].src (in case there's at least one item) and that would work the same

Upvotes: 2

jabclab
jabclab

Reputation: 15042

Once you wrap your object (this) in jQuery you then have an Array of elements, try printing it out to the console:

console.log($(this)); // [ img ]

To expand on the correct answer provided by @idanzalz; if you do:

$(this).attr("src", "xyz");

The src attribute will be changed on all matched elements. In this case the only matched element is this.

Upvotes: 0

Clive
Clive

Reputation: 36957

When you extend the JS object to a jQuery one you should set attributes using the attr() method:

$('#homeIcon').hover(function(){
  $(this).attr('src', "pic/home-icon_hover.png");
})

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You should do

$('#homeIcon').hover(function(){
    $(this).attr('src', "pic/home-icon_hover.png");
})

Upvotes: 0

idanzalz
idanzalz

Reputation: 1760

In jquery you should do

$('#homeIcon').hover(function() {
    $(this).attr('src',"pic/home-icon_hover.png")
})

To set the value of the src attribute. from jQuery version 1.6 and up it is recommended to use prop instead of attr, so:

$('#homeIcon').hover(function() {
    $(this).prop('src',"pic/home-icon_hover.png")
})

Upvotes: 6

Related Questions