jQuery优雅降级

我想在这里和那里用一些jQuery动画修饰我的网站的某些区域,我想完全替换我的AJAX代码,因为我的现有代码存在一些跨浏览器兼容性问题.但是,由于jQuery是一个JavaScript库,我担心当JavaScript关闭或用户浏览器中不存在时,我的页面无法正常运行.

我举一个例子:目前,我正在使用一个纯CSS工具提示来向我的用户(玩家,该网站是一个浏览器游戏)提供有关其他用户的信息.例如,如果游戏中的其他玩家满足一个或多个条件,则在其名称旁边显示目标图标,并且当将鼠标悬停在该目标图标上时,显示关于目标背后的原因的信息.这是有用的信息,因为它可以帮助我的玩家知道他们应该计划在游戏中接下来攻击谁.

目前,我使用CSS做这样的工具提示.我有一个父div,它包含类"info"的目标图标的图像.然后我在其中有一个div,其中包含类"tooltip",它显示了包含在其中的"info"类的悬停状态,但是在正常状态下是隐藏的.当我读到它时,我认为这是相当聪明的,因为没有使用JavaScript,它适用于任何CSS兼容的浏览器.

我想使用jQuery来达到同样的效果,主要是因为它看起来更干净,但也因为我相信快速和微妙的动画可以使这些"随机出现"的东西对用户更有意义,特别是在第一次遭遇.我只是想知道这两者是否会发生冲突.这只是其中的一个例子,还有许多其他例子,无法使用JavaScript会妨碍网站.

所以我想问的是,如何让一个jQuery网站在不支持JavaScript的浏览器上优雅地降级,但是否支持大多数CSS呢？我的目标是让网站在所有用户的基本级别上运行,无论选择何种浏览器.动画就是一个很好的例子,但是我也担心更多的动态比特,比如用AJAX自动更新等等.有没有什么好的资源可以实现这个目标,或者你对最好的方法有任何建议这种可降解性可以实现吗？

谢谢

PS:完全无关紧要,但Firefox似乎认为"降解性"不是一个词,而是"生物降解性"(带有"生物"前缀).奇怪的...

如果您考虑css的"级联顺序",您是否可以在所有先前的CSS定义的最后添加css样式以取消您目前对工具提示效果的任何CSS效果？

只有在Javascript被激活并且检测到JQuery时才会声明该css规则.

这样,您确定您的css工具提示效果与您的JQuery效果不冲突.

就像是:

a.info:hover span{ display:none}

使用"js_enabled"类使这个css规则有条件.

您也可以通过动态添加css规则来实现:

function createCSSRule(rule,attributes)
{
    //Create the CSS rule
    var newRule = "\n"+rule+"{\n";
    for (var attribute in attributes)
    {
        newRule += "\t" + attribute + ": " + attributes[attribute] + ";\n";
    }
    newRule += "}\n";

    //Inject it in the style element or create a new one if it doesn't exist
    styleTag = $E('style[type="text/css"]') || new Element("style").setProperty('type','text/css').injectInside(document.head);
    if(window.ie)
    {
        styleTag.styleSheet.cssText += newRule;
    }
    else
    {
        styleTag.appendText(newRule);
    }
}

分离CSS和Javascrip的最简单的解决方案是删除你的css类

function jscss(a,o,c1,c2)
{
  switch (a){
    case 'swap':
      o.className=!jscss('check',o,c1)?o.className.replace(c2,c1): <-
      o.className.replace(c1,c2);
    break;
    case 'add':
      if(!jscss('check',o,c1)){o.className+=o.className?' '+c1:c1;}
    break;
    case 'remove':
      var rep=o.className.match(' '+c1)?' '+c1:c1;
      o.className=o.className.replace(rep,'');
    break;
    case 'check':
      return new RegExp('\\b'+c1+'\\b').test(o.className)
    break;
  }
}

此示例函数有四个参数:

a
定义您希望函数执行的操作.
o
有问题的对象.
c1
第一个类
c2
的名称是第二个类的名称

可能的行动是:

swap
用对象o中的类c2替换类c1.
add
将类c1添加到对象o.
remove
从对象o中删除类c1.
check
测试类c1是否已应用于对象o并返回true或false.