如何在JavaScript/jQuery中改变一个img元素的src属性

要改变一个img元素的src属性，可以使用JavaScript和jQuery两种方法。

使用JavaScript

在JavaScript中，首先需要获取要修改的img元素对象，然后修改其src属性。

步骤

1. 获取要修改的img元素对象

可以使用document.getElementById(id)方法来获取指定id的元素对象，也可以使用类似选择器的方式获取元素。

const img = document.getElementById('myImg');

或者

const img = document.querySelector('.img-class');

1. 修改img元素对象的src属性

通过给img元素对象的src属性赋值，来修改图片的路径。

img.src = 'newImg.jpg';

示例1

// HTML
<img id="myImg" src="oldImg.jpg" />

// JS
const img = document.getElementById('myImg');
img.src = 'newImg.jpg';

示例2

// HTML
<img class="img-class" src="oldImg.jpg" />

// JS
const img = document.querySelector('.img-class');
img.src = 'newImg.jpg';

使用jQuery

在jQuery中，使用attr()方法来获取和设置任意HTML属性，包括img元素的src属性。

步骤

1. 获取要修改的img元素对象

可以使用选择器来获取img元素对象。

const img = $('#myImg');

1. 修改img元素对象的src属性

使用attr()方法，传入'src'和新的图片路径作为参数，来修改img元素的src属性。

img.attr('src', 'newImg.jpg');

示例1

// HTML
<img id="myImg" src="oldImg.jpg" />

// jQuery
const img = $('#myImg');
img.attr('src', 'newImg.jpg');

示例2

// HTML
<img class="img-class" src="oldImg.jpg" />

// jQuery
const img = $('.img-class');
img.attr('src', 'newImg.jpg');

经过以上步骤，就可以成功改变img元素的src属性并显示新图片。