'a[href^="/"]'是什么意思？

Question

在下面的代码中，a[href^="/"]是一个正则表达式吗？

为什么它有^符号，它的作用是什么？

它会响应哪些点击事件/不会响应哪些点击事件？

$(document).on('click', 'a[href^="/"]', function(e) { 
     e.preventDefault(); 
     var href = $(e.currentTarget).attr('href'); 
     console.log('click ' + href); 
     Backbone.history.navigate(href, { trigger: true }); 
}); 

(code source)

- Leahcim

---

Duplicate? - Firedrake969

虽然有相似之处，但问题完全不同。 - Leahcim

问题本质上都是一样的 - “^= 这个符号代表什么意思？” - Firedrake969

Answer 1

问：在下面的代码中，a[href^="/"]是正则表达式吗？

答：不是正则表达式，它是一个（基于CSS的）jQuery选择器。

问：为什么它有^符号，它是做什么用的？

它有这个符号是因为它意味着startsWith。

问：它将响应哪些点击事件？

答：它将响应任何具有以/开头的href属性的标签。

---

注意：Backbone代码可能使用该选择器获取网站的所有内部链接并更改它们的行为以进行客户端导航，而外部链接将以http/https开头。

- Buzinas

---

我不会把它称为CSS选择器，因为它并没有在CSS上下文中使用，但我同意其语法起源于CSS。 - Albert Xing

@AlbertXing 你说得对，实际上这是一个基于CSS选择器的jQuery选择器。我已经更新了我的答案。 - Buzinas

除了对OP的详细回答之外，内部/外部链接区分的好处也很重要。 - Leahcim

Answer 2

该 ^ 符号表示事件将会执行任何以 / 开头的链接。

- Eborio Linárez

Answer 3

"

a[href^="/"] 是一个选择器：

选择器是匹配树中元素的模式，因此是可用于选择 XML 文档中节点的多种技术之一。选择器已经针对 HTML 和 XML 进行了优化，并且被设计为可在性能关键代码中使用。

^ 符号有点类似于正则表达式的 ^ 锚点，尽管它并不是真正的正则表达式。它被用作特定属性选择器：

"

6.3.2. 子字符串匹配属性选择器

提供了三个额外的属性选择器，用于匹配属性值中的子字符串：

[att^=val]

表示具有以前缀“val”开头的att属性的元素。如果“val”为空字符串，则选择器不代表任何内容。

[att$=val]

表示具有以后缀“val”结尾的att属性的元素。如果“val”为空字符串，则选择器不代表任何内容。

[att*=val]

表示具有包含至少一个子字符串“val”的att属性的元素。如果“val”为空字符串，则选择器不代表任何内容。

这些是元素属性的选择器（href是一个属性）。

W3C规范：选择器级别3

- MinusFour