SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Adobe Developer Connection(AD)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード サンプルソース (51.3 KB)

イベント処理

 プログラムでUIを実装する場合、様々な「イベント」を処理するという形でプログラミングを行うのが一般的です。「マウスを動かした」「クリックした」「スクロールした」などの断続的に発生するユーザ操作の他にも、「Webページの読み込みが終わった」などのタイミングでもイベントは発生します。そうした様々なイベントに対して、イベント発生時の処理を関数の形で登録しておくと、「イベントが発生した時にその関数を呼び出す」という動作が行われます。

 jQueryを用いずに、JavaScriptのみでイベント処理を記述する場合、以下のようなコードになります。しかもこのコードは、Internet Explorer 8以前では動作しません(対応するには、違うAPIを用いる必要があります)。

element.addEventListener('click', function(e) {
  ~クリックイベント発生時の処理~ 
}, false);

 jQueryを用いると、こうした処理をより直感的に短く記述することができます。

$(element).click(function(e) {
  ~クリックイベント発生時の処理~ 
});
メソッド 内容
click() クリックイベントの処理、または発生させる
change() 要素の状態が変更したイベントを処理、または発生させる(changeイベントは、主に入力フォーム要素の状態が変化した際に発生する)
submit() フォームの送信イベントを処理、または発生させる
on('イベント名', 関数) 任意のイベントを処理する

 on()の例として、「要素にフォーカスが当たった」というイベントで処理を実行するには、以下のように記述します。

$(element).on('focus', function() {
  ~フォーカスが当たった時の処理~ 
});

 また、画面の読み込みが完了したイベントを捕捉するには、以下の2つの方法があります。どちらも同じで、特に違いはありません。

$(function() {
  ~画面の読み込みが完了した際の処理~ 
});

$(document).ready(function() {
  ~画面の読み込みが完了した際の処理~ 
});

アニメーション

 昨今のWebサイトでは、ちょっとしたアニメーションを用いることで、使い心地や見た目の美しさを向上させている例がよく見られます。もはやWebページにとって、こうした演出は欠かせないものになったといってよいでしょう。

 jQueryを用いると、アニメーションも容易に実現できます。例えば、要素をフェードイン・フェードアウトさせるには、以下のようなコードを使用するだけです。

// フェードイン $(element).fadeIn(); 

// フェードアウト $(element).fadeOut();

 要素をスライドアニメーションさせることもできます。

// 下から上にスライド $(element).slideUp(); 

// 上から下にスライド $(element).slideDown();

 こうしたアニメーション機能の中核となっているのが、animate()メソッドです。このメソッドの基本的な機能は、「CSSプロパティの値を時系列に沿って変更する」というものです。例えば、以下のように記述すると、要素が現在の座標から(100, 100)の座標まで、2秒間かけて移動します。

// 第1引数が変更後のCSSプロパティの値 
// 第2引数がアニメーションの時間(単位はミリ秒) 
$(element).animate({ 
    top: 100, left: 100 
}, 2000);

次のページ
サンプル作成を通じて、jQueryの機能を理解する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

白石 俊平(株式会社シーエー・モバイル Web先端技術フェロー)(シライシ シュンペイ(カブシキガイシャシーエー・モバイル ウェブセンタンギジュツフェロー))

現在はシーエー・モバイルにて「日本のWebシーンで最先端の企業にする」というミッションに従事中。その他、html5j.org管理人、Google API Expert (HTML5)、Microsoft IE MVPなどを務める。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6549 2013/01/15 17:38

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング