Let's say we want to have different styles for different types of links. We first define the styles in our stylesheet, as follows:
a { color: #00c; }a.mailto { background: url(images/mail.png) no-repeat right top; padding-right: 18px;}
Then, we add the three classes―mailto, pdflink, and henrylink―to the appropriate links using jQuery.To
add a class for all e-mail links, we construct a selector that looks for all anchor elements (a) with an href attribute ([href]) that begins with mailto: (^="mailto:"), as follows:
$(document).ready(function() { $('a[href^="mailto:"]').addClass('mailto');});
Because
of the rules defined in the page's stylesheet, an envelope image appears after all mailto: links on the page, as shown in the following screenshot:
我们想让不同的链接有不同的颜色，我们首先在样式表中定义样式，如下：
a { color: #00c; }a.mailto { background: url(images/mail.png) no-repeat right top; padding-right: 18px;}
然后，我们添加三个类――mailto，pdflink和henrylink――使用jquery确定链接。为了给所有的email链接加上一个类，我们建立了一个选择器，找到了所有的有着href属性的锚元素，而且是以mailto开头的：（^="mailto"）如下：
$(document).ready(function() { $('a[href^="mailto:"]').addClass('mailto');});
由于在页面的样式表中定义的规则，一个信封的图片将显示在页面上所有的mailto链接后面，正如下面的－展示的那样：
To add a class for all links to PDF files, we use the dollar sign rather than the caret symbol. This is because we're selecting links with an href attribute that ends with .pdf,
as follows:
$(document).ready(function() { $('a[href^="mailto:"]').addClass('mailto'); $('a[href$=".pdf"]').addClass('pdflink');});
为了给所有到PDF文件的链接加上一个类，我们使用美元符号而不是脱字符号^。这是因为我们正在选择一个href属性是以.pdf结尾的链接，如下：
$(document).ready(function() { $('a[href^="mailto:"]').addClass('mailto'); $('a[href$=".pdf"]').addClass('pdflink');});
The stylesheet rule for the newly-added pdflinkclass causes an Adobe Acrobat icon
to appear after each link to a PDF document, as shown in the following screenshot:
to appear after each link to a PDF document, as shown in the following screenshot:
新添加的pdflink类的样式规则在每一个到PDF文件的链接后面加上了一个Adobe Acrobat图标，正如下面的截屏显示的那样：
Attribute selectors can be combined as well. We can, for example, add a henrylinkclass for all links with an hrefvalue that both starts with httpand contains henry anywhere:
$(document).ready(function() {
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href^="http"][href*="henry"]')
.addClass('henrylink');
});
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href^="http"][href*="henry"]')
.addClass('henrylink');
});
属性选择器也可以连接使用，比如，我们可以为所有以http开头，而且在某个位置含有henry的href属性添加一个henrylink类：
$(document).ready(function() {
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href^="http"][href*="henry"]')
.addClass('henrylink');
});
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href^="http"][href*="henry"]')
.addClass('henrylink');
});
With the three classes applied to the three types of links, we should see the following:
在这三个类添加到这三种链接以后，我们会看到下面这样的界面：
In the preceding screenshot, note the PDF icon to the right of the Hamletlink, the envelope icon next to the emaillink, and the white background and black border around the Henry Vlink.
在之前的截屏中，你会看到PDF文件的图标在Hamlet链接的右侧，邮件图片在邮件链接的旁边，Henry V链接有着白色的背景和黑色的边框。