Video（Premiere Pro/After Effects）、Flash、Web（Dreamweaver/Fireworks）、Design（Illustrator/ InDesign）の各カテゴリー毎にセッションョンが行われます。

アドビシステムズ社のデモンストレーションや、ユーザーの立場からCS4を判断できるようユーザーセッションも行なわれます。

Flashのセッションでは笠居トシヒロさんやまつむらまきおさん、WebとDesignのセッションではCSS Niteの鷹野さんがお話されるようです。

無料のセミナーですので興味がある方はチェックしてみてください。

htmlの制御では指定した要素の内側のHTMLを変更する方法を解説しましたが、今回は追加です。

append

appendは指定した要素の最後にHTMLを追加する為の関数です。

$("指定した要素").append("追加するHTML")

サンプル

サンプルではボタンがクリックされた際にul要素の最後にappendという中身のli要素を追加しています。

$(function(){
	$("input[value=append]").click(function(){
		$("ul").append("<li>append</li>")
	})
});

prepend

prependは指定した要素の最初にHTMLを追加する為の関数です。

$("指定した要素").prepend("追加するHTML")

サンプル

after

afterは指定した要素の後ろにHTMLを追加する為の関数です。

$("指定した要素").after("追加するHTML")

サンプルではul要素の後ろにp要素を追加しています。

$("ul").after("<p>after</p>")

サンプル

before

beforeは指定した要素の前にHTMLを追加する為の関数です。

$("指定した要素").before("追加するHTML")

サンプルではul要素の前にp要素を追加しています。

$("ul").before("<p>before</p>")

サンプル

【PR】現場のプロから学ぶXHTML+CSS 好評発売中

先日行われたインクルーシブデザインワークショップの写真です。
(何枚かボケたのが入っていてすみません。)

写真や、ぞくぞくと上がってくる参加者のレポートなどから雰囲気を感じ取っていただけるとうれしいです。

昨日はインクルーシブデザインワークショップでした

私が執筆に参加した書籍、「現場のプロから学ぶXHTML+CSS」が発売されました。

内容はXHTML+CSSの基礎から応用、マルチデバイスに対応する為のテクニック、そしてJavaScriptライブラリと盛りだくさんです。

私は8章『JavaScriptライブラリとCSS』と9章『CSSトラブルシューティング集』の一部、そしてミニコラムを何本か書かせてもらっています。

kennsuさんやよしぱんさんからも太鼓判いただいてますので、ぜひ興味があるかたは手に取ってみてください。

まずはサンプルをご覧ください。

上のリストをクリックすれば、下のリストが変更されると言うサンプルです。
(いまいちなサンプルですみません。htmlだけで表現するには少し限界が。。。)

JavaScript

$(function(){
	$(".click li").click(function(){
		$(".target li").html($(this).html());
		return false;
	})
});

html

<ul class="click">
	<li><a href="img/pencil.jpg">鉛筆</a></li>
	<li><a href="img/paints.jpg">絵の具</a></li>
	<li><a href="img/ageha.jpg">アゲハ</a></li>
	<li><a href="img/cat.jpg">猫</a></li>
</ul>
<ul class="target">
	<li><a href="img/pencil.jpg">鉛筆</a></li>
</ul>

jQueryでhtmlの制御

htmlの取得

$(セレクタ).html()

指定した要素内のhtmlを取得する命令です。

$(this).html()

サンプルではクリックした要素内のhtmlを取得しています。

htmlの変更

$(セレクタ).html("変更後のhtml")

指定した要素内のhtmlを変更する命令です。

$(".target li").html($(this).html());

サンプルではクリックした要素内のhtmlを下のulリストと差し替えています。

textとの違い

textとほぼ同じような構文ですが、違いはtextがhtmlを取り扱うことが出来ない点です。

html要素をtextを利用して変更した場合

$(".target li").text($(this).html());

サンプル

html要素をtextを利用して取得した場合

$(".target li").html($(this).text());

サンプル

【PR】現場のプロから学ぶXHTML+CSS 好評発売中

まずはサンプルをご覧ください。

第11回 attrによる属性値の制御で作成したギャラリーにキャプションが切り替わる処理を追加したものです。

jQueryのコードです。

$(function(){
	$("a").click(function(){
		$("img").attr("src",$(this).attr("href"));
		$("strong").text($(this).text());
		return false;
	})
});

今回追加されたのは以下のコードです。

$("strong").text($(this).text());

ここでtextを利用してテキストを制御しています。

jQueryでテキストの制御

テキストの取得

$(セレクタ).text()

指定した要素内のテキストを取得する命令です。

$(this).text()

サンプルではクリックされた要素内のテキストを取得しています。

テキストの変更

$(セレクタ).text("変更後のテキスト")

指定した要素内のテキストを変更する命令です。

$("strong").text("変更後のテキスト")

サンプルではstrong要素内のテキストを変更しています。

今回のサンプルでは取得と変更を組み合わせて、strong要素内のテキストをクリックされた要素内のテキストに変更しています。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中

CSSの操作ではCSSの変更まで取り上げましたが、cssメソッドを利用すれば変更のみならずCSSの取得も可能です。

