デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.getScript( )サーバーからjavaScriptデータを取得して実行

構文

サーバーからjavaScriptデータを取得して実行返値:jqXHRオブジェクト
jQuery.getScript( url [,object] [function])ver1.0〜
・url:読む込むデータのurl
・object:サーバに送るデータを設定。値の型はobjectオブジェクト。
・function:通信が「成功」したら実行される処理を設定。以下の引数を受け取る
 ・第1引数:取得したデータ
 ・第2引数:状態(success、error、notmodified、timeout、parsererror)
 ・第3引数:jqXHRオブジェクト

機能

jQuery.getScriptメソッドはjQuery.getメソッドをjavaScriptに限定しただけのメソッドで、jQuery.getメソッドの引数typeに"script"を設定したのと全く同じ機能になります。ですので、先にjQuery.getメソッドを理解するようにして下さい。引数の意味はすべてjQuery.getメソッドと同じです

jQuery.getScriptメソッドはjavaScriptデータの読込が完了したらjavaScriptを実行します※実行しないようにはできません。javaScriptデータにはjQueryも記述できます。

解説

javaScriptデータについて

今回読み込むデータは(data/simple.js)です。javaScriptのコードをそのまま記述しているだけです(文字コードはUTF-8)。以下の様ににjQueryのコードも記述することができます。

$("div").css("background-color","#fcf");

javaScriptデータを取得して実行

読み込むデータが「script」に限定されるだけで、利用方法はjQuery.getメソッドと全く同じです。
サンプル(getScript/01.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。

jQueryは以下の様に記述され、buttonをクリックするとjQuery.getScriptメソッドを利用してjavaScriptデータを読み込みます。読込が完了したら引数に設定したfunction「getFunc」が実行されます。

$("button").click(function(){
	$.getScript("../data/simple.js", getFunc);
});

getFuncは以下の様に記述されています。受け取る引数はjQuery.getメソッドと同じで、第1引数(myData)は受信データ、第2引数(myStatus)は状態を受け取ります。サンプルでは受信データはtextメソッドでdiv要素内に表示し、状態はbody要素内に追加します。

function getFunc(myData, myStatus){
	$("div").text(myData);
	$("body").append("myStatus = " + myStatus);
};

jQuery.getScriptメソッドの特長は、javaScriptデータを読み込むだけでなく実行する点です。実際にサンプルでbuttonをクリックすると読み込んだjavaScriptデータのコードが実行され、div要素の背景色がピンクに変わります。

functionは設定しなくてもOK

読み込んだjavaScriptを実行するだけであれば、引数にfunctionを設定する必要はありません。
サンプル(getScript/02.html)を開いてbody内の構成はgetScript/01.htmlと同じ事を確認して下さい。jQueryは以下の様に変更され、読み込み後に実行されるgetFuncが削除されています。
読み込むデータはgetScript/01.htmlと同じsimple.jsです。

$("button").click(function(){
	$.getScript("../data/simple.js");
});

functionを設定しなくても読み込んだjavaScriptの処理は実行されるため、buttonをクリックするとdiv要素の背景色がピンクになります。

関連項目

javaScript以外のデータを読み込む場合はjQuery.getメソッドを利用してください。
jason形式のデータを読み込みたい場合はjQuery.getJSONメソッドを利用してください。