那jQuery的属性选择器[attribute$=value]表示匹配给定的属性是以某些值结尾的元素,那么又为甚用$这个符号呢?
在jQuery和CSS属性选择器中,[attribute$=value] 选择器中的 $ 符号表示匹配属性值以指定字符串结尾的元素,其设计灵感直接来源于正则表达式中的语法规则。
符号含义解析
$的起源:在正则表达式中,$是一个特殊元字符,用于匹配字符串的结束位置。例如,正则表达式
value$会匹配所有以 "value" 结尾的字符串。在属性选择器中的延续:CSS 和 jQuery 沿用了这一约定,
$=表示属性值必须精确以value结尾。例如,
[href$=".pdf"]会匹配所有href属性值以.pdf结尾的元素。
实际应用示例
以下代码演示了 $= 选择器的用法:
<a href="document.pdf">PDF 文件</a> <a href="image.png">图片</a> <a href="report.txt">文本文件</a>
使用 $(".pdf") 会选择第一个链接,因为其 href 值以 .pdf 结尾。
与其他选择器的对比
^=:匹配属性值以指定字符串开头的元素(正则中的^表示开始)。*=:匹配属性值中包含指定字符串的元素(正则中的*表示任意位置)。
这种设计使得属性选择器能够灵活地基于属性值的不同部分进行匹配,类似于正则表达式的功能。