Question

为什么以下两个代码会返回相同的结果？

var img = new Image(400,250); 
        $(img).attr('src','resources/images/' + i + '.jpg');

和

var img = new Image(400,250); 
        img.src = 'resources/images/' + i + '.jpg';

我不擅长jQuery，所以我在网上搜索了差异，根据我的发现，我希望第一个代码返回：resources/images/1.jpg，第二个返回：http://localhost:8080/myApp/resources/images/1.jpg

我很感激澄清。

Answer 1

上面显示的urls都是相对网址。解析后，src属性将与基础uri组合以形成用于定位图像的实际uri。如果您想通过Javascript引用src属性/属性，请使用以下示例获取所需结果：

网址解析如下：

var img = new Image(400,250); 
$(img).attr('src','resources/images/5.jpg');
$("body").append(img);

console.log($(img).attr("src"));
//prints: resources/images/5.jpg

console.log(img.src);
//prints: http://fiddle.jshell.net/_display/resources/images/5.jpg

console.log($(img).prop("src"));
//prints: http://fiddle.jshell.net/_display/resources/images/5.jpg

Answer 2

.attr('src', newSource)和.src = newSource的不同之处在于，它使用属性（或更具体地说，DOM的序列化），而另一个使用DOM属性。

jQuery的.attr() setter使用.setAttribute，也就是说，它适用于属性。属性值是您通常在HTML中编写的纯文本：<img src="someSource">。

当浏览器接收HTML并将其解析为DOM时，src属性值将相对于文档的位置（或<base>标记（如果有））进行解析，并将已解析的URI设置为DOM图像元素的src属性。

src属性反映了src属性，即src属性值的更改将反映在src属性值中（反之亦然）周围也是。）

src属性始终存储已解析的URI（将其设置为相对URI将根据文档位置/ base标记隐式解析它），并且属性中的更改将反映在属性中。反过来也是这样（设置属性更新属性值）。

更重要的注意事项

独立于设置属性或属性，已解析的URI（将从服务器获取）将是相同的。因此，除非您有一些代码根据特定值测试属性，否则所有这些都没有太大区别。

jquery中的绝对路径和相对路径

2 个答案:

更重要的注意事项