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

之前写过利用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，再次搞定，折腾下一个去啦！ ^ ^

2009.11.04 18:55:31 / 标签: jQuery,图标,附件 / 分类: 折腾WP

林木木

- 2009/11/04 于 20:25:46 1L

@

Hobo

呵呵,实现的代码很简单,但是功能很实用
- - 2009/11/04 于 20:29:49 B1
  
  @
  
  林木木
  
  是的，而且兼容性非常好！
- 2009/11/04 于 20:40:42 2L

@

王盼盼

唉，连续几天了。都是这种代码。
- - 2009/11/04 于 20:48:44 B1
  
  @
  
  林木木
  
  哈哈，现在满脑子都是jquery的代码哦……
- 2009/11/04 于 21:15:31 3L

@

niuhuifei

很实用的东西，不过我还是用来ｃｓｓ的方法，不管IE6了。
- - 2009/11/04 于 22:26:57 B1
  
  @
  
  林木木
  
  我是既然用了jquery那就物尽其用，顺便还把兼容性搞定，何乐不为~~
- 2009/11/04 于 21:22:02 4L

@

万戈

用CSS加个背景不就可以实现了吗？
- 2009/11/04 于 21:28:51 5L

@

Dianso

恩，的确在IE6能正常显示，那个kill ie6的提示是怎么弄出来的啊？
- - 2009/11/04 于 22:27:58 B1
  
  @
  
  林木木
  
  加了一个JS，你看下网页的源代码就知道了。
  - - 2009/11/04 于 23:02:31 B2
    
    @
    
    Dianso
    
    恩，弄好啦。
    - - 2009/11/04 于 23:04:24 B3
      
      @
      
      林木木
      
      一起FK IE6！
      - - 2010/04/14 于 17:36:15 B4
        
        @
        
        zr
        
        那个网站其实不是我的，帮别人做的
- 2009/11/04 于 22:01:15 6L

@

摩凝(M.Chan)

继续围观凑热闹，呵呵
- - 2009/11/04 于 22:28:24 B1
  
  @
  
  林木木
  
  哈哈，多谢盖楼~~
- 2009/11/04 于 22:51:19 7L

@

xifs

好吧，我就留下个Linux的邪恶脚丫好啦
- - 2009/11/04 于 23:03:23 B1
  
  @
  
  林木木
  
  额，可爱的小企鹅~~
- 2009/11/04 于 23:42:52 8L

@

A.shun

我就是用你上次的方法。。不管IE6了，嘿嘿
- - 2009/11/05 于 11:51:39 B1
  
  @
  
  林木木
  
  我是反正在折腾jquery那既然也可以，那就顺便也用jquery了~
- 2009/11/05 于 14:13:20 9L

@

阿修

可是我想了想，我好像不怎么用附件……
- - 2009/11/06 于 12:48:05 B1
  
  @
  
  林木木
  
  不怎么用那也没必要折腾这啦~~
- 2009/11/06 于 12:42:52 10L

@

pfdiy

以前的就挺好…但是有个问题… u.115.com 图标显示不了….木木观察一下啊也是网盘.
- - 2009/11/06 于 20:56:35 B1
  
  @
  
  林木木
  
  $(“a[href^=http://www.rayfile.com]，a[href^=http://u.115.com]“).addClass(“rayfile”);
  这样就行了呀，网址一定是链接最前面的部分！
- 2009/11/06 于 19:15:05 11L

@

左岸读书

那些链接怎么办？又不能点~
- - 2009/11/06 于 21:03:43 B1
  
  @
  
  林木木
  
  直接114了吧？哈哈，改了改了。
  - - 2009/11/07 于 14:41:17 B2
    
    @
    
    小棒打鼓
    
    套上一层，看看
- 2009/11/07 于 14:40:57 12L

@

小棒打鼓

最出彩的是这个嵌套评论，效果真好，特别是虚线，很整齐，很强大，但是我就是不改我的，哈哈。
- - 2009/11/07 于 14:56:46 B1
  
  @
  
  林木木
  
  MG12的主题强大是强大，缺点也随之而来，你想玩转这个主题？难！
- 2009/11/08 于 14:12:24 13L

@

忆往事

很漂亮啊。一看就想点，一点就下载，哈哈。
- - 2009/11/09 于 12:55:39 B1
  
  @
  
  林木木
  
  IE会自动下载？我都改成#啦……
  - - 2009/11/12 于 22:17:31 B2
    
    @
    
    忆往事
    
    不是说一点就能下载文件，我是说，上网上的，一看到这样的图标就想去点一下，然后能下到点什么，哈哈。
    - - 2009/11/12 于 22:27:08 B3
      
      @
      
      林木木
      
      呵呵，这个好事！有让你冲动有点击的欲望，不错不错！
      - - 2009/11/12 于 22:29:58 B4
        
        @
        
        忆往事
        
        嗯。可我白冲动了。哈哈。
- 2009/11/08 于 23:31:21 14L

@

510博客

为什么你们这那么火呢？
- - 2009/11/09 于 12:56:03 B1
  
  @
  
  林木木
  
  一些朋友啦，互相走动多了~
- 2009/11/11 于 13:43:31 15L

@

HzlzH

超级喜欢jQuery，简洁而实用，和你一样在学，就是练的少了点
- - 2009/11/11 于 15:22:18 B1
  
  @
  
  林木木
  
  这个得多练练，看得懂，自己写还是错误一大堆……
- 2009/11/12 于 12:29:04 16L

@

gil

我是个jQuery盲，只好用现成的了，这个绝对要赞一个！~~
- - 2009/11/12 于 12:43:26 B1
  
  @
  
  林木木
  
  代码简单，实用且兼容性好~~
- 2009/11/22 于 01:01:59 17L

@

Junan

jQuery 在哪个文件呀？？
- 2009/12/27 于 10:18:05 18L

@

pfdiy

ed2k://ed2k:// 这样前缀的怎么写啊偶像？
- 2010/03/11 于 11:17:06 19L

@

ibuffalo

看到另一套gif格式文件图标，比较精致，大家可选用。
http://webfan.kilu.de/?p=20
- - 2010/03/11 于 16:37:49 B1
  
  @
  
  林木木
  
  嗯，不错不错~~
- 2010/05/17 于 10:44:33 20L

@

Dark

jQuery 要添加在哪里啊？能详细下吗？
- - 2010/05/17 于 11:38:29 B1
  
  @
  
  小闇
  
  http://immmmm.com/how-to-use-jquery-code.html
  - - 2010/05/17 于 13:37:20 B2
    
    @
    
    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;}
    
    还是不能显示效果？请问为何？
    - - 2010/05/17 于 14:20:05 B3
      
      @
      
      林木木
      
      请再认真看看文章好吗？
      - - 2010/05/19 于 14:13:08 B4
        
        @
        
        Dark
        
        成功了一次问题在于要添加在主文件的header.php文件上
        而之前只添加在主题上的header上.
        
        但换一个主题用同样方法就又不行了…!
        
        郁闷.!
- 2010/07/04 于 21:57:56 21L

@

kaka

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的程序~

为什么就是不显示图标呢？
- - 2010/07/05 于 11:52:30 B1
  
  @
  
  林木木
  
  是不是没加载jQuery库？
- 2010/07/05 于 13:56:45 22L

@

荒野无灯

我的附件下载URL木有后缀，这个暂时用不上喽
- - 2010/07/05 于 17:15:25 B1
  
  @
  
  林木木
  
  只能做个对网盘URL的图标了～
- 2010/07/05 于 15:54:30 23L

@

kaka

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

@

kaka

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

不是这个么？？我是纯新手~~
- 2010/07/05 于 18:05:55 25L

@

kaka

大哥~博主 ~帅哥~~感激不尽 ~~因为之前有个前辈跟我说zblog自带jQuery库文件。。不用另外加载了 ~所以昨天搞了一天都没搞定~~~还是帅哥您一句话指点了我啊~~实在是感激不尽 ~~谢谢了 ~~
- - 2010/07/05 于 18:24:21 B1
  
  @
  
  林木木
  
  http://immmmm.com/how-to-use-jquery-code.html

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

点击这里取消回复。

相关文章最新文章随机文章