まずはサンプルをご覧ください。

左上の■をクリックするとそのbodyのbackground-colorをそのテキストの文字に変更するサンプルになります。

$(function(){
	$("li").click(function(){
		$("body").css("background",$(this).css("color"));
	})
});

CSSの取得

CSSの取得は以下のように記述します。

$("CSSセレクタ").css("プロパティ")

CSSの操作では第2引数で値を設定しているのに対して、取得では第2引数に値を設定しません。

$(this).css("color")

サンプルではクリックされた要素のcolorプロパティを取得して

$("body").css("background",$(this).css("color"));

body要素の背景色として設定しています。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中

2008年11月1日に東京、2009年1月17日に大阪でCSS Nite ビギナーズというセミナーが行われます。

ここ最近、CSSのテクニックの情報が出尽した感じはありますが、まだCSSでの制作に移行できていない方やCSSを勉強中の方も少なくありません。

そういった、これから取り組みたい方や、改めてじっくり学びたい方の為のセミナーになります。

東京版は、開催1ヶ月前で、もうすぐ満席のようです。

大阪版は、2009年1月17日と少し先のお話になってしまいますが、10月17日までの申し込みは早期割引として1,000円安い4,000円で申し込めます。ギリギリで申し込もうとすると満席になっていることが考えれますので、興味がある方はお早めにご検討ください。

なお、CSS Niteビギナーズのセミナー連動書籍「現場のプロから学ぶXHTML+CSS」の執筆には、Re:Creator’s Kansai （リクリ）で「jQueryによるJavaScript入門」を連載中の私、to-Rの西畑も参加しております。

まずはサンプルをご覧ください。

リンクをクリックすることにより画像が切り替わるギャラリーになります。

jQuerコード

$(function(){
	$("a").click(function(){
		$("img").attr("src",$(this).attr("href"));
		return false;
	})
});

XHTMLコード

<ul>
	<li><a href="img/pencil.jpg">鉛筆</a></li>
	<li><a href="img/paints.jpg">絵の具</a></li>
	<li><a href="img/ageha.jpg">アゲハ</a></li>
	<li><a href="img/cat.jpg">猫</a></li>
</ul>
<p><img src="img/pencil.jpg" alt="鉛筆" /></p>

それでは、attrメソッドの使い方を解説します。

属性値の取得

$("CSSセレクタ").attr("属性")

$()関数を利用して、CSSセレクタで要素を指定して、attr関数を利用して属性を指定すると属性値を取得することができます。

属性値の変更

$("CSSセレクタ").attr("属性","属性値")

$()関数を利用して、CSSセレクタで要素を指定して、attr関数で属性の後に属性値を指定することにより属性値を変更することができます。

サンプルではクリックの操作を利用してimg要素のsrc属性をa要素のhref属性と同じ値に書き換えています。

$("img").attr("src",$(this).attr("href"));

分けて書いたほうがわかりやすいかもしれませんね。

$(this).attr("href")

これがクリックされたa要素のhref属性を取得するattr関数です。

$("img").attr("src",属性値);

そして、これがimg要素のsrc属性を書き換えるattr関数です。

属性値の箇所にクリックされたa要素のhref属性を入れることによりサンプルのようなコードになります。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中

hoverとeffectの利用方法は、前のエントリーを参考にしてください。

第6回 Effectの制御
第7回 Effectの制御2
第9回 hover

まずはサンプルをご覧ください。

リンクにマウスを乗せると説明がでてきます。

XHTMLはリンクをa要素、説明をstrong要素で記述したリストで構成しています。

<ul>
	<li><a href="http://blog.webcreativepark.net/">to-R</a><strong>JavaScriptやSEO対策、CSS、Movable Typeなどの情報を発信</strong></li>
	<li><a href="http://css.webcreativepark.net/">CSS TIPS</a><strong>CSSでレイアウトする為のテクニックを中心に紹介しています</strong></li>
	<li><a href="http://seo.webcreativepark.net/">SEO対策TIPS</a><strong>SEOのTIPSやツールを公開中</strong></li>
	<li><a href="http://javascript.webcreativepark.net/">JavaScript Library Archive</a><strong>JavaScriptライブラリをまとめたサイトになります</strong></li>
</ul>

こちらがjQueryの命令文です。

$(function(){
	$("a+strong").hide();
	$("a").hover(function(){
		$("+strong",this).show("fast");
	},function(){
		$("+strong",this).hide("fast");
	})
})

最初から解説していきます。

$("a+strong").hide();

これは最初に隣接セレクタを利用してstrong要素を非表示にしています。

hoverの最初のfunction内にマウスが乗った際の最初の命令を記述します。

$("+strong",this).show("fast");

マウスが乗った要素の次にある要素をエフェクトを付けて表示しています。

hover内のfunctionで利用するthisはclickのthisと同じように、命令が実行された要素を指定できます。

参考：第8回 click時の$関数の第2引数

同様にhoverの2個目のfunction内マウスが離れた際の命令を記述します。

$("+strong",this).hide("fast");

マウスが離れた要素の次にある要素をエフェクトを付けて非表示しています。

これでメニューのリンク先の内容の補足などを簡単に行うことができます。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中