jQuery给img设置src
在前端开发中，经常需要动态地改变网页上的图片。而使用jQuery给img标签设置src属性是一种常见而且方便的方法。本文将介绍如何使用jQuery给img设置src，并附有代码示例。
使用attr方法设置src属性
在jQuery中，可以使用attr方法来获取或设置HTML元素的属性。对于img标签，src属性是用来指定图片的URL地址的。下面是一个简单的示例，展示如何使用attr方法给img设置src属性。
// HTML代码
<img id="myImage" src="default.jpg" alt="My Image">
// jQuery代码
$(document).ready(function(){
// 获取img标签的src属性值
var src = $('#myImage').attr('src');
console.log(src); // 输出: default.jpg
// 设置img标签的src属性值
$('#myImage').attr('src', 'new.jpg');
});
在上面的例子中，首先获取了id为"myImage"的img标签的src属性值，并将其打印到控制台。然后使用attr方法给img标签设置了新的src属性值。最终，图片的URL地址由"default.jpg"变为"new.jpg"。
使用prop方法设置src属性
除了attr方法，还可以使用prop方法来设置img标签的src属性。相比于attr方法，prop方法更适用于处理布尔类型的属性值。下面是使用prop方法给img设置src属性的示例。
// HTML代码
<img id="myImage" src="default.jpg" alt="My Image">
// jQuery代码
$(document).ready(function(){
// 获取img标签的src属性值
var src = $('#myImage').prop('src');
console.log(src); // 输出: default.jpg
// 设置img标签的src属性值
$('#myImage').prop('src', 'new.jpg');
});
在上面的例子中，使用prop方法获取了img标签的src属性值，并将其打印到控制台。然后使用prop方法设置img标签的新的src属性值。与attr方法类似，最终图片的URL地址由"default.jpg"变为"new.jpg"。
使用attr和prop方法的区别
尽管attr和prop方法都可以用来设置img标签的src属性，但是它们在处理布尔类型的属性值时会有一些区别。下面是一个具体的例子来说明这个区别。
// HTML代码
<input type="checkbox" id="myCheckbox">
// jQuery代码
$(document).ready(function(){
// 使用attr方法设置checked属性
$('#myCheckbox').attr('checked', true);
var attrChecked = $('#myCheckbox').attr('checked');
console.log(attrChecked); // 输出: checked
// 使用prop方法设置checked属性
$('#myCheckbox').prop('checked', true);
var propChecked = $('#myCheckbox').prop('checked');
console.log(propChecked); // 输出: true
});
在上面的例子中，首先使用attr方法设置了input标签的checked属性为true，并将其获取到的值打印到控制台。然后使用prop方法设置了checked属性为true，并将其获取到的值打印到控制台。注意，使用attr方法获取的checked属性值为字符串"checked"，而使用prop方法获取的checked属性值为布尔类型的true。
总结
本文介绍了如何使用jQuery给img标签设置src属性，并提供了代码示例。通过使用attr方法或prop方法，我们可以很方便地改变网页上的图片。在实际开发中，根据不同的需求选择合适的方法来操作属性，可以更好地进行前端开发。
附录
以下是本文提到的代码示例中使用到的HTML和CSS代码。
<!-- HTML代码 -->
<img id="myImage" src="default.jpg" alt="My Image">
<input type="checkbox" id="myCheckbox">
<!-- CSS代码 -->
<style>
img {
width: 200px;
height: 200px;
}
</style>
带有代码示例的科普文章到此结束，希望对您理解和使用jQuery给img设置src属性有所帮助。
