jquery-3.1.1.min.jsの読み込み

jqueryファイルの読み込みについて質問です。
現在、jquery-3.1.1.min.jsファイルを読み込ませようとしているのですがうまくいきません。
パスは何度も確認したので合っていると思います。
一応、jqueryフォルダ→index.html、jsフォルダ→jquery-3.1.1.min.jsとなっており、jqueryとjsフォルダは同じ階層にあります。
エラーとされる「index.html:8 Uncaught ReferenceError: $ is not defined
at」をググってみると、ファイルを読み込ます順番が関係しているらしく、一番上に記載してみてもダメでした。
下記がソースコードになります。
わかる方いましたらご回答よろしくお願いします。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="../js/jquery-3.1.1.min.js"></script>
</head>

<body>
<h3>「追加」ボタンを押したら「no1」「no22」の次に「no3」を追加表示し、「削除」ボタンを押したら「List3」が削除されるよう記述しなさい。</h3>

<button id='btn1'>追加</button>
<button id='btn2'>削除</button>
<ul>
<li>No1</li>
<li>No2</li>
</ul>
<script>![イメージ説明](7cf2b7b23bf6b505292823551966329e.png)
jquery(function(){
 $('#btn1').on('click',function(){
  $('ul').append('<li>No3</li>')
 }); 
 $('#btn2').on('click',function(){
  $('li:last-of-type').remove();
 });
});
</script>
</body>

追記
cdnの方で読み込んだところ、うまくいきました。
となると階層の問題だと思うですが、やはり分かりません。
下にディレクトリの方載せておきます。
jqueryフォルダの中にjs、1206 jQueryフォルダが入っているイメージです。
それかダウンロード方法が間違っていたりするのでしょうか。
すみませんがよろしくお願いします。

popobot

2016/12/30 01:12

ドキュメントルートがjqueryになっていたりしませんか？　それだとjsフォルダは参照できないですよ

行動規範の内容に同意します

回答5件

ベストアンサー

1206jQuery フォルダがドキュメントルートなので、その下の階層（../）も横の階層（../js）も参照できないと思います。1206jQuery フォルダの中に js フォルダを移動してください。

投稿2016/12/30 02:26

kei344

総合スコア69407

roronoazoro

2016/12/30 02:52

ありがとうございます。ご回答にある通りでした。ドキュメントルートを理解していないので、学び直そうと思います。とても助かりました。

行動規範の内容に同意します

jquery-3.1.1.min.jsの読み込みにCDNを使ってみてそれが正常に読み込まれればパスの指定が間違っているのでもう一度パスを確認する必要があります。

HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

追記

一旦、以下のような簡単な構成にして、jQueryが動くかどうかを試してみてはいかがですか？
こちらで試した結果動作したので...

ルート
├1206 jQuery
│└index.html
└js
  └jquery-3.1.1.min.js

jQueryの動作確認に使用したindex.html

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<script src="../js/jquery-3.1.1.min.js"></script>
9<script>
10    $(document).ready(function () {
11        alert("Hello, World");
12    });
13</script>
14</body>
15</html>

投稿2016/12/30 00:35

編集2016/12/30 01:46

s8_chu

総合スコア14731

roronoazoro

2016/12/30 02:53

どうやらドキュメントルートが原因だったようです。いつも、ご回答ありがとうござました。

行動規範の内容に同意します

html
1<script src="../js/jquery-3.1.1.min.js"></script>

の指定が間違っているのでしょう。
実際のファイルの配置関係が明らかではないので、どう直せば良いかまでのアドバイスはできません。

投稿2016/12/30 00:20

退会済みユーザー

総合スコア0

roronoazoro

2016/12/30 02:53

どうやらドキュメントルートが原因だったようです。ご回答ありがとうござました。

行動規範の内容に同意します

まずはscriptを以下のように外部参照してみて動作確認してみてはいかがでしょう？

下記で動作すれば、Kosuke_Shibuyaさんが書かれているとおり、
src="../js/jquery-3.1.1.min.js"の、相対パスの指定の仕方(場所)が間違っています。

html
1<script
2  src="https://code.jquery.com/jquery-3.1.1.min.js"
3  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
4  crossorigin="anonymous">
5</script>