Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

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

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

目次

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

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

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

Dreamweaverを使った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();

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:Adobe Developer Connection

もっと読む

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5