jQuery – Dart逆引きリファレンス

稲毛 透

2012.06.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

jQuery

DartではjQueryで提供されるようなユーティリティの一部を基本機能として提供しています。

ドキュメントのロード完了をハンドリングしたい「$(document).ready(fn)」

DartではDOMのロード完了をハンドリングする必要はありません。公式ページには以下のように記載されています。

Dart code executes only after the page is parsed. Dart programmers can assume that the DOM is fully loaded.

エントリーポイントである「main」関数が呼ばれた時にはDOMのロードは完了していると判断していいですよということですね。

ノードを検索したい「$(selector)」

Dartではノードの検索に「document.query」または「document.queryAll」関数を利用します。

List elements = document.queryAll('div');

詳しくはDOM要素の問い合わせを参照してください。

ノードを作成したい「$(html), $(html).addClass(class), $(html).attr(name, value)」

DartではElementオブジェクトを生成し、そのオブジェクトへ属性値などを設定していきます。

var pic = new Element.tag('img');

pic.classes.add('avatar');
// pic.classes.toggle('main');

pic.attributes['src'] = 'myPic.jpg';

document.body.nodes.add(pic);

※「toggle」は現在の所（2012/06/15）使用することができません。

複数要素のイベントをハンドリングしたい「$(selector).click(fn)」

現在（2012/06/15）は複数要素に対して反復処理でハンドラを追加する必要があります。

document.queryAll('a.person').forEach((el) {
  el.on.click.add((e) => print('Person clicked'));
});

今後、下記のように記述できるようになる予定です。

document.queryAll('a.person').on.click.add((e) => print('Person clicked'));

特定のノードから相対的に別ノードを参照したい「$(selector).parent(), $(selector).next()」

Elementオブジェクトが持つ「parent」や「nextNode」などのプロパティを参照します。

var myNode = document.query('div');

var parent = myNode.parent;

var next = myNode.nextNode;

子要素をクリアしたい「$(selector).is(':empty'), $(selector).empty()」

ノードが子要素を持っているか調べるには「NodeList#isEmpty()」、全ての子要素をクリアするには「NodeList#clear()」を使用します。

var myNode = document.query('div');

if (!myNode.nodes.isEmpty()) {
  myNode.nodes.clear();
}

特定要素をクローンしたい「$(selector).clone()」

Elementオブジェクトが持つ「clone」メソッドを使用します。

var clonedElement = document.query('#about').clone(true);
AWS