2012前編では、jQueryの基本を説明するとともに、実際にスクロールと連動したサンプルを作成しました。jQueryには、さらに様々な機能が用意されています。後編では、その中から以下のトピックを取り上げ、サンプルをブラッシュアップさせてみましょう。前回、attr()やcss()などといったメソッドを使用して、要素の状態を変更することができることを紹介しました。jQueryでは変更するだけでなく、要素そのものを新たに作成したり、削除したりすることもできます。要素を作成するには、$()の引数に(X)HTML形式の文字列を指定します。div要素を新たに作成するには、以下のように記述します。$('<div/>');要素を生成すると同時に、属性を指定することも可能です。id="block1"/>');また、2つ目の引数を指定して、属性を指定することもできます。});こうして作成した要素をDOMツリーに追加するには、append()やappendTo()というメソッドを使用します。作成した要素をbody要素内の末尾に追加するとしたら、以下のようなコードになります。div.appendTo(document.body);また、要素を(DOMツリーから)削除するにはremove()というメソッドを使用します。div.remove();イベント処理プログラムでUIを実装する場合、様々な「イベント」を処理するという形でプログラミングを行うのが一般的です。「マウスを動かした」「クリックした」「スクロールした」などの断続的に発生するユーザ操作の他にも、「Webページの読み込みが終わった」などのタイミングでもイベントは発生します。した様々なイベントに対して、イベント発生時の処理を関数の形で登録しておくと、「イベントが発生した時にその関数を呼び出す」という動作が行われます。jQueryを用いずに、JavaScriptのみでイベント処理を記述する場合、以下のようなコードになります。8以前では動作しません(対応するには、違うAPIを用いる必要があります)。false);jQueryを用いると、こうした処理をより直感的に短く記述することができます。クリックイベントを処理、または発生させる。要素の状態が変更したイベントを処理、または発生させる(changeイベントは、主に入力フォーム要素の状態が変化した際に発生する)。フォームの送信イベントを処理、または発生させる。任意のイベントを処理する。on()の例として、「要素にフォーカスが当たった」というイベントで処理を実行するには、以下のように記述します。});また、画面の読み込みが完了したイベントを捕捉するには、以下の2つの方法があります。どちらも同じで、特に違いはありません。});アニメーション昨今のWebサイトでは、ちょっとしたアニメーションを用いることで、使い心地や見た目の美しさを向上させている例がよく見られます。Webページにとって、こうした演出は欠かせないものになったといってよいでしょう。jQueryを用いると、アニメーションも容易に実現できます。要素をフェードイン・フェードアウトさせるには、以下のようなコードを使用するだけです。$(element).fadeOut();要素をスライドアニメーションさせることもできます。$(element).slideDown();こうしたアニメーション機能の中核となっているのが、animate()メソッドです。このメソッドの基本的な機能は、「CSSプロパティの値を時系列に沿って変更する」というものです。100)の座標まで、2秒間かけて移動します。2000);サンプル作成を通じて、jQueryの機能を理解するここまでに解説したjQueryの機能を用いて、前回作成したサンプルを改善してみましょう。以下のように変更します。閉じるボタンのマークアップを追加する情報バーにid属性「closeButton」を持つdiv要素を追加します。CSSを用いて、ボタン風のUIにしています。target="_blank">青空文庫</a>から借用した、宮沢賢治の「銀河鉄道の夜」です。target="_blank">こちら</a>からどうぞ。閉じるボタンの処理を追加する閉じるボタンに関する処理は以下の通りです。このたった4行に今回解説した事柄が詰め込まれています。jQueryオブジェクトのclick()メソッドを使用して、クリック時の処理を記述しています。fadeOut()メソッドを使用して、情報バーをフェードアウトさせます。fadeOut()やanimate()をはじめとしたアニメーション系のメソッドでは、引数に関数を指定すると、アニメーションが終了した際にその関数が呼び出されます。remove()メソッドを使用して、情報バーをDOMツリーから削除しています。これにより、リロードするまでは情報バーが表示されることはなくなります。情報バーの表示/非表示をアニメーションさせる情報バーを表示する方法として、前回はrightプロパティに値を直接指定していました。0);今回は情報バーが右から左にスライドして現れるよう、以下のようにanimate()メソッドを使用してrightプロパティの値を変更しています。500);情報バーを隠す処理も同様です。animate()メソッドを以下のように指定しています。500);たったこれだけで、非常に心地よいアニメーションを実現することができます。Animation」といった新たなアニメーション関連の機能が追加されており、これらを利用すればJavaScriptを使わずともアニメーションを実現できます。サンプルの情報バーを表示/非表示にする処理は、rightプロパティを500ミリ秒かけて操作しているのみです。Transitionを用いれば簡単に実現できます。情報バーのCSSに以下のようなプロパティを追加します。}いくつかのプロパティを記述していますが、本来はtransitionプロパティだけですむべきです。Transitionの仕様がまだ固まっていない現在では、各ブラウザーはドラフト版の仕様にもとづいた独自実装を行なっているため、「-webkit-」や「-moz-」などの接頭辞を持つ特別なプロパティも同時に記述する必要があります。情報バーが表示された状態のCSSも追加しておきます。}そして、このvisibleクラスをJavaScriptで付けたり外したりするだけで、自然なアニメーションが実装されます。jQueryのaddClass()、removeClass()というメソッドを用いればclass属性を操作できます。}こうしたCSS3のアニメーション機能を使用すれば、アニメーションの処理にJavaScriptを用いる必要がなくなるため、コードがシンプルになるだけではなく、アニメーションの処理をブラウザーに任せることができ、処理負荷が低くてスムーズなアニメーションが期待できます。CSS3のアニメーション機能は、ブラウザーによってサポート状況が異なります。そのため当分の間は、JavaScriptによるアニメーション処理も使われ続けると思われます。おわりにこれまで2回にわたって、具体的なサンプルとともにjQueryの使い方を学んできました。jQueryを使用すると、実現したいUI処理を非常に短いコードで実現できるようになります。Dreamweaverを使用することで、JavaScriptやjQueryのコーディングをより高速に行えるようになります。この記事が、みなさんがjQueryプログラミングに踏み出すきっかけになれば幸いです。地域を選択してください地域を選択すると、アドビサイトで使用する言語と内容が変わります。