Changing attribute values of elements

attr(attribute,the value of attribute);

attr() provides the ability to change the values we use in tags as well as src = "" alt = "" title = "".

for example

<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" />

You can change the above src attribute value /material/images/jQuery/disney.jpg or change the alt attribute value disney.

Click on the image above to let Honda's biped robot Asimo come out.

To do this, the first attribute of attr('', '') is used, and the second is the value of the attribute to change.

var myimage = $('.myimage');
myimage.click(function(){
  myimage.attr('src','/material/images/jQuery/asimo.png');
});

Click image below for Tokyo Disneyland's 25th Anniversary Cinderella Castle and it will change image Now you know how to do this. ^-^;

Click to change to the photo of Honda's most advanced bipedal robot, Asimo. In other words

<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" />
The above source has been been changed to
<img class="myimage" src="/material/images/jQuery/asimo.png" alt="disney" />

If you check the results with the source

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>COREASUR :: jQuery Course</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  var myimage = $('.myimage');
  myimage.click(function(){
    myimage.attr('src','/material/images/jQuery/asimo.png');
  });
});
</script>
<style>
</style>
</head>
<body>
<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" />
</body>
</html>

In addition, you can change the href = "", target = "", etc. of a tag, so please test it.

Changing attribute values ​​of elements

attr(attribute,the value of attribute);

Changing attribute values of elements