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

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

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

及

我不擅长jQuery，所以我在网上搜索了差异，根据我的发现，我希望第一个代码返回：

resources/images/1.jpg

，第二个代码返回：

http://localhost:8080/myApp/resources/images/1.jpg

---

感谢您的澄清。

上面显示的

URL

都是相对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

.attr（'src'，newSource）

和

.src=newSource

的不同之处在于一个用于属性（或者更具体地说，是DOM的序列化），另一个用于DOM属性

jQuery的

.attr（）

setter使用，也就是说，它与属性一起工作。属性值是通常在HTML中编写的纯文本：

当浏览器接收HTML并将其解析为DOM时，

src

属性值相对于文档的位置（或

标记，如果有）进行解析，并且解析的URI设置为DOM图像元素的

src

属性

src

属性反映了

src

属性，即

src

属性值中的更改将反映在

src

属性值中（反之亦然）

src

属性始终存储解析的URI（将其设置为相对URI将根据文档位置/

base

标记隐式解析），属性中的更改将反映在属性中。反之亦然（设置属性会更新属性值）

---

更重要的一点

---

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

似乎在

images/'+i

！==<代码>图像“+i我的实际代码中没有这种打字错误。我编辑了我的问题来解决它。我知道什么是相对URI和绝对URI。我想知道这些代码中的哪一个在jQuery中返回绝对URI。我想他们不应该返回相同的结果。例如，请看这个堆栈溢出问题。

img.src

提供绝对uri，而

$（img）.attr（“src”）

仅提供为

src

或相对url指定的值。请参阅我发布的示例或本文：要使用jQuery获得完整解析的uri，请使用：

$（img）.prop（“src”）

您的问题也会在您链接的页面中得到回答。。。。要始终获得完整的解析路径，请使用元素。src@user2911374因为这就是它们的解析URI。“我不知道你们还会期待什么。”法布里西奥·马特和凯文·鲍尔索克斯感谢你们的回复。你的两个答案都非常有帮助和详细。我在为法布里西奥·马特的回答打分，以获得详细的解释。我学到了很多关于jQuery的东西。我不使用ie。我使用firefox。是的，我又添加了一个注释。如果浏览器无法获取图像，请更新问题。

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