要素を作成
$()の引数に(X)HTML形式の文字列を指定します。
例えば、div要素を新たに作成するには、
// 下記は省略形。$(‘
‘) でも構わない
var div = $(‘
‘);
要素を生成すると同時に、属性を指定することも可能です。
// block1というid属性を持つdiv要素を作成
var div = $(‘
‘);
また、２つ目の引数を指定して、属性を指定することもできます。
// 第2引数にオブジェクトを指定して属性を追加
var div = $(‘
‘, {
id: ‘block1’
});
この要素をDOMツリーに追加
append()やappendTo()というメソッドを使用します。
例えば、作成した要素をbody要素内の末尾に追加するには、
var div = $(‘
‘);
// append()を使用する場合
$(document.body).append(div);
// appendTo()を使用する場合
div.appendTo(document.body);
要素を（DOMツリーから）削除
remove()というメソッドを使用します。
div.remove();
イベント処理
「マウスを動かした」「クリックした」「スクロールした」などの断続的に発生するユーザ操作の他にも、「Webページの読み込みが終わった」などのタイミングでもイベントは発生します。
そうした様々なイベントに対して、イベント発生時の処理を関数の形で登録しておくと、「イベントが発生した時にその関数を呼び出す」という動作が行われます。
jQueryを用いずに、JavaScriptのみでイベント処理を記述することは出来ますが、ブラウザごとの違いを意識して処理を切り分けなけらばなりません。
jQueryを用いると、こうした処理を統一的に記述することができます。
click() クリックイベントを処理、または発生させる。
$(element).click(function(e) {
～クリックイベント発生時の処理～
});
on(‘イベント名’, 関数) 任意のイベントを処理する。
$(element).on(‘focus’, function() {
～フォーカスが当たった時の処理～
});
アニメーション
jQueryを用いると、アニメーションも容易に実現できます。
// フェードイン
$(element).fadeIn();
// フェードアウト
$(element).fadeOut();
要素をスライドアニメーションさせることもできます。
// 下から上にスライド
$(element).slideUp();
// 上から下にスライド
$(element).slideDown();
こうしたアニメーション機能の中核となっているのが、animate()メソッドです。このメソッドの基本的な機能は、「CSSプロパティの値を時系列に沿って変更する」というものです。例えば、以下のように記述すると、要素が現在の座標から(100, 100)の座標まで、2秒間かけて移動します。
// 第1引数が変更後のCSSプロパティの値
// 第2引数がアニメーションの時間(単位はミリ秒)
$(element).animate({
top: 100, left: 100
}, 2000);