ID #6546

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


2011-07-01 18:55
阅读:
I'm VC , Just U know Y
本站部分文章来源于互联网,版权归原作者所有。

延伸阅读:

一次JQuery性能优化实战

jquery中使用表单元素选择器

JQuery的扩展接口简单示例

jquery使用attr访问自定义属性,减少javascript脚本中

Jquery弹出层插件Thickbox使用心得