読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

CoffeeScriptでjQueryを使う

chuckです。

今日初めてcoffeeでjQueryを使ったのでメモ。

 

 

参考にしたサイト

www.webopixel.net

 

coffeeでjQueryを使うには、以下の1行を追加します。

f:id:chuck0523:20150929074316p:plain

 

これはjsでは以下のように変換されます。

f:id:chuck0523:20150929074512p:plain

 

※もちろん、jQuery本体のインクルードも必須です

 

DOM操作

基本

基本的なDOM操作は通常どおりです。

以下では、DOMの子要素を変数に格納しています。

f:id:chuck0523:20150929074620p:plain

もちろんcoffeeなのでvar と文末のセミコロンが不要です。

 

応用?

ちょっと複雑になるとこんな感じですかね。

f:id:chuck0523:20150929074757p:plain

navsは複数のDOM要素が入った変数です。

navsにeachをかけて、clickイベントを追加しています。@はthisなので、$( @ ) は $( this )を表しています。

 

疑問

$(@).attr 'index'は、JSで書くと以下のとおりです。

$(this).attr('index');

つまり、カッコが省略できます。

 

ただし、$('navs').children( ) の場合、カッコを省略するとJSで以下のように変換されてしまいます。

$('navs').children;

これではエラーになります。

 

ここらへんが初心者にとっては、ちょっと慣れないかもしれません…。

 

 

他の参考サイト

children([expr]) - jQuery 日本語リファレンス