如何使用 jQuery 获取 HTML img 元素的 src 属性？答案

【问题标题】：How, using jQuery, might I obtain the src attribute of a HTML img element?如何使用 jQuery 获取 HTML img 元素的 src 属性？
【发布时间】：2010-01-24 02:49:14
【问题描述】：

当鼠标光标移动到图像上时，我想显示一个包含该图像src 属性值的alert()。我怎样才能做到这一点？

【问题讨论】：

标签： jquery html dom

【解决方案1】：

您可以使用mouseover 事件。

如果你有

<img src='foo.jpg' id='bar'>

你可以有一些 jQuery 代码，比如

$('#bar').mouseover(function(){ alert($(this).attr('src')); });

（如果失败，您也可以尝试将 $(this) 替换为 $('#bar')，但正如 cmets 中所述，它非常难看）

编辑：错过了第一次显示src属性的需要..

【讨论】：

@chalist，对不起——再试一次
为什么不在处理程序中使用this 而不是实际的“#bar”选择器？
喜欢$('#bar').mouseover(function(){ alert($( this ).attr('src')); });?伙计，@Pekka 是对的，这太丑了！
@Jacob，以这种方式开始，OP 变得未定义，这肯定会返回正确的结果。将其回滚。

【解决方案2】：

JavaScript：

function alertSource( image ) {
   alert( image.src );
}

HTML：

<img src="path/to/image" onmouseover="alertSource(this);" alt=""/>

你不需要 jQuery。

【讨论】：

你的意思是 onmouseover 而不是 onclick，不是吗？
我注意到我们通常回答相同类型的问题，只是谁先回答的问题。 :)
因为我有 VALID html 而投票如何？（alt 属性）:)
+1 在没有 jQuery 的情况下执行此操作（尽管 OP 要求它），并且具有有效的 HTML...=)
+1 用于在没有 Jquery 的情况下执行此操作（这只会使工作变得非常丑陋。只需看看该代码！）:)

【解决方案3】：

<img src="some_img.gif">
<script>
$("img").bind("mouseover",function(){
alert($(this).attr("src"));
});
</script>

【讨论】：

既然有mouseover快捷功能，为什么还要使用bind？

【解决方案4】：

$('img').mouseover(function() { 
    alert( this.src );
});

【讨论】：