这是将jquery插入HTML的正确方法吗?

时间:2014-12-11 16:45:30

标签: javascript jquery html

在您发表评论说我应该在询问前进行研究之前,我已经研究过并发现它没有任何帮助。这是我第一次使用Jquery而且对此毫不逊色,只需要帮助。我很感激你的帮助。

这是我的代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="../../../../../../Coding/websites/Procrastinationwebsite/stylesheets/jquery-1.11.1.min.js"></script>
<script>
$("body").click(function(){
    $(".overlay, .popup").fadeToggle();
})
</script>

<style type="text/css">
html,
body {
    height: 100%;
}
.overlay {
    position:absolute;
    display:none; 

    /* color with alpha transparency */
    background-color: rgba(0, 0, 0, 0.7);

    /* stretch to screen edges */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.popup {
    position: absolute;
    width: 300px;
    height: 150px;
    display: none;
    background-color: white;
    text-align: center;

    /* center it ? */
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -75px;
}
</style>
</head>

<body>

<div class="overlay"></div>
<div class="popup">Some popup text</div>
<p>Some content text (click anywhere to toggle overlay)</p>

</body>
</html>

它应该这样做:

http://jsfiddle.net/eohvutps/

但是当我点击时没有弹出并且看起来好像根本没有读取jquery。我插错了吗?请记住我已经研究过,这是我第一次使用jquery。

2 个答案:

答案 0 :(得分:2)

你必须考虑两件事:

  1. 在外部文件中添加脚本。
  2. 将代码包含在document.ready事件中,这将保证在加载DOM后执行所有代码:

    $(document).ready(function(){ $("body").click(function(){ $(".overlay, .popup").fadeToggle(); }); });

  3. 还要考虑将您的jquery文件移动到名为 js 脚本的文件夹中。即使你可以使用jQuery CDN

答案 1 :(得分:1)

您可以考虑使用绝对URL来加载jquery.js。好像你正在遍历大量的目录,但在你试图移动文档之前,这并不重要。

哦,是的,并准备好上述答复。这可能是您遇到的问题。这是文档就绪的较短等价物。

$(function() {

 // jquery stuff 

});