¿Cuál es la forma correcta de establecer el atributo Src en JQuery?

Question 1

Supongamos que tengo el siguiente HTML:

<img id="foo" src="https://stackoverflow.com/questions/4390627/bar1.jpg"/>

me gustaría cambiar el src a bar2.jpg

¿Puedo hacer esto?

$("#foo").attr("src", "bar2.jpg");

¿O tengo que hacer esto?

$("#foo").removeAttr("src");
$("#foo").attr("src", "bar2.jpg");

¡Gracias!

Question 2

Cuando haces esto:

$("#foo").attr("src", "bar2.jpg");

El anterior src es remplazado.

Así que no necesitas:

$("#foo").removeAttr("src");

Puedes confirmarlo aquí

Question 3

El primer wey está bien, no hay razón para eliminarlo primero.

$("#foo").attr("src", "bar2.jpg");

$.attr sirve tanto para obtener el atributo existente como para cambiarlo (dependiendo de si hay uno o dos argumentos). Su situación es exactamente para lo que está destinada la segunda funcionalidad, y el atributo ‘src’ no es especial.

http://api.jquery.com/attr/

Question 4

Solo haz .attr('src', 'foo') porque estás asignando un src sin importar. Solo elimine el atributo si no lo necesita por completo.

Question 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.main{
    position:relative;
}
.second{
position:absolute;
top:20px;
left:720px;
}
.third{
    position:absolute;
top:290px;
left:720px;
}
.fourth{
    position:absolute;
top:100px;
left:1030px;
}
.firstarrow{
    position:absolute;
top:20px;
left:1100px;
}
.secondarrow{
    position:absolute;
top:20px;
left:1030px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $(".firstarrow").on('click', function() {
   var pos1 = $('.first img').attr('src');
   var pos2 = $('.second img').attr('src');
   var pos3 = $('.third img').attr('src');
   var pos4 = $('.fourth img').attr('src');
   $('.third img').attr('src', pos1);
   $('.fourth img').attr('src', pos3);
   $('.second img').attr('src', pos4);
   $('.first img').attr('src', pos2);
});

  $(".secondarrow").on('click', function() {
   var pos1 = $('.first img').attr('src');
   var pos2 = $('.second img').attr('src');
   var pos3 = $('.third img').attr('src');
   var pos4 = $('.fourth img').attr('src');
   $('.third img').attr('src', pos4);
   $('.fourth img').attr('src', pos2);
   $('.second img').attr('src', pos1);
   $('.first img').attr('src', pos3);
});

});
</script>

</head>

<body>
<div class="main">
<div class="first">
<img src="img1.jpg" alt="" width="700" height="511" />
</div>
<div class="second">
<img src="img2.jpg" alt="" width="300" height="250" />
</div>
<div class="third">
<img src="img3.jpg" alt="" width="300" height="250" />
</div>
<div class="fourth">
<img src="img4.jpg" align="" width="300" height="400"  />
</div>
<a href="#"><div class="firstarrow"><img src="ar1.jpg" width="48" height="48" /></div></a>
<a href="#"><div class="secondarrow"><img src="ar2.jpg" width="48" height="48" /></div></a>
</div>

</body>
</html>

Question 6

Incluso para mediaelement jugador tiene:

  $("#player5").attr("poster", "/images/poster/Azadi.jpg");

Puedes confirmarlo aquí

¿Ha sido útil esta solución?