Dreamweaverを使ったjQuery入門
後編　～ 要素の追加・削除、イベント処理、アニメーションを実装

原題：jQuery入門 with Dreamweaver CS5.5　後編

　人気と歴史のあるJavaScriptライブラリ「jQuery」。本連載では、前後編の2回に分け、jQueryの概要からコーディングルールなど、実際にサンプルアプリを作成しながら解説していきます。作成にはWebオーサリングツール「Dreamweaver」を使い、独自の開発支援機能も紹介します。なお、本稿はDreamweaver CS5.5向けに書かれておりますが、最新版のCS6でも問題無くお試しいただけます。

ADC（Adobe Developer Connection）

　この連載は、ADC（Adobe Developer Connection）にて紹介されているものです。Adobe社製品の最新技術情報は、ADCをご覧ください！

　前編では、jQueryの基本を説明するとともに、実際にスクロールと連動したサンプルを作成しました。jQueryには、さらに様々な機能が用意されています。後編では、その中から以下のトピックを取り上げ、サンプルをブラッシュアップさせてみましょう。

• 要素の追加／削除
• イベント処理
• アニメーション

• Dreamweaver CS5.5 体験版ダウンロード
  

Dreamweaverを使ったjQuery入門 前編はこちら

• 前編　～jQueryの概要とコーディングルール解説

要素の追加／削除

　前回、attr()やcss()などといったメソッドを使用して、要素の状態を変更することができることを紹介しました。jQueryでは変更するだけでなく、要素そのものを新たに作成したり、削除したりすることもできます。

　要素を作成するには、$()の引数に(X)HTML形式の文字列を指定します。例えば、div要素を新たに作成するには、以下のように記述します。

// 下記は省略形。$('<div></div>') でも構わない 
var div = $('<div/>');

　要素を生成すると同時に、属性を指定することも可能です。

// block1というid属性を持つdiv要素を作成 
var div = $('<div id="block1"/>');

　また、2つ目の引数を指定して、属性を指定することもできます。

// 第2引数にオブジェクトを指定して属性を追加 
var div = $('<div/>', { 
  id: 'block1' 
});

　こうして作成した要素をDOMツリーに追加するには、append()やappendTo()というメソッドを使用します。例えば、作成した要素をbody要素内の末尾に追加するとしたら、以下のようなコードになります。

var div = $('<div/>'); 

// append()を使用する場合 
$(document.body).append(div); 

// appendTo()を使用する場合 
div.appendTo(document.body);

　また、要素を（DOMツリーから）削除するにはremove()というメソッドを使用します。

div.remove();