题

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

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

目前，我使用CSS进行此类工具提示。我有一个父div，它包含类<！>“; <！>”的目标图标的图像。然后我在其中有一个div，其中包含类<！> quot; tooltip <！> quot;那，在<！>“的悬停状态下; info <！>”;显示它所包含的类，但是在正常状态下是隐藏的。当我读到它时，我认为这是相当聪明的，因为没有使用JavaScript，它适用于任何符合CSS的浏览器。

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

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

由于

PS：完全不相关，但Firefox似乎认为<！> quot; degradability <！> quot;不是一个单词，而是<！> quot; biodegradability <！> quot; （使用<！>“bio <！>”;前缀）是。奇怪的...

有帮助吗？

解决方案

如果您考虑<！>“级联订单<！>”;对于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的分离的最简单解决方案是< strong>删除您的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。

其他提示

如果可以在CSS中完成某些事情，我说保持这种方式。如果浏览器中缺少javascript是一个问题，那么大多数时候我会显示整个页面不受影响。

比如说，当点击一个复选框时，我将使用jQuery来切换一个元素。在页面加载时，我查看复选框并相应地更新元素。如果未启用javascript，则元素仍将显示，并且该网站仍可使用。只是不那么好。

伙计，你有一个基于浏览器的游戏，对吧？禁用js的用户不到1％！并且1％是世界末日的数字，因为我可以下注，你的数量少于那个;）

无论如何，如果你真的关心这个，那就去做一个没有任何javascript的网站。并使其功能100％。在您的网站完全没有任何js风格的情况下，只需使用jquery（或任何其他库来开始改进; jquery是最好的：P）。但要小心：不要改变任何你的HTML。它比它看起来容易;）

是的，如果你的东西在没有js的情况下运行（比如那些工具提示），请保留它！

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top