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

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

jQuery.globalEval( )グローバル領域で文字列をスクリプトとして実行

構文

グローバル領域で文字列をスクリプトとして実行返値:なし
jQuery.globalEval( コード )ver1.0.4〜

機能

jQuery.globalEvalメソッドは引数に設定した文字列をスクリプトとして実行(実行領域はグローバル)します。javaScriptのevalメソッドと似ていますが、処理をグローバル領域で利用したい時に便利だと思います。

解説

文字列をスクリプトとして実行

サンプル(globalEval/01.html)を開いてbody内にbutton要素しかないことを確認して下さい。jQueryでは、まず以下の部分を確認してください。testFunc内でjQuery.globalEvalメソッドを利用して「var test = 10」を実行するようにしています。そして4行目でtestFuncを実行しています。これで変数testに値10が設定されます。

function testFunc(){
	$.globalEval("var test = 10");
}
testFunc();

続いて以下の部分を確認してください。buttonをクリックすると本当に変数testに値が設定されているか確認するためにアラートで表示します。

$("button").click(function(){
	alert(test);
});

結果として、buttonをクリックするとアラートで「10」と表示され、jQuery.globalEvalメソッドが機能していることを確認できます。

「グローバル領域で」ということ

jQuery.globalEvalメソッドで注意すべき点は、コードがグローバル領域で実行されるという点です。globalEval/01.htmlで実行した「var test = 10」はvarが付いておりローカル変数として設定していますから、「本来は」functionの外から変数testを取得することはできません

実際にjQuery.globalEvalメソッドを利用していないサンプルで確認します。
サンプル(globalEval/01b.html)を開いて以下の部分だけがglobalEval/01.htmlと異なっているのを確認してください。jQuery.globalEvalメソッドを利用せずに変数testに値10を代入しています。

function testFunc(){
	var test = 10;
}
testFunc();

結果として、buttonをクリックしても何も起きません。これは変数testがfunction「testFunc」のローカル変数なのでfunctionの外から値を取得できないためです。

メモ

javaScriptのevalとの違い

javaScriptにも文字列をスクリプトとして実行するevalメソッドがあります。これはjQuery.globalEvalメソッドと異なりglobal領域での処理になりません(つまり、あくまでもその場所でスクリプトを実行する)。

サンプル(globalEval/test01.html)を開いて、ほとんどglobalEval/01.htmlと同じ事を確認して下さい。異なるのは以下の様にjQuery.globalEvalメソッドの代わりにjavaScriptのevalメソッドを利用している点です。

function testFunc(){
	eval("var test = 10");
}
testFunc();

javaScriptのevalメソッドはグローバル領域ではなく、その場所でスクリプトを実行するので、globalEval/01b.htmlと同じ処理となります。結果としてbuttonをクリックしても何も表示されません。