jQuery 适用于 JSFiddle 但不适用于本地 [重复]答案

【问题标题】：jQuery works on JSFiddle but not locally [duplicate]jQuery 适用于 JSFiddle 但不适用于本地 [重复]
【发布时间】：2015-01-21 12:22:54
【问题描述】：

我编写了一个简单的程序来查看 jQuery 是否在本地工作，结果不是。在这个程序中，将鼠标悬停在红色框上会将其下方没有颜色的框变为绿色。

这里是 JSFiddle：http://jsfiddle.net/sBk3M/495/

这是本地的代码（它不起作用）。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<style type="text/css">
    .hoverbox {
        background-color:red;
        width:20px;
        height:20px;
    }

    .showbox {
        width:20px;
        height:20px;
    }
</style>

<script type="text/javascript">

    $('.hoverbox').hover(function() {
        $('.showbox').css("background-color", "green");
    });

</script>

</head>

<body>
    <div class="hoverbox">
    </div>

    <div class="showbox">
    </div>

</body>


</html>

【问题讨论】：

您需要使用dom ready handler，因为您的脚本在目标元素添加到dom之前执行...
在 jsfiddle 中，脚本默认添加到 window.onload 处理程序中...请参阅左侧面板中的第二个下拉菜单（在 Frameworks & Extension 下）
@ArunPJohny 非常感谢，完全忘记添加了。
见not working和working
我推荐阅读jQuery tutorial。

标签： javascript jquery html css

【解决方案1】：

输入这段代码

$(function(){
     $('.hoverbox').hover(function() {
            $('.showbox').css("background-color", "green");
        });

    });

【讨论】：

【解决方案2】：

你可以像下面这样使用：

$(document).ready(function(){
      $('.hoverbox').hover(function() {
          $('.showbox').css("background-color", "green");
      });
});

使用$(document).ready()的参考是jQuery Dom Ready

【讨论】：