Uncaught ReferenceError: $ is not defined の対処方法

Question

jqueryの勉強中にハマったエラー箇所

Uncaught ReferenceError: $ is not defined

この内容で検索を掛けると、

参考サイト

jQueryの要素を使うjsファイルが先に来てしまっているのでエラー吐かれているということです。
従って、jqueryを最初に読ませるように、つまり一番上にjqueryを読むよう書けばOK。

なので

試し１回目

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

<script type="text/javascript" src="material/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="material/js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="material/js/languages/jquery.validationEngine-ja.js"></script>

試し２回目

<script type="text/javascript" src="material/js/jquery.js"></script>

<script type="text/javascript" src="material/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="material/js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="material/js/languages/jquery.validationEngine-ja.js"></script>

と、やってみても同じエラーを吐く・・・。

その他のサイトは
参考サイト２

「：uncaught referenceerror $ is not defined」

そして、
オブジェクトを指定して下さい。
コード0
これ、ちゃんとjQueryが読み込めてないんじゃないの？
ということで、いろいろ考えた。
あ、「.htaccess」の問題だ！！
.htaccessで、jsファイルがおいてあるディレクトリまでアクセスが拒否されていたよ！！
っちゅうことで、.htacceessを書き換えたら動いた。

と書いてある所もありました。
(´ε｀；)ｳｰﾝ…わからん

補足：
上記の内容無しでも同じくエラーが出る…。

<script type="text/javascript" src="material/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="material/js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="material/js/languages/jquery.validationEngine-ja.js"></script>

(anonymous function) @ login.php:14
とエラーを言っているのでそこへ行くと

<link rel="stylesheet" href="material/css/reset.css" type="text/css" media="all" />
↓エラーを言っている箇所↓
<script type="text/javascript">
$(function() {
	var nav = $('.overimg');
	nav.hover(
		function(){
			$(this).fadeTo(500,0.5);
		},
		function () {
			$(this).fadeTo(500,1);
		}
	);
});		
</script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-1788254-16', 'ecnote.jp');
  ga('send', 'pageview');

</script><link rel="stylesheet" href="material/tpl/default/css/base.css" type="text/css" />
<link rel="stylesheet" href="material/tpl/default/css/jquery.jscrollpane.css" type="text/css"/>
<link rel="stylesheet" href="material/tpl/default/css/validationEngine.jquery.css" type="text/css" />


<script type="text/javascript" src="material/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="material/js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="material/js/languages/jquery.validationEngine-ja.js"></script>

<script type="text/javascript"> $(function() { をどうにかしないといけないのかな

Answer 1

まず、よほどの理由がない限り、jQuery本体を2回以上読み込むことはおすすめしません。jquery-***.min.jsがjQuery本体ですので、読み込みは一度にしましょう。

あと、WordPress付属のもそうなのですが、標準的なものでなく何かしらのライブラリに付属したバージョンのjQueryの場合、$が存在しないことがあります。jQueryだけ存在する場合、以下のように書けばふつうに$で書けます。

jQuery(function($){
  //引数の$にjQueryオブジェクトが入るので、この中ではjQueryの$を使える
  $('#hoge').attr ....
});

Answer 2

<script type="text/javascript"> $(function() { var nav = $('.overimg'); これが、エラーを言っている箇所。 辿って行ったら、そこのファイルには、先にjQueryのから読み込んで無いからでした…。 これらを先に読み込むようにしたらエラーは出なくなりました。 なんという凡ミス。。。。

Answer 3

エラーの原因とは違うかもしれませんが、jQuery 2.1.0 と 1.7.2 を両方ロードすることはできないのでは？
バージョン 1.x と 2.x の違いについては、このあたりが詳しいかと思います。

Comments

[Gerozaemon]

回答ありがとうございます。
jQuery 2.x.x で行うと
-
新たに
jquery.validationEngine.js:28 Uncaught TypeError: $(...).live is not a function
が出てくるようになりました。

いろいろ調べてみます

[maisumakun]

$().liveはjQuery 1.9以降で廃止となっています。.onを使うように書き換えるか、jQuery migrateで復活させる必要があります。