Javascript jQuery优雅降级

我想用一些jQuery动画来修饰我网站的一些地方，我希望完全替换我的AJAX代码，因为我现有的代码存在一些跨浏览器兼容性问题。然而，由于jQuery是一个JavaScript库，我担心当JavaScript关闭或用户浏览器中不存在时，我的页面无法正常运行

我将举一个例子：目前，我使用纯CSS工具提示向我的用户（玩家，该网站是一个浏览器游戏）提供其他用户的信息。例如，如果游戏中的其他玩家满足一个或多个条件，则会在其姓名旁边显示一个目标图标，当鼠标悬停在该目标图标上时，会显示有关目标背后原因的信息。这是有用的信息，因为它帮助我的玩家知道他们应该计划在游戏中攻击谁

目前，我使用CSS来做这些工具提示。我有一个父div，它保存类“info”的目标图标的图像。然后我在里面有一个div类“tooltip”，它在包含它的“info”类的悬停状态下显示，但在正常状态下隐藏。当我读到它时，我认为它相当聪明，因为没有使用JavaScript，所以它可以在任何符合CSS的浏览器上工作

我想使用jQuery来实现同样的效果，主要是因为它看起来更干净，但也因为我相信快速而微妙的动画可以让这些“随机出现”的东西对用户更有意义，尤其是在第一次见面时。我只是想知道这两者是否会冲突。这只是其中的一个例子，还有许多其他的例子，无法使用JavaScript会阻碍网站的发展

所以我想问的是，在不支持JavaScript但支持大多数CSS的浏览器上，如何使jQuery站点优雅地降级？我的目标是让网站在一个基本的层面上为所有用户服务，而不管他们在浏览器中的选择如何。动画是一个很好的例子，但我也担心更具动态性的部分，比如使用AJAX进行自动更新等。关于如何实现这一点，是否有好的资源，或者您对实现这种可降解性的最佳方法有什么建议

谢谢

PS：完全不相关，但Firefox似乎认为“可降解性”不是一个词，而“生物降解性”（前缀为“bio”）是一个词。如果你考虑CSS的“级联顺序”，你能不能在你以前的CSS定义的末尾添加一个CSS样式，以取消你目前对工具提示效果的任何CSS效果？

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

这样，您就可以确定您的JQuery效果与您的JQuery效果没有冲突

比如：

a.info:hover span{ display:none}

使用“js_enabled”类使此css规则有条件

您还可以通过以下方式完成：

---

最简单的解决方案是删除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;
  }
}

函数jscss（a、o、c1、c2） { 开关（a）{ “交换”案例：

---

o、 className=！jscss（'check'，o，c1）？o.className.replace（c2，c1）：如果某些事情可以完全用CSS来完成，我说保持这种方式。如果浏览器中缺少javascript是一个问题，那么大多数时候我显示整个页面时不会受到影响

---

比如说，当点击复选框时，我将使用jQuery切换元素。在页面加载时，我查看复选框并相应地更新元素。如果未启用javascript，元素仍然会出现，站点仍然可用。只是没有那么好。

伙计，你有一个基于浏览器的游戏，对吗？你拥有的不到1%u禁用JS的sers！这1%是世界末日的数字，因为我敢打赌，你拥有的比这还少；）

无论如何，如果你真的关心这个问题，只需在不使用任何JavaScript的情况下创建网站。并使其100%正常运行。在你的网站完全没有任何JS风格之后，只需开始使用jQuery（或任何其他库；jQuery是最好的：p）进行改进。但要小心：不要更改任何HTML。这比看起来容易；）

---

是的，如果你有没有JS就可以使用的东西（比如那些工具提示），那就保留它吧！

完成同样事情的另一种方法是使用javascript（比如class=“JS_enabled”或其他东西）向body标记添加一个类，然后覆盖该类后代的样式规则。嗯……我当前的工具提示使用display:none；在其父类未悬停时隐藏工具提示。因此，理想情况下，如果jQuery正在工作，我需要从类中删除该行CSS，这与本例有点倒退。嗯，确实……哦，当然。第二个在第一步中重写规则。为什么我以前没有想到？（我评论得太快了，刚刚看到第一条评论。）哇，修复实际上非常简单。我只是完全替换了类（使用removeClass和addClass函数）在页面加载我的所有工具提示后，它工作得很好。非常感谢！刚刚添加了“remove class”解决方案，用javascript函数进行了说明。我在网站上的一个控制页面上显示“预览”并禁用无法使用的按钮，等等，我在页面加载后禁用，我熟悉这个逻辑。

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;
  }
}