通过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代码不需要做什么改动。



相关阅读:
Linux下关闭不必要的系统服务以加快速度
Red Hat Linux 安全设置指南
Firebug 字幕文件JSON地址获取代码
PHP 截取字符串函数整理(支持gb2312和utf-8)
用Rman的Plus archvielog简化数据库备份
Web服务器控件:TableRow控件
Windows Server 2003几个实用小技巧
校验普通电话、传真号码的正则表达式(可以+开头,除数字外,可含有-)
一个简单实现多条件查询的例子
用ASP.NET包装第三方组件以提供服务的尝试
ASP利用XMLHTTP实现表单提交以及cookies的发送的代码
UpdatePanel触发javascript脚本的方法附代码
ASP.net控件开发系列之(一)开篇
RPM中几个生辟但有用的命令参数
快速导航

Copyright © 2016 phpStudy |