JavaScript
jQuery
Haxe
More than 5 years have passed since last update.

Haxeの標準ライブラリはjQueryを含んでいます。

ただし、Haxe3では、別途.jsファイルが必要です。あらかじめ、jQueryのサイト( http://jquery.com/ )からダウンロードして、htmlからリンクしておいてください。


コード例

toggle()を使って二つのボタンを切り変えます。


html

<button class="toggle on">ON</button>

<button class="toggle off" style="display: none">OFF</button>


Main.hx

import js.JQuery;

class Main {
static function main() {
new JQuery( "button.toggle" ).click( function() {
new JQuery( "button.toggle" ).toggle();
});
}
}


ちなみに$は使えません。そもそも、Haxeでは変数名に"$"を含めることができません。

どうしてもnew JQueryを書くのがめんどくさい人は、適当な1文字に割り当てておきましょう。


Main.hx

import js.JQuery;

class Main {
static inline function _( str:String ):JQuery { return untyped $( str ); }

static function main() {
_( "button.toggle" ).click( function() {
_( "button.toggle" ).toggle();
});
}
}



staticな値について

Haxeではtoggle、add、nextのようなjQueryのインスタンスメソッドについては網羅されているのですが、jQuery.trim()やjQuery.each()などほとんどの静的な関数はサポートされていません。

しかし、多くはHaXeの別の関数で代用可能です。


Main.hx

import js.JQuery;

class Main {
static function main() {

//jQuery.each( obj, function(it, val){} )
//配列やオブジェクトの各要素に対して、関数を呼び出して処理を行います。
var obj = { one:1, two:2, three:3, four:4, five:5 };
Lambda.iter( Reflect.fields( obj ), function( it:String ) {
var val = Reflect.field( obj, it );
});

//jQuery.inArray( value, array )
//arrayにvalueが含まれるか確かめます。
var arr = [1, 2, "hoge", 4, "hello" ];
Lambda.has( arr, "hello" );

//jQuery.isArray( obj )
//objが配列か確かめます。
Std.is( {}, Array ); //false

//jQuery.map
//配列の各要素に対して関数を実行して、関数の返り値の配列を生成します。
arr = [ "a", "b", "c" ];
Lambda.array( Lambda.map( arr, function( v:String ) { return v.toUpperCase(); } ) );

//jQuery.noConfict()
//コンフリクトを解消する。
JQuery.noConflict( true );

//jQuery.trim( str );
//文字列の初めと終わりの空白文字を取り除く。
StringTools.trim( "\t\n xxx " ); //※jQuery.trimと異なり全角スペースは削除されません。
}
}


jQuery.unique()のように対応する関数がHaXeにないものもありますが、JavaScriptに埋め込まれるコードには含まれているのでuntypedを使えば簡単に利用することができます。


Main.hx

import js.JQuery;

class Main {
static function main() {

//jQuery.unique( array )
//配列内の重複を除去。
var arr = [1, 1, 3, 5, 6, 3, 4, 6 ];
untyped $.unique( arr );

//jQuery.get( url, data, callback )
//HTTP(GET)通信でページを読み込み。
untyped $.get( "test.php" );

//jQuery.support
//ブラウザの各機能のサポート状況を含むオブジェクト。
var support:Dynamic<Bool> = untyped $.support;
}
}



$(this)について

JavaScriptとHaxeではthisの扱いが違います。

jQueryのイベントハンドラやコールバック関数内のthisはそのイベントのターゲットのHTMLのDOM要素ですが、Haxeの場合実行している関数を持つオブジェクトになります。

つまり以下のようになります。


Main.hx

import js.JQuery;

class Main {
static function main() { new Main(); }

function new() {
new JQuery( "button" ).click( function() {
trace( this ); //DOMじゃないよMainだよ!
});
}
}


これだと$(this)も使えないので、$(this)の代わりにJQuery.curを使います。


Main.hx

import js.JQuery;

class Main {
static function main() {
new JQuery( "button" ).click( function(e) {
JQuery.cur.text( "ok" );
});
}
}



ちなみにHaxe2.10の時点では、埋め込まれるjQueryのバージョンは1.6.4です。