this.href与$(this).attr('href')的区别

Question

阅读完这篇文章net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/后，我得出结论，使用this.href更有效率。

然而，当我尝试在我的一个项目中使用它时，我发现this.href不仅返回href还会附加网站的url。例如<a href="tab-04"></a>this.href将返回http://example.com/abc/tab-04，而$(this).attr('href')将仅返回tab-04。

你可以在http://jsfiddle.net/UC2xA/1/这里看到一个例子。

然而，$(this).attr('href')确切地返回我需要的内容，没有多余的东西。

我的问题是，我该如何重写（或进行必要的操作）this.href，使其仅返回tab-04？

编辑：

this.getAttribute('href')

- user

---

如果你想要获取 href 属性的确切值（即在 HTML 源代码中硬编码的值），则使用 $(this).attr('href')。如果你想要完整限定的 URL，则使用 this.href。 - Šime Vidas

如果你要使用<b>this.href</b>因为它的效率，然后重写它以使其“做更多”，那么这就有点违背初衷了。 - Joey

“我得出结论，使用this.href更有效率。” 实际上并不是这样，但你肯定是“过早优化”了。即使存在所谓的效率变化，其可检测性几乎为零。 - Michael Lorton

直接访问DOM属性比使用jQuery方法要快得多。与首先创建jQuery对象相比，它快了几个数量级。说它无法检测或空值是荒谬的。 - RobG

@Malvlio - 对于一个小型应用程序，用户可能看不出区别，但对于大型应用程序，他们会看到差别。在非常简单的情况下使用更有效率的代码，而不是低效的代码，这也是一种不好的编码风格（尤其是当jQuery的一个主张是“写得更少”）。 - RobG

Answer 1

在普通JavaScript中，href属性带有附加的语义。它返回链接将引导到的目标URL。无论它是绝对或相对URL都不重要。

当您使用$(this).attr("href")时，您直接检索href属性的值，就像检索任何其他属性一样。因此，它将返回在HTML中呈现的确切值。

对于您的情况，最好使用$(this).attr("href")

如果您不想使用jQuery，则还有另一种解决方案，只需使用普通的JavaScript：

this.getAttribute('href')

- Doug

Answer 2

这是一个小的子字符串吗？

例如：

function getHref(a)
{
    var i = a.outerHTML.indexOf('href="')+6;
    return a.outerHTML.substring(i, a.outerHTML.indexOf('"', i));

}

附言：已测试！

- ygaradon

---

Yonathan Garti，请问您能否提供一个 jsbin 或 jsfiddle 的链接，这样我就可以看看您是如何做的？因为我似乎无法让您的东西工作。至少目前还不行。 - user

outerHTML不是所有浏览器都支持的，href属性是支持的。 - RobG

Answer 3

document.getElementById(yourAnchorId).href.split("/")

[document.getElementById(yourAnchorId).href.split("/").length - 1].split("?")[0];

[document.getElementById(yourAnchorId).href.split("/").length - 1].split("?")[0];

- Brian

---

嗨，布莱恩，我还不能让你的东西正常工作，请问你能否提供一个jsbin或jsfiddle的链接，这样我就能看到你是如何做到的呢？ - user