摘要:a { color: #00c; }a.mailto { background: url(images/mail.png) no-repeat right top; padding-right: 18px;}

脚本宝典收集整理的这篇文章主要介绍了

javascript代码实例教程-(3)选择元素――(7)为链接加样式(Styling links)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 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:

 

新添加的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');

});

属性选择器也可以连接使用,比如,我们可以为所有以http开头,而且在某个位置含有henry的href属性添加一个henrylink类:

$(document).ready(function() {

$('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链接有着白色的背景和黑色的边框。

 

 

 

 

 

 

 

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

javascript代码实例教程-(3)选择元素――(7)为链接加样式(Styling links)

全部内容,希望文章能够帮你解决

javascript代码实例教程-(3)选择元素――(7)为链接加样式(Styling links)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过