2.4 属性选择符

属性选择符是CSS选择符中特别有用的一类选择符。顾名思义,属性选择符通过HTML元素的属性选择元素,例如链接的title属性或图像的alt属性。例如,要选择带有alt属性的所有图像元素,可以使用以下代码:

1	$('img[alt]')

为链接添加样式

属性选择符使用一种从正则表达式中借鉴来的通配符语法,

以^表示值在字符串的开始,
以$表示值在字符串的结尾。
用星号*表示要匹配的值可以出现在字符串中的任意位置,
用叹号!表示对值取反。

假设我们想以不同的文本颜色来显示不同类型的链接,那么首先要在样式表中定义如下样式:

a { 
  color: #00c;  
} 
a.mailto { 
  background: url(images/email.png) no-repeat right top; 
  padding-right: 18px; 
} 
a.pdflink { 
  background: url(images/pdf.png) no-repeat right top; 
  padding-right: 18px; 
} 
a.henrylink { 
  background-color: #fff; 
  padding: 2px; 
  border: 1px solid #000; 
}

然后,可以使用jQuery为符合条件的链接添加3个类:mailto、pdflink和henrylink。

要为所有电子邮件链接添加类,需要构造一个选择符,用来寻找所有带href属性([href])且以mailto开头(^="mailto:"])的锚元素(a)。结果如代码清单2-3所示。

1
2
3

$(document).ready(function() { 
  $('a[href^="mailto:"]').addClass('mailto'); 
});

因为我们在页面的样式表中定义了相应的规则,所以页面中所有mailto:链接的后面都会出现一个信封图标,如图2-5所示。

要为所有指向PDF文件的链接添加类,需要使用美元符号($)而不是脱字符号(^) 。这是因为我们要选择所有href属性以.pdf结尾的链接,如代码清单2-4所示。

$(document).ready(function() { 
  $('a[href^="mailto:"]').addClass('mailto'); 
  $('a[href$=".pdf"]').addClass('pdflink'); 
});

因为有已经定义的样式表规则,新添加的pdflink类也会导致每个PDF文档链接后面出现Adobe Acrobat图标,如图2-6所示。

属性选择符也可以组合使用。例如,可以为href属性即以http开头且任意位置包含henry的所有链接添加一个henrylink类,如代码清单2-5所示。

$(document).ready(function() {
  $('#selected-plays > li').addClass('horizontal');
  $('#selected-plays li:not(.horizontal)').addClass('sub-level');

  $('a[href^="mailto:"]').addClass('mailto');
  $('a[href$=".pdf"]').addClass('pdflink');
  $('a[href^="http"][href*="henry"]').addClass('henrylink');
});

在把这3个类应用到3种类型的链接之后,应该看到如图2-7所示的结果。

我们注意到,在这个屏幕截图中,Hamlet链接右侧有一个PDF图标,email链接旁边有一个信封图标,而Henry V链接则带有白色背景和黑色边框。