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

时间: 2024-11-01 06:59:10

通过jQuery在IE6中实现选择器标签的相关文章

jquery解决ie6中图片过大导致错位解决方法

jquery解决ie6中图片过大导致错位解决方法 在产品展示页面中用jqurey控制下: /*这个标签调用产品图片*/ <asp教程:image runat="server" id="productbigimg" /> 首先引入jquery <script src="/utility/js/jquery.js" type="text/网页特效"></script> <script ty

使用jQuery在对象中缓存选择器的简单方法

  这篇文章主要介绍了使用jQuery在对象中缓存选择器的简单方法,jQuery是最知名的JavaScript库,需要的朋友可以参考下 当使用像jQuery这样的库时,开发者通常会使用选择器来访问和操作DOM中的元素.当一个选择在页面上被反复的访问时,把它缓存起来以获得更好的性能是个不错的想法. 让我们看一个例子, ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 jQuery(document).ready(function() { jQuery('

使用jQuery在对象中缓存选择器的简单方法_jquery

 当使用像jQuery这样的库时,开发者通常会使用选择器来访问和操作DOM中的元素.当一个选择在页面上被反复的访问时,把它缓存起来以获得更好的性能是个不错的想法. 让我们看一个例子,   jQuery(document).ready(function() { jQuery('#some-selector').on('hover', function() { jQuery(this).fadeOut('slow').delay(400).fadeIn(); console.log(jQuery(t

jquery获取css中的选择器(实例讲解)_jquery

开始写之前先复习一下元素和节点的区别: 元素是W3C文档对象模型(DOM)当中使用最广泛的节点之一. 元素拥有关联的"属性". XmlElement类拥有许多方法来访问它的"属性"(GetAttribute, SetAttribute, RemoveAttribute, GetAttributeNode, 等等). 你也可以使用"Attributes"属性来返回一个支持"名字"或者"序号"访问的"

jQuery EasyUI API 中文文档 - 标签页/选项卡(Tabs)

Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults. 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样. 1. <div id="tt" class="easyui-

JQuery中层次选择器用法实例详解

  本文实例讲述了JQuery中层次选择器用法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 <!DOCTYPE html PUBLIC "-//W3C//DT

JQuery中层次选择器用法实例详解_jquery

本文实例讲述了JQuery中层次选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

火狐中jQuery设置某个class的img标签的width指的问题

问题描述 火狐中jQuery设置某个class的img标签的width指的问题 20C index.html <img class=""ability-img"" ... /> <img class=""ability-img"" ... /> <img class=""ability-img"" ... /> <img class="

JQuery中$之选择器用法介绍_jquery

1.$.在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素.下面举个例子来说明一下: HTML代码 <input name="newsletter" /> <input name="milkman" /&g