通过jQuery在IE6中实现选择器标签_建站学-个人建站指南,网页制作,网站设计,网站制作教程

　在上一篇《CSS属性选择器制作个性化链接样式》中，我们使用css的选择器标签来实现相关功能。但是css 选择器虽然被绝大部分浏览器支持，但是不被该死的IE6支持，那么怎么办呢？是的，我们可以通过jQuery来实现。

　　你可以看到，使用jQuery实现的样式和使用css选择器实现的一模一样，而且它在IE6中被支持。

　　原理是很简单的——通过jQuery的选择器来匹配相关条件，然后动态为该链接添加一个class。比如，jQuery匹配到mailto类型的链接，然后我们在该链接上添加一个mailto的class。

　　jQuery的属性选择器和CSS的基本一致，用法也很类似：

    双击代码全选
    
            $("a[href^='mailto']").addClass("mailto");

　　这里就不再多介绍jQuery的属性选择器了，如果你还不了解，可以查看jQuery官方参考文档。

　　样式方面，我们只需将原来的选择器语法改为class就OK了。

　　最终的样式：

    双击代码全选
    
            a　{ 
  
background:url(a.gif)　no-repeat　right　4px; 
  
padding-right:18px;color:#369;line-height:24px; 
  
} 
  
a.mailto{background-position:right　-242px;} 
  
a.doc{background-position:right　-161px} 
  
a.xls{background-position:right　-282px} 
  
a.pdf{background-position:right　-79px} 
  
a.mp3{background-position:right　-204px} 
  
a.swf{background-position:right　-120px} 
  
a.rar{background-position:right　-38px} 
  
a.home{background-position:right　-328px}

　　最终的js脚本：

    双击代码全选
    
            <script　type="text/javascript"　src="jquery.js"></script> 
  
<script> 
  
　$(document).ready(function(){ 
  
　　$("a[href^='mailto']").addClass("mailto"); 
  
$("a[href$='.doc']").addClass("doc"); 
  
$("a[href$='.mp3']").addClass("mp3"); 
  
$("a[href$='.swf']").addClass("swf"); 
  
$("a[href$='.rar']").addClass("rar"); 
  
$("a[href$='.pdf']").addClass("pdf"); 
  
$("a[href$='.xls']").addClass("xls"); 
  
$("a[href*='qianduan.net']").addClass("home"); 
  
　}); 
  
</script>

　　HTML代码不需要做什么改动。

(责任编辑：admin)

搜索

热门标签:

通过jQuery在IE6中实现选择器标签