同HTML内で複数のjQueryを設置する方法

質問

Movable Type５で作製しています。
複数のjQueryを使用し、（Ａ）はヘッダーにメニュー、（Ｂ）はコメントフォームにテキストをうっすらと出すプラグインを適用させようとしています。
それぞれ単品では問題なく作動するのですが、下記のように記述するとＢのみが作動する状態です。
jQueryもｊｓもよくわからない素人なのでわかりやすくご説明を頂けるとありがたいです。

使用しているものは以下です。
----------------------------------------

<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
<script type="text/javascript">
var $ = jQuery = jQuery.noConflict().extend(true, $);
…
</script>

<script type="text/javascript" src="<$mt:BlogURL$>js/jquery.updnWatermark.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$.updnWatermark.attachAll();
});
</script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
<script type="text/javascript" src="<$mt:Link>index/js/jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="<$mt:Link>index/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="<$mt:Link>index/js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
</script>

http://okwave.jp/qa/q6602248.html
↑に質問をされた方のは見たのですが、それでもわかりません（同様の質問なのかも不明ですが・・・）

本当にわからないので、宜しくお願いします。

回答No.1

fujillin · ベストアンサー

jＱｕｅｒｙのバージョン違いを何度か読込んでいるみたいですが、
新しく読込む度に内容がリフレッシュされてしまい、それまでに設定した内容などが無効となってしまいます。

どのバージョンがいいのか不明ですが（常識的には新しいもの）、まずは、jQueryを最初に一度だけ読み込むようにしてみてください。

お礼

回答ありがとうございます。
バージョンは数字が多い？ものが最新となるのでしょうか？
jQueryのあとに数字が書かれてるものがバージョンなのかな？と思い下記のように削除し、少し変えてみましたがまだうまく動きません・・・
本当に素人の質問ですみません。

<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
<script type="text/javascript">
var $ = jQuery = jQuery.noConflict().extend(true, $);
…
</script>

<script type="text/javascript" src="<$mt:BlogURL$>js/jquery.updnWatermark.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$.updnWatermark.attachAll();
});
</script>

<script type="text/javascript" src="<$mt:Link>index/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="<$mt:Link>index/js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$().ready(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
</script>

補足

よくわからなまま $().ready(function() の箇所が問題なのかな？と思い
色々と調べているのですが現在まだわからない状態です。

<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
<script type="text/javascript">
var $ = jQuery = jQuery.noConflict().extend(true, $);
…
</script>

<script type="text/javascript" src="<$mt:BlogURL$>js/jquery.updnWatermark.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$.updnWatermark.attachAll();
});
</script>

（ここから下のものが表示しません）

<script type="text/javascript" src="<$mt:Link>index/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="<$mt:Link>index/js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$().ready(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
</script>