jQueryのヘッダでの記述について

###質問したいこと
jQueryを使い始めた初心者です。
jQueryやそのプラグイン、jQuery UIの使い方として、scriptを指定することが必須だと思います。
しかし、プラグインを入れることで他のjavascriptが作動しなくなることがあります。
例えば、下の例ならbxsliderを入れることでjQuery UIを使ったindex.jsがうまく動きませんでした。

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="./index.js"></script>

<link href="./jquery.bxslider.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="./jquery.bxslider.min.js"></script>

</head>

例えば、上記のコードだと、下から２番目の

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

を取り除くことでうまく作動したのですが、なぜ動かなかったのかがわかりません。

そこで、教えていただきたいことがあります。

を記入することでどういう役割を果たしているのか、

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
と
http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
で違うverの記述のものが重複することで不具合はあるのか、

１番上のコードの記述の中で、他におかしな点はあるか、また、それはなぜか。

を教えていただきたいのです。

よろしくお願いいたします。

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

回答1件

ベストアンサー

複数のバージョンのJqueryを読み込む理由がわかりません。
当然不具合にもつながるでしょう。

1.8.2バージョンのJqueryを読み込んでいます。

不具合は起きます。

おそらく、プラグイン使用例のサイトからコピペして、結果複数バージョンのJqueryを読み込んでいるのでしょう。
Jqueryは１ページにつき１つのバージョンを１回だけ読み込みます。
仮に複数の「Jqueryに依存したプラグイン」を同ページ内で使用する場合は、
使用する全てのプラグインが許容するバージョンのJqueryを１回だけ読み込みます。

投稿2017/03/01 13:42

編集2017/03/01 13:49

shaak

総合スコア607

Naggy

2017/03/01 23:15

ご回答ありがとうございます。なんとなく予想している通りでした。＞おそらく、プラグイン使用例のサイトからコピペして、結果複数バージョンのJqueryを読み込んでいるのでしょう。その通りでして、プラグインはそのverのjQueryにだけ依存しているのか、それ以外のverでも対応しているのかが分からなかった次第です。ところで、jQueryを読み込む役割を果たしていることは理解できたのですが、はじめの２行の <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> と、次の２行の <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> ではjQueryとjQuery UIを読み込んでいる先のドメインが違っていますが、ここでも重複しており、不具合が発生する可能性があると考えてよいのでしょうか。それともhttp://ajax.googleapis.com/とhttps://code.jquery.com/では別物として考え、重複があっても構わないのでしょうか。

shaak

2017/03/02 04:40 編集

これは、「何処」から「どのバージョン」の「何」を読み込んでいるのかという考えで、上の二行では「//ajax.googleapis.com/ajax/libs/」から、JqueryとJqueryUiを読み込んでいる。下の二行では「https://code.jquery.com」から読み込んでいるわけで、読み込み元は違えど、複数のバージョンの同プラグインを読み込むべきではないです。 ※httpからか、httpsからか、そのどちらでも、と３通りの読み込み方をしているのです。この部分は、自サーバー上に上記ファイルを置いて読み込んでも構いませんし、そもそも、script srcにはどういった意味があるのか？を学ぶべきです。例えば使いたいプラグインがJqueryの1.8.7に対応と書かれていたとします。この場合、作成者はJquery1.8.7での動作を確認したという意味でして、仮にプラグインの中で1.8.7以前にはなかった機能を使用していれば、1.8.7以前のJqueryでは当然動きません。また、1.8.8以降のJqueryでも動作は保証されないと言う意味です。プラグインを使う際にはそれらを考慮した上で選択し、同ページ内で読み込むプラグイン全てで動作確認が取れたバージョンのJqueryを読み込むべきです。

Naggy

2017/03/02 04:34

わかりやすい説明で理解できました。また、初歩的な質問すぎて申し訳有りませんでした。大方予想していた通りだったのですが、自分の理解と実際では、実はこういう部分だけは例外でこういう記述が特別必要だという事態に出くわすことがあるので、確認することができてよかったです。ありがとうございました！

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