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

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

希望能得到解释。

- user2911374

---

似乎你在 images/'+ i 和 images' + i 之间出现了复制粘贴错误。 - Fabrício Matté

我在实际代码中没有这个错别字。我编辑了我的问题来修复它。 - user2911374

Answer 1

上面显示的urls都是相对URL。在解析时，src属性将与基本URI组合，形成实际用于定位图像的URI。如果您想通过JavaScript引用src属性/属性，请使用以下示例来获得所需的结果：

这些URL被解析为以下内容：

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

- Kevin Bowersox

---

我知道相对URI和绝对URI是什么。我想知道这些代码中哪个返回jQuery的绝对URI，img.src还是$(img).attr("src")。我猜它们不应该返回相同的结果。请查看此StackOverflow问题https://dev59.com/M0fSa4cB1Zd3GeqPAtxh作为例子。 - user2911374

img.src 提供了绝对 URI，而 $(img).attr("src") 只提供了 src 属性的值或相对 URL。请参见我发布的示例或此 fiddle：http://jsfiddle.net/zs2wp/。要使用 jQuery 获取完整解析的 URI，请使用：$(img).prop("src")。 - Kevin Bowersox

@user2911374，因为这就是它们两个的已解析URI。我不知道你还期望什么。 - Fabrício Matté

因为Firefox正在解析URL以定位图像。您的问题围绕属性和特性之间的区别。属性是在标记中看到的。例如<img src="resources/images/test.png"/>，在此示例中，src是一个属性，但是当您通过Javascript更改src时，img.src = "/resources/images/test2.png"/>，您正在使用属性。当浏览器定位资源时，它会将基本URI添加到相对路径以定位资源。FireFox正在显示已解析的路径。 - Kevin Bowersox

@FabrícioMatté和Kevin Bowersox，感谢您们的回复。你们两位的答案都非常有帮助和详细。我选择标记FabrícioMatté的答案，因为它的解释很详细。我学到了很多关于jQuery的东西。 - user2911374

Answer 2

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

jQuery 的 .attr() 设置器使用 .setAttribute，也就是说，它使用属性。属性值是普通文本，通常写在 HTML 中：<img src="someSource">。

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

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

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

---

更重要的说明

无论设置属性还是属性值，解析的URI（将从服务器获取）都将相同。因此，除非您有一些代码测试特定值的属性，否则所有这些都不会有太大的区别。

- Fabrício Matté

---

我不使用ie。我使用火狐浏览器。 - user2911374

是的，我添加了一条注释。如果浏览器无法获取图像，请更新问题。 - Fabrício Matté