JQuery 学习笔记之：为附件添加个性图标

4 十一月, 2009

之前写过利用CSS的选择器实现《为不同类型的附件添加个性图标》，效果理想，唯一遗憾的就是IE6下无效。关注小站的童鞋都了解，小弟这几天都在死命的折腾jQuery，所以今儿来个jQuery版的，而且完美兼容各大浏览器哦！

效果演示：.doc，.pdf，.7z，http://www.rayfile.com

jQuery代码：

 
$("a[href$=.doc]").addClass("doc");  //对a标签内href属性中以“.doc”结尾的，为其添加CSS类class="doc"
 
$("a[href$=.pdf]").addClass("pdf");  //同上
 
$("a[href$=.zip],a[@href$=.7z]").addClass("zip");  //对a标签内href属性中以“.zip”或“.7z”结尾的，为其添加CSS类class="zip"
 
$("a[href^=http://www.rayfile.com]").addClass("rayfile");  //对a标签内href属性中以“http://www.rayfile.com”开始的，为其添加CSS类class="rayfile"

 
jQuery(document).ready(function($){
 
　　请把上述代码添加至此区域内才有效，另外别忘了加载jQuery库……
 
});

通过jQuery我们已经分别为链接中“.doc，.pdf，.zip .7z，http://www.rayfile.com”添加了对应的CSS类，下面就是为这些类写的CSS：

 
a.doc{background:url(images/word.gif) no-repeat left center;padding-left:19px;}
 
a.pdf{background:url(images/pdf.gif) no-repeat left center;padding-left:19px;}
 
a.zip{background:url(images/rar.gif) no-repeat left center;padding-left:19px;}
 
a.rayfile{background:url(images/attach.gif) no-repeat left center;padding-left:19px;}

OK，再次搞定，折腾下一个去啦！ ^ ^

58 评论

Hobo ：
2009/11/4 20:25:20 #1

回复
呵呵,实现的代码很简单,但是功能很实用
- 林木木：
  
  回复
  是的，而且兼容性非常好！
王盼盼：
2009/11/4 20:40:20 #2

回复
唉，连续几天了。都是这种代码。
- 林木木：
  
  回复
  哈哈，现在满脑子都是jquery的代码哦……
niuhuifei ：
2009/11/4 21:15:21 #3

回复
很实用的东西，不过我还是用来ｃｓｓ的方法，不管IE6了。
- 林木木：
  
  回复
  我是既然用了jquery那就物尽其用，顺便还把兼容性搞定，何乐不为~~
万戈：
2009/11/4 21:22:21 #4

回复
用CSS加个背景不就可以实现了吗？
Dianso ：
2009/11/4 21:28:21 #5

回复
恩，的确在IE6能正常显示，那个kill ie6的提示是怎么弄出来的啊？
- 林木木：
  
  回复
  加了一个JS，你看下网页的源代码就知道了。
  - Dianso ：
    
    回复
    恩，弄好啦。
    - 林木木：
      
      回复
      一起FK IE6！
      - zr ：
        
        回复
        那个网站其实不是我的，帮别人做的
摩凝(M.Chan) ：
2009/11/4 22:01:22 #6

回复
继续围观凑热闹，呵呵
- 林木木：
  
  回复
  哈哈，多谢盖楼~~
xifs ：
2009/11/4 22:51:22 #7

回复
好吧，我就留下个Linux的邪恶脚丫好啦
- 林木木：
  
  回复
  额，可爱的小企鹅~~
A.shun ：
2009/11/4 23:42:23 #8

回复
我就是用你上次的方法。。不管IE6了，嘿嘿
- 林木木：
  
  回复
  我是反正在折腾jquery那既然也可以，那就顺便也用jquery了~
阿修：
2009/11/5 14:13:14 #9

回复
可是我想了想，我好像不怎么用附件……
- 林木木：
  
  回复
  不怎么用那也没必要折腾这啦~~
pfdiy ：
2009/11/6 12:42:12 #10

回复
以前的就挺好…但是有个问题… u.115.com 图标显示不了….木木观察一下啊也是网盘.
- 林木木：
  
  回复
  $(“a[href^=http://www.rayfile.com]，a[href^=http://u.115.com]“).addClass(“rayfile”);
  这样就行了呀，网址一定是链接最前面的部分！
左岸读书：
2009/11/6 19:15:19 #11

回复
那些链接怎么办？又不能点~
- 林木木：
  
  回复
  直接114了吧？哈哈，改了改了。
  - 小棒打鼓：
    
    回复
    套上一层，看看
小棒打鼓：
2009/11/7 14:40:14 #12

回复
最出彩的是这个嵌套评论，效果真好，特别是虚线，很整齐，很强大，但是我就是不改我的，哈哈。
- 林木木：
  
  回复
  MG12的主题强大是强大，缺点也随之而来，你想玩转这个主题？难！
忆往事：
2009/11/8 14:12:14 #13

回复
很漂亮啊。一看就想点，一点就下载，哈哈。
- 林木木：
  
  回复
  IE会自动下载？我都改成#啦……
  - 忆往事：
    
    回复
    不是说一点就能下载文件，我是说，上网上的，一看到这样的图标就想去点一下，然后能下到点什么，哈哈。
    - 林木木：
      
      回复
      呵呵，这个好事！有让你冲动有点击的欲望，不错不错！
      - 忆往事：
        
        回复
        嗯。可我白冲动了。哈哈。
510博客：
2009/11/8 23:31:23 #14

回复
为什么你们这那么火呢？
- 林木木：
  
  回复
  一些朋友啦，互相走动多了~
HzlzH ：
2009/11/11 13:43:13 #15

回复
超级喜欢jQuery，简洁而实用，和你一样在学，就是练的少了点
- 林木木：
  
  回复
  这个得多练练，看得懂，自己写还是错误一大堆……
gil ：
2009/11/12 12:29:12 #16

回复
我是个jQuery盲，只好用现成的了，这个绝对要赞一个！~~
- 林木木：
  
  回复
  代码简单，实用且兼容性好~~
Junan ：
2009/11/22 01:01:1 #17

回复
jQuery 在哪个文件呀？？
pfdiy ：
2009/12/27 10:18:10 #18

回复
ed2k://ed2k:// 这样前缀的怎么写啊偶像？
ibuffalo ：
2010/3/11 11:17:11 #19

回复
看到另一套gif格式文件图标，比较精致，大家可选用。
http://webfan.kilu.de/?p=20
- 林木木：
  
  回复
  嗯，不错不错~~
Dark ：
2010/5/17 10:44:10 #20

回复
jQuery 要添加在哪里啊？能详细下吗？
- 小闇：
  
  回复
  http://immmmm.com/how-to-use-jquery-code.html
  - Dark ：
    
    回复
    已经在主题文件header.php 加载了以上代码
    
    并在 style.css 加入如下代码
    /* 附件图标 */
    a.doc{background:url(images/word.gif) no-repeat left center;padding-left:19px;}
    a.pdf{background:url(images/pdf.gif) no-repeat left center;padding-left:19px;}
    a.zip{background:url(images/rar.gif) no-repeat left center;padding-left:19px;}
    a.txt{background:url(images/text.gif) no-repeat left center;padding-left:19px;}
    a.rayfile{background:url(images/attach.gif) no-repeat left center;padding-left:19px;}
    
    还是不能显示效果？请问为何？
    - 林木木：
      
      回复
      请再认真看看文章好吗？
      - Dark ：
        
        回复
        成功了一次问题在于要添加在主文件的header.php文件上
        而之前只添加在主题上的header上.
        
        但换一个主题用同样方法就又不行了…!
        
        郁闷.!
kaka ：
2010/7/4 21:57:21 #21

回复
js文件我改成了 jQuery(function($) {
//附件图标
　　 $(“.darkitcn a[href$=.doc]“).addClass(“doc”);
　　 $(“.darkitcn a[href$=.exe]“).addClass(“exe”);
$(“.darkitcn a[href$=.pdf]“).addClass(“pdf”);
$(“.darkitcn a[href$=.zip], .darkitcn a[href$=.7z],.darkitcn a[href$=.rar]“).addClass(“zip”);
$(“.darkitcn a[href^=http://www.rayfile.com]“).addClass(“rayfile”);
$(“.darkitcn a[href^=http://www.dbank.com]“).addClass(“dbank”);
$(“.darkitcn a[href^=http://d.namipan.com]“).addClass(“nami”);
$(“.darkitcn a[href^=thunder://]“).addClass(“thunder”);
$(“.darkitcn a[href^=Flashget://]“).addClass(“Flashget”);
$(“.darkitcn a[href^=qqdl://]“).addClass(“qqd”);
$(“.darkitcn a[href^=ed2k://]“).addClass(“ed2k”);
});

在header里面加载了这个js。css里面也添加了代码，在文章模板里面也添加了darkitcn的class标签。。为什么不显示呢？？

我是zblog的程序~

为什么就是不显示图标呢？
- 林木木：
  
  回复
  是不是没加载jQuery库？
荒野无灯：
2010/7/5 13:56:13 #22

回复
我的附件下载URL木有后缀，这个暂时用不上喽
- 林木木：
  
  回复
  只能做个对网盘URL的图标了～
kaka ：
2010/7/5 15:54:15 #23

回复
实在是不好意思~中午出去了。。
我现在是完全按照您的方法来的
是这样的。。但是图标就是无法显示。。在文章的源代码里面也有加载的js文件。。
请教博主。。望回复！！！
- 林木木：
  
  回复
  是不是没加载jQuery库？！！！！！
  哥们，这是jQuery代码，需要加载jQuery库文件的……
kaka ：
2010/7/5 17:57:17 #24

回复
请问如何加载jQuery库文件？感激不尽

不是这个么？？我是纯新手~~
kaka ：
2010/7/5 18:05:18 #25

回复
大哥~博主 ~帅哥~~感激不尽 ~~因为之前有个前辈跟我说zblog自带jQuery库文件。。不用另外加载了 ~所以昨天搞了一天都没搞定~~~还是帅哥您一句话指点了我啊~~实在是感激不尽 ~~谢谢了 ~~
- 林木木：
  
  回复
  http://immmmm.com/how-to-use-jquery-code.html
奚少：
2011/3/27 12:14:12 #26

回复
JQuery的实现不了，囧。。。只好css的了。。。
- 林木木：
  
  回复
  CSS也不错啦，只是IE6不支持而已～

发表评论取消回复

< >

木木木木木

JQuery 学习笔记之：为附件添加个性图标

发表评论 取消回复

发表评论取消回复