×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
通常、Javascriptの関数等をまとめた外部Javascriptファイル（JSファイル と略します）を、HTML内の head 内で指定しますが、 別の外部JSファイルに入れ替えたい場合もあります。
そこで今回は、この外部JSファイルを別のファイルに変更する方法について説明します。
■外部JSファイルを使うHTMLファイル
外部JSファイル test-script-chg1.js がこのHTMLファイルと同じディレクトリに存在することにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>test jQuery</title><script src="test-script-chg1.js"></script></head><body><p>メッセージあああ</p><div> <p class="msgchg1">メッセージ１</p> <p class="msgchg2">メッセージ２</p> <p class="msgchg3">メッセージ３</p></div><p class="msgchg4">メッセージ６</p><button class="btn1">TEXT変更</button> <button class="btn2">SCRIPT変更</button></body></html> |
■外部JSファイル：test-script-chg1.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $(function () { //<button class="btn1">のクリックイベントの関数を宣言 $(".btn1").click(function(){ //<div>要素内の<p>の全てのTEXTを変更 $("div p").text("ああああああああ"); }); //<button class="btn2">のクリックイベントの関数を宣言 $(".btn2").click(function(){ //最初のスクリプトを削除 $("script[src='test-script-chg1.js']").remove(); //別のスクリプトを生成 var src = $("<script>").attr({ "type": "text/javascript", "src": "test-script-chg2.js" }); //スクリプト追加 $("head").append(src); //以下の方法でもOK //$("<script>").attr("type","text/javascript").attr("src", "test-script-chg2.js").appendTo("head"); //ボタンを不可設定 $(".btn2").prop('disabled', true); });}); |
このJSファイルは、.btn1 と .btn2 のクリックイベント関数を宣言しています。
.btn2 のクリックイベント関数で最初に読込んだJSファイル test-script-chg1.js を削除し、 新しい test-script-chg2.js を読込んでいます。
JSファイルを削除するセレクタの指定がミソなのですが、 このセレクタはHTML要素の script に対して script の引数が test-script-chg1.js であるものを示します。
これは属性フィルタと呼ばれるもので、以下の様に指定します。
1 | $("[属性名='属性フィルタ値']") |
「=」 は演算子でこの場合は「属性フィルタ値」と完全に等しいものが対象になります。
演算子は 「=」 の他に以下の様なものが在ります。
- != ... 指定した「属性フィルタ値」と異なる要素
- ^= ... 指定した「属性フィルタ値」と前方一致する要素
- $= ... 指定した「属性フィルタ値」と後方一致する要素
- *= ... 指定した「属性フィルタ値」と部分一致する要素
- ~= ... 指定した「属性フィルタ値」と単語として一致する要素
実際に以下を動作させると、「SCRIPT変更」ボタン押下後は、「TEXT変更」ボタン押下時に div タグ内の全ての p タグのテキストが「いいいいいいい」に変わります。 「ああああああああ」ではないことに注意して下さい。
⇒Javascriptファイルの動的に変更の例
■動的に読込まれる外部JSファイル：test-script-chg2.js
1 2 3 4 5 6 7 | $(function () { //<button class="btn1">のクリックイベントの関数を宣言 $(".btn1").click(function(){ //<div>要素内の<p>の全てのTEXTを変更 $("div p").text("いいいいいいい"); });}); |
関連する記事
⇒JavaScript 何に使う⇒JavaScript jQueryの使い方（セレクタ）
⇒JavaScript jQueryの使い方（セレクタ）その２
⇒JavaScript jQueryの使い方（セレクタ）その３・セレクタの存在確認
⇒JavaScript jQueryの使い方（セレクタ）その４・複数セレクタの存在確認
⇒JavaScript jQueryでJavascriptファイルを動的に変更する方法
おすすめ本
コメント