Javascript JQuery$未定义_Javascript_Jquery

Javascript JQuery$未定义

javascript jquery

Javascript JQuery$未定义,javascript,jquery,Javascript,Jquery,我把所有的代码都放在index.html文件中，如下所示，但不管我把js、jquery放在哪里，它都不起作用 <!DOCTYPE html> <html> <head> <style> .parallax { position: absolute; width: 100%; height: 800px; overflow: hidden; left: 0; } .water { position: a

我把所有的代码都放在index.html文件中，如下所示，但不管我把js、jquery放在哪里，它都不起作用

<!DOCTYPE html>
<html>
<head>
<style>
.parallax {
    position: absolute;
    width: 100%;
    height: 800px;
    overflow: hidden;
    left: 0;
}
.water {
    position: absolute;
    width: 100%;
    height: 800px;
    left:0;
    background-repeat: no-repeat;
    background-position: top center;
}
.water-layer1 {
    background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-1.png);
}
.water-layer2 {
    background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-2.png);
}
.water-layer3 {
    background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-3.png);
}
.water-layer4 {
    background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-4.png);
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
 <div class="parallax">
    <div class="water water-layer4"></div>
    <div class="water water-layer3"></div>
    <div class="water water-layer2"></div>
    <div class="water water-layer1"></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  var currentX = '';
var currentY = '';
var movementConstant = .015;
$(document).mousemove(function(e) {
  if(currentX == '') currentX = e.pageX;
  var xdiff = e.pageX - currentX;
  currentX = e.pageX;
   if(currentY == '') currentY = e.pageY;
  var ydiff = e.pageY - currentY;
  currentY = e.pageY; 
  $('.parallax div').each(function(i, el) {
      var movement = (i + 1) * (xdiff * movementConstant);
      var movementy = (i + 1) * (ydiff * movementConstant);
      var newX = $(el).position().left + movement;
      var newY = $(el).position().top + movementy;
      $(el).css('left', newX + 'px');
      $(el).css('top', newY + 'px');
  });
});
});

  </script>
</body>
</html>


.视差{
位置：绝对位置；
宽度：100%；
高度：800px；
溢出：隐藏；
左：0；
}
.水{
位置：绝对位置；
宽度：100%；
高度：800px；
左：0；
背景重复：无重复；
背景位置：上中；
}
.防水层1{
背景图片：url(http://elikirk.com/demos/liquipel/images/water-layer-1.png);
}
.水层2{
背景图片：url(http://elikirk.com/demos/liquipel/images/water-layer-2.png);
}
.防水层3{
背景图片：url(http://elikirk.com/demos/liquipel/images/water-layer-3.png);
}
.水层4{
背景图片：url(http://elikirk.com/demos/liquipel/images/water-layer-4.png);
}
$（文档）.ready（函数（）{
var currentX=''；
var currentY=''；
var movementConstant=.015；
$（文档）.mousemove（函数（e）{
如果（currentX=''）currentX=e.pageX；
var xdiff=e.pageX-currentX；
currentX=e.pageX；
如果（currentY=''）currentY=e.pageY；
var ydiff=e.pageY-电流；
电流y=e.pageY；
$（'.parallax div'）。每个（函数（i，el）{
变量移动=（i+1）*（xdiff*移动常量）；
var movementy=（i+1）*（ydiff*movementConstant）；
var newX=$（el）.position（）.left+移动；
var newY=$（el）.position（）.top+movementy；
$（el.css（'left'，newX+'px'）；
$（el.css（'top'，newY+'px'）；
});
});
});

我得到

ReferenceError:$未定义

。jQuery是在脚本之前加载的

这里有什么问题

脚本中未加载jquery库

替换

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

与

快乐编码：）

您已经引用了两次JQuery。删除其中一个并添加引用，如下所述：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" />

不要引用jquery twice只是为了确定，您是在http://或file://中打开文件的吗？在第二种情况下，它无法工作。请仔细检查控制台以确保jQuery已加载。

@iOi主要问题是

表示“使用与主页相同的协议”。如果您是从本地文件（

文件：//

）加载主页，那么这当然是个问题，因为没有

http:

的

//

将意味着浏览器将尝试

文件：//

路径。不，使用//是一个好的做法。他只需要正确地打开主文件。@dystroy:你说的主文件是什么意思？@dystroy实际上他给出了正确的答案。当我使用

http://

@iOi时，它起作用了。当然它“起作用”，但这不是正确的答案。阅读我提供的链接以了解原因。如果将文件部署到服务器上，则使用协议独立的方案是一种良好的做法，但如果页面URL为

file:///C:index.html

什么的。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" />