jQuery:スムースなスクロール(後編)

指定した位置へのスクロール

前回はリンク先の位置(top)の取得まで説明しました。今回は、その位置までスクロールする
処理を説明します。スクロールは、これまでもアニメの演出に利用してきたanimateメソッドを
利用するのですがセレクタの設定に問題があります。
 
問題といってもjQueryのバグとかではなく、ブラウザ毎の扱いの違いです。ページのスクロール
は表示部分を移動させるのですから、セレクタとしてはbodyタグを利用するのが(私は)正しい
と思うのですが、htmlを利用しないと機能しないブラウザがあるそうなのです。
 
セレクタを設定した(html or body)2種類のファイルを用意したので、
ブラウザ毎に機能する/しないを確認してください。
・セレクタにbodyを使用したサンプル:06_scroll_4a.html
・セレクタにhtmlを使用したサンプル:06_scroll_4b.html

有効だったタグを表にしてみました。
ネット上ではhtml派のものが多そうな印象だったのですが、私の環境で調べてみると
以下の様にbody派が圧倒的に多かったです。

●Machintosh
safari (ver5.1):body
firefox (ver3.6.12):body
chrome (ver14.0):body
opera (ver10.62):body、html

●windows
IE8(通常モード):body
IE8(互換モード):body
firefox (2.0.0):body
firefox (6.0.2):body
chrome (ver14.0):body
opera (ver8.54):両方ともダメ
opera (ver11.51):body
 
上記の結果からbodyを利用すれば良さそうですが、念のためhtmlにも対応させるのが
普通のようです。ですので、以下の様にセレクタに2つの要素を設定します。
複数の要素をセレクタで利用する場合は,(カンマ)で要素を区切ります。
リファレンス:selector1, selector2, …, selectorN

$("body,html").animate({scrollTop : myPos}, 1000);

・セレクタにhtmlとbodyを使用したサンプル:06_scroll_5.html
ネット上では、この方法だとoperaでちらつくという情報があったのですが、私の環境では
確認できませんでした…。もしoperaでちらつく現象になった方は、環境を教えて頂けると
助かります(Mac or Win 、versionなど)。
 
 
この行にはセレクタ以外にもポイントがあります。これまでanimateではwidth, height, left,
topの属性を操作して演出していましたが、ページのスクロールでは以下の様にscrollTop
いう属性を利用します。これに前回求めたmyPosの値を設定することでスクロールするのです。

$("body,html").animate({scrollTop : myPos}, 1000);

 
 

aタグの機能をOFFにする

ほとんど完成ですが、最後にもう1つ処理を追加します。
06_scroll_5.htmlでは最後のcontent_5のdivだけ色を赤にしています。06_scroll_5.htmlで
content_5へのリンクをクリックしてください。多くのブラウザで一瞬content_5の赤が表示
されるはずです。※chromeではmac/winともにこの現象は発生しませんでした。
 
これはaタグがクリックされると、純粋にaタグの機能によってページを移動するのですが、
その後でjQueryの機能によってページのスクロールをするためです。
 
この問題を回避するためにはaタグの機能をOFFにしなければなりません。
そして機能をOFFにするためにはクリックの処理の最後に以下の1行を追加します。

return false;;

returnを追加したサンプルとして06_scroll_6a.htmlを用意したので確認してください。
content_5へのリンクをクリックしても一瞬赤いdivが表示されることはありません。
http://www.designdrill.jp/jquery/04/06_scroll_6a.html
 
ついでに本当にaタグの機能がキャンセルされているか、サンプルを用意したので確認してください。
06_scroll_6b.htmlではクリックのセレクタを「全てのaタグ」にしており、イベントハンドラ内で
return falseを実行しています。そのため全てのリンクはキャンセルされ、一切機能しません。
http://www.designdrill.jp/jquery/04/06_scroll_6b.html
 
06_scroll_6a.htmlで機能的には完成なのですが、前回紹介したサンプルでは各divに
「トップへ戻る」ボタンを追加してあります。このスクロールも単純にページの最初に設定された
アンカーへ移動しているだけですので、特に説明を追加することはありません。

sample :スムースなスクロール
http://www.designdrill.jp/jquery/04/06_scroll.html

 
最後にreturnのデメリットについて補足したいと思います。returnを追加するとaタグの機能が
OFFになるため実際にはページを移動していません。そのためURLが変更されないのです。
つまりブックマークする際、#のアンカーにブックマークされないのです。
もし長大なページでアンカーへのブックマークが考えられるようなケースでは、
このスクロールの利用を避ける方が良いかもしれません。
※javaScriptで動的にURLの表示を変更することは可能なので、そのような処理を追加すれば対応可能かもしれません。
 
といった感じで、スムースなスクロールの説明はおしまいです。 
 
 

jQuery:スムースなスクロール(前編)

jQueryを利用したスムースなスクロールはよく利用され、web上でも詳しく説明されています。
ですから紹介する必要もないと思ったのですが、より丁寧に紹介することで差別化を図ろうと
思います。
googleでの検索例:
 
まず紹介するサンプルは以下の06_scroll.htmlです。リンクテキストをクリックすると該当する
divのある部分までスムースにスクロールします。また各divには「トップへ戻る」ボタンがあり
これをクリックすることでトップに戻ることができます。

sample :スムースなスクロール
http://www.designdrill.jp/jquery/04/06_scroll.html

 
 

複雑なセレクタ

それではポイントを1つづつ説明していきます。最初のポイントはセレクタです。今回の機能は
「ページ内リンク」です。つまり「#があるaタグ」がクリックされた時だけ処理したいのです。
ただし別ページの#にリンクする場合はスクロールできないので、現ページでのページ内リンク
だけです。具体的にいえばリンクが#から始まる場合にだけ処理したいのです。
 
そのような、ややこしい仕様のセレクタもjQueryには用意されているのです。
リファレンス:[attribute^=value]
 
リファレンスだけでは分かりにくいと思うので、シンプルなサンプルを用意しました。
06_scroll_1.htmlは#から始まるリンクをクリックするとalertが表示されるようになっています。
http://www.designdrill.jp/jquery/04/06_scroll_1.html
※alertがでるのは#から始まるリンクだけです。
 
ではjQueryのソースを確認してください。ポイントは以下にあるようにセレクタです。
青字の部分でhref属性が#から始まるaタグを選択しています。これでclickのイベントハンドラが
作成されているから、#から始まるaタグがクリックされた時だけ処理を実行できるというわけです。

$("a[ href ^= # ]").click(function() {

 
 

必要な情報を抜き出す

つづいてクリックされたaタグからリンク先の情報を取得します。でないと、
どの位置までスクロールして良いか分かりません。これには新しいjQueryは必要なく、
以前利用した属性の値を取得するattrメソッドを利用します。
このメソッドは以下の様に調べたい属性を引数で渡すことで、属性の値を返すことも
できるのです。リファレンス:attr( name )
 
下記の例ではthis(クリックされたaタグ)のhref属性の値を取得して左辺の変数myHrefに
代入しています。

var myHref= $(this).attr("href");

ここでも確認しやすいようにサンプルを用意しました。06_scroll_2.htmlはリンクテキストをクリック
するとattrメソッドを利用してリンク先のアドレス(href)を取得してalertで表示します。
http://www.designdrill.jp/jquery/04/06_scroll_2.html
※alertがでるのは#から始まるリンクだけです。
 
 

指定した要素の位置を取得

続いて、前項で取得したリンク先(myHref)がどの位置にあるかを調べます。jQueryでは
指定した要素の位置を取得するoffsetメソッドがあるので、これを利用します。 
リファレンス:offset( )
 
このoffsetメソッドの簡単なサンプルも用意したので確認してください。リンクをクリックすると
リンク先のoffset情報をalertで表示します。しかしoffsetで返される値はObjectオブジェクトなので、
このままでは利用できません。alertでも[object Object]と表示されます。
http://www.designdrill.jp/jquery/04/06_scroll_3a.html
 
objectオブジェクトの扱いはActionScriptと同じですので、ドットメソッドを利用して
オブジェクト内のプロパティを取得できます。サンプル:06_scroll_3b.htmlでは
offsetの返値からtopプロパティ(ページ上端からのpx数)を取り出しalertで表示しています。
※offsetで得たオブジェクトにはtopの他にleftプロパティがあります。
http://www.designdrill.jp/jquery/04/06_scroll_3b.html
 
06_scroll_3b.htmlの2行は以下の様にまとめられます。サンプルとしても06_scroll_3c.htmlを
用意したので、きちんと機能することを確認してください。
http://www.designdrill.jp/jquery/04/06_scroll_3c.html

var myPos = $(myHref).offset().top;

 
今回はここまでです。後半に続きます。
 
 
 

jQuery:一定時間でバナーを切り替える

前回まで作成したショーケースは、マウス操作によってバナーを切り替えました。しかし
ショーケースには一定時間で自動的に切り替わるタイプのものがあるので、今回はそれを
紹介します。

sample : 一定時間でバナーを切り替える
http://www.designdrill.jp/jquery/04/05_setInterval.html
※3秒おきにバナーが切り替わります。

 
ベースとしたサンプルは分割型のショーケースです。htmlの修正はボタンを削除しただけで、
cssは変更ありません。jQueryも2カ所しか修正点がありません。
 
まず1つ目はclickのイベントハンドラを廃止し、その処理を関数pageChangeFunc
としてまとめました。あと1つは以下の1行です。これはjQueryのものではなく
javaScriptが標準で持っているsetIntervalを利用しています。

photoTimer = setInterval(pageChangeFunc,3000);

これは2つの引数を設定します。1つ目は一定時間で実行したい関数名、今回はバナーを切り替える
pageChangeFuncを実行します(実行したい関数名をクォートで囲む必要はありません)。
2つ目の引数は間隔をミリ秒で指定します。今回は3000としているので3秒(3,000ミリ秒)で
切り替わることになります。
 
実用的なショーケースを作成するには、リンクの設定をしなければなりませんが
それらはスクールでの講座で説明する予定です。ブログのネタに窮したら簡単に説明する記事を
書くかもしれません。
 
 
 

jQuery: スライダー型ショーケース(分割型)その2

前回のついでに、分割型のショーケースにサムネイルのインターフェイスを追加したサンプルを
紹介します。

sample : : スライダー型ショウケース(分割)その2
http://www.designdrill.jp/jquery/04/04_separate_2.html

ソースは似ている部分が多いので、異なる部分をメインに説明します。まずはhtmlですが、
サムネイルが追加されています。これらサムネイル画像にもidが連番で設定されています。
適当に付けるのではなくバナー画像に対応させます。例えばphoto_3に対応するサムネイルは
thumb_3といった具合に数字を揃えます。cssには目新しいテクニックはありません。
 
続いてjQueryです。分割型でない場合はNumberを利用して数値化しましたが、分割型ではidを
計算に利用する必要はないのでNumberを利用しません。ポイントとして以下の処理があります。

if (old_id == now_id) return;

この処理は同じボタンが連続してクリックされたときの処理です。例えば2番目のバナーが
表示されているときに2番目のサムネイルをクリックしても、すでに表示されているので
切り替える必要はありません。ですので、ここで処理をしないようにしているわけです。
Flash講座を受講された方は、ActionScriptと全く同じ処理ということを確認してください。
 
シューケース系の説明は今回で一旦終了です。次回は今回作成した前回のサンプルを
改造して、ボタンをクリックするのではなく、一定時間で切り替わるようにします。
 
 
 

jQuery: スライダー型ショーケース(分割型)

分割型のショーケース

前回までのショーケースはバナーが連結していたため、最後のバナーから最初のバナーに戻る際に
大きく移動しました。特に問題ないかもしれませんが、今回は連結されていないバナーを利用して
自然にループするスライダー型ショウケースを作成します。

sample : スライダー型ショウケース(分割)
http://www.designdrill.jp/jquery/04/04_separate_1.html
※moveボタンをクリックするとバナーがスライドして切り替わります。

 
今回も差別化のため、簡単な説明しかしません。まずhtmlとcssのポイントを説明します。
まずhtmlを確認して各バナー(photo_1〜photo_5)が配置されていることを確認してください。
分割型ではidを計算に利用することはないので、0から始める必要はありません。
これらのバナーを重ねて配置するために#photoArea 内の画像のcssを以下の様に設定しています。

#photoArea img{
	position:absolute;
	top:0px;
	left:0px;
}

つづいてjQueryの説明です。まず最初のバナー以外は表示したくないのでdivの外に配置して
隠しておきます(cssでhiddenにしてあるのでエリア外のバナーは見えません)。
その処理は以下の1行なのですが、セレクタにポイントがあります。この行のうち、まずは
gt(0)について説明します。リファレンス:gt(index)

$("#photoArea>img:gt(0)").css("left","600px");

これを利用すると指定した番号より大きい要素をすべて選択します(gtはgreater thanの略)。
今回は0を指定しているので、0より大きい要素を選択、つまり0(最初)以外の画像を選択
していることになります。

$("#photoAreaimg:gt(0)").css("left","600px");

つづいてについて説明します。今回のサンプルでは画像は
バナーしかありませんが、通常は他の画像もたくさんあります。これらバナー以外の画像を
選択しないようにしています。具体的には指定した要素内のものを選択します。
今回のケースでは>右側に#photoAreaとしてあるので、#photoArea内の要素を指します。
リファレンス:parent > child
 
つまり2つを合わせると#photoArea内の要素のうち0番目以降の画像を選択しています。
それらをcssメソッドで600pxの位置に配置しています。divの幅は600pxなので、600pxに
配置されたバナーはdivの範囲外で表示されません。
 
続くポイントは「古いバナーを消して、新しいバナーを表示する」部分なのですが、ここは
説明が難しく、講座との差別化のためにも説明は省きます。Flash講座を受講した方は
分割型コンテンツと同じ考えであることを確認してください。

 

使い分け

通常のスライダー型ショウケースと分割型の使い分けですが、各バナーに順番性があるもの、
例えば1ページ目から順番に読み進めていくBookタイプのコンテンツでは、通常のスライダー型
ショウケースを選択する方がよいでしょう。そのほうが各ページの位置関係も分かりやすく、
最後から最初に戻ることで、すべて読み切ったことにも気が付きます。
上記以外のケースでは分割型で良いと思います。特に時間で切り替えるタイプのショーケースでは
最後から最初に大きく戻る通常のスライダー型ショウケースよりも適しているでしょう。
 
次回は、これまたついでに、サムネイルで操作する分割型のショーケースを紹介します。
 
 
 

jQuery: スライダー型ショーケース2

前回作成したスライダー型ショーケースは、時間でバナーを切り替える前提なので、
カリのインターフェイス(moveボタン)しかありませんでした。ですが折角なので
サムネイルを追加して、選択したバナーを表示するようにしてみました。

sample : スライダー型ショウケース2
http://www.designdrill.jp/jquery/04/03_hidden_2.html
※サムネイルをクリックするとバナーがスライドして切り替わります。

 
まずはhtmlのポイントを確認します。サムネイル部分のソースを見てください。各画像にはidが
設定してあり、thumb_0〜thumb_4と命名されています。前回と同様にポイントは0から始める
点です。cssは前回と同様にhiddenの設定を忘れないようにしましょう。
 
jQueryは前回よりもシンプルになっています。ポイントは変数thumb_idを算出している行です。

var thumb_id = Number(this.id.split("_")[1]);

クリックされたidを取得するテクニックはjQuery 03-01:thisが指すものの「クリックされた
要素の情報を取得する」で紹介していますが、今回はさらにNumberが追加されています。
※Flashで講座を受講した方はActionScriptと同じ考え方である事を確認してください。
 
なぜNumberが必要かというと、取得したid(splitして数字だけ取得)は数字ですが、値の型と
しては文字列のため計算に利用できません。ですのでNumberを利用して値の型を数値に変換
する必要があるのです。
※数値化しなくても機能するケースも多いのですが、数値化しておくべきでしょう。
 
今回も講座と差別化するため、単純なサンプルで簡単な説明しかしませんでしたが、独学で挑戦
するかたは、マウスオーバーでサムネイル画像を切り替えたりマウスカーソルを変更することなど
に挑戦してみてください。
 
次回も今回のついでなのですが、分割型のスライダーを紹介します。
前回、今回のサンプルはバナーが連結されているため、クリックしたバナーを表示する際に
他の関係ないバナーが目の前を通り過ぎたり、最後から最初に戻る時に大きく移動します。
 
分割型のバナーではバナーが分割されているので、クリックしたバナーがすぐに登場し、
最後のバナーから最初に戻る際も大きく移動しません。
 
 
 
 

jQuery: スライダー型ショーケース

前置き

jQueryの講座で、どの様なサンプルを作成するかは未定の部分が多いのですが
Flash講座で作成したショーケースに相当するカリキュラムは実施しようと考えています。
サムネイル&ディテールのカリキュラムも考えたのですが、これはすでにLightBoxが
普及しているので、カリキュラム化はしない予定です。
google:Light Boxの検索結果
 
あとjQueryはフォームの扱いが得意のようなので(まだ試していないので分かりませんが..)
それを利用した診断系コンテンツの作成にも挑戦したいところです。Flash講座の中では
診断系コンテンツは最も難易度の高いものでしたが、htmlのフォームを利用すれば比較的
簡単に作成できそうな予感がするためです。
 
ということで、今回はFlash講座でも作成したスライダー型のショーケースを作成したいと
思います。今回はボタンでバナーをスライドさせます。別の講座で一定時間毎に切り替え
たりリンクを開く処理を紹介する予定です。
 
 

スライダー型ショーケース

以前にもフェードの紹介でシューケースは扱っていますが、今回は演出が異なります。
バナーは連結され1枚の長い画像になっています。これをスライドさせて表示する
バナーを切り替えます。

sample : スライダー型ショウケース
http://www.designdrill.jp/jquery/04/03_hidden_1.html
※moveボタンをクリックするとバナーがスライドして切り替わります。

 
プログラムの考え方は文法や構文と異なり説明が大変ですし、有料の講座と差別化する必要からも
詳しくは説明はしません。しかしソースにはコメントを書いておくので、googleなどを頼りに
独学してみてください。ActionScript講座を受講された方はページスライダーと同じ考えで
作成されていることが理解できると思います。
 
それではソースを確認していきましょう。htmlには特筆すべき点はありません。しかしcssには
覚えておきべき処理が書かれています。それはdivの領域外を表示しないoverflow属性のhidden
設定です。ソースのcssで#photoAreaを確認してください。
こうすることでdivの外にはみ出した部分は表示されなくなります。

overflow : hidden ; 

つづいてjQuery。ページの管理は変数myPageで行っており、ページ番号は0から始める
ことに注意してください。ページを0から始めるとページ毎の座標は以下の式で算出できます。

座標の算出式
座標=ページ番号xバナー1枚の横幅x−1

 
ショーケースとして完成させる場合は、moveボタンのクリックではなく、一定時間ごとに
自動的に切り替わるようにしなければなりません。それについては別の機会に説明します。
 
ついでなので、次回はサムネイルでスライダーを移動させるサンプルを紹介します。
 
 
 

jQuery:ブラウザのウインドウサイズを取得

ほとんど仕事では使わないであろうテクニックですが、なんとなくサンプルを作成してみました。

sample : ウインドウ中央に移動するdiv
http://www.designdrill.jp/jquery/04/02_center_1.html
※最初は左上に配置されていますが、リサイズすると中央に移動します。

 
ポイントはresizeイベントとwidthメソッド/heightメソッドです。resizeイベントの構文は
これまでのイベントハンドラと同様ですが、セレクタとしてwindowを指定します。
このとき注意するのはwindowにはクォートは必要ないという点です。
readyイベントのdocumentも同じようにクォートは必要ありませんでした。

$(window).resize(function(){
 //---リサイズされたときに実行したい処理
})

つづいてwidthメソッド/heightメソッドですが、これも通常のメソッドの構文と同じです。
要素の幅/高さを取得できるのですが、ポイントはセレクタにwindowを指定することで
ブラウザウインドウの幅や高さも取得できるという点です。
※ここでもセレクタのwindowにはクォートは付けません。

$("#mainArea").width();//---要素の幅を取得
$(window).width();//---ブラウザのウインドウ幅を取得

センターに配置する計算式はFlashのフリーサイズFlash講座で説明したものと同じです。
cssでは要素はすべて左上基準になるので、左上を基準としたときの式を利用してください。

ウインドウ中央に配置する式
X座標 =(ウインドウ幅 ー div幅)/ 2
Y座標 =(ウインドウ高さ ー div高さ)/ 2

 
 

始めから中央に

02_center_1.htmlはリサイズしないと中央に移動しませんでした。02_center_2.htmlは
最初に1回、無条件に中央に移動する処理を実行するようにしたので、ページを開くとすぐに
中央に向かって移動を開始します。
http://www.designdrill.jp/jquery/04/02_center_2.html
 
02_center_2.htmlのソースでは、中央に移動する仕組みは別のfunction「setCenterFunc」に
まとめられています。そして最初に一回setCenterFuncを実行することで、ページを開いた時に
リサイズなしで中央に移動するのです。
 
さらに移動するのではなく、始めから中央に配置しておくサンプル「02_center_3.html」も
作成しました。中央に「配置」する場合と「移動する」場合があるので、02_center_2.html
のように「移動するfunction」を作成するのではなく「中央の座標を求めるだけのfunction」
calcCenterFuncを作成しました。最初は、この求めた座標の位置にcssメソッドを使って
配置するだけなので、始めは移動せずに中央に配置されます。
リサイズのイベントハンドラ内では、この位置をanimateメソッドで利用しているので
リサイズの際には移動するようになっています。
http://www.designdrill.jp/jquery/04/02_center_3.html
 
returnはflash同様に1つの値しか返せないので、オブジェクトを作成して返すようにしました。
オブジェクトの作成方法はActionScriptと全く同じです。
次回はページスライダー型のショーケースを紹介する予定です。
 
 
 

jQuery マウスカーソルの変更

これまでのサンプルではクリックの対象にマウスオーバーしても、カーソルが指カーソルになりません
でした。これではUI的に良くありませんので、今回はマウスカーソルを変更するサンプルを紹介します。
 
とはいえマウスカーソルはcssで変更できるので、jQueryを利用してcssを変更することで対応します。
cssを変更するメソッドはcssメソッドでした。これを利用して以下の様にします。

$(this).css("cursor","pointer");

これをhoverのイベントハンドラで利用すれば、マウスオーバーで指カーソル
マウスアウトで通常のカーソルにする事ができます。以下のサンプルでソースを
確認してください。青いdivにマウスオーバーすると指カーソルになるだけです。
 
http://www.designdrill.jp/jquery/04/01_mouseCursor.html
 
次回はスライドショーケースを紹介する予定です。
 
 
 

jQuery 03-01:thisが指すもの

●thisが指すもの

ActionScriptでも重要だったthisはjQueryでも重要になってきます。
jQueryでthisは主にセレクタに利用され、イベントハンドラと組み合わせてユーザーが操作した
要素を操作します。シンプルなサンプルとしてstep01.htmlを用意しました。

$(this).animate({width: "300px"});

http://www.designdrill.jp/jquery/03/step01.html
step01.htmlではクリックのイベントハンドラ内でthisを利用しているので、クリックされた
divが操作されるのを確認できます。
 
 

●クリックされた要素の情報を取得する

インタラクティブなコンテンツを作成する際、どのボタンがクリックされたかを調べることは
重要になります。そのような場合もthisを利用します。サンプルstep02.htmlを確認してください。
まずhtmlの各divにidが設定されています。このidを利用してどのボタンがクリックされたかを判断
するわけです。次にjQueryを確認してください。クリックされたdivのidは「this.id」と書くことが
できます(ActionScriptと全く同じ考え方です)。
step02.htmlではdivをクリックすると、そのdivのidをalertで表示します。
http://www.designdrill.jp/jquery/03/step02.html
 
 
さらにActionScript講座ではidからsplitを利用して必要な情報だけを抜き出すことを学びました。
splitはjavaScriptにもあるので同じ事ができます。step02b.htmlではsplitを利用して
idの番号部分だけを抜き出しています(splitはActionScriptの構文と全く同じです)。
http://www.designdrill.jp/jquery/03/step02b.html
 
 
 

●開閉メニュー

実用的なコンテンツを作成する場合は、thisから操作する範囲を広げるテクニックが必要に
なります。開閉メニューを例に説明していきます。まずstep03.htmlを開いてください。
クリックしたdivをslideToggleで開閉させようとしたのですが、セレクタをthisにしているため
クリックしたdivが全て消えてしまい、再び開くことができません。
http://www.designdrill.jp/jquery/03/step03.html
 
ですのでセレクタでthisを利用するのでなく、クリックされたdivに含まれる(内側 / 子要素の) 
divを開閉するように改造しました。それがstep04.htmlです。ここではchildメソッドを利用して
クリックされたdivのchild(子要素)のdivだけを開閉するようにしました。

$(this).children("div").slideToggle();

http://www.designdrill.jp/jquery/03/step04.html
 
childrenのようにセレクタを拡張するメソッドはjQueryではTraversingと呼ばれリファレンスに
まとめられています。リファレンス:Traversing

また子要素を利用するケースは多いので、以下の様にシンプルに記述する構文もあります。 
以下の構文サンプルとしてstep04b.htmlを用意しました。step04.htmlと同じ効果が得られることを
確認してください。

$("div", this).slideToggle();

この構文は短く書くことができて便利ですが、childrenは子要素であることが分かりやすいので
混乱しにくいというメリットがあると思います。
 
 

●ついでにparent

chldrenついでに逆の効果を持つparentを紹介しておきます。step05.htmlを開いてください。
このサンプルでは青い部分(div)をクリックすると、それを含む(親要素)のdivが閉じます。
jQueryを確認すると以下の様に記述されています。

$(this).parent("div").slideToggle();

http://www.designdrill.jp/jquery/03/step05.html
しかし青いdivの親要素を閉じてしまうと全て消えてしまうので、このサンプルは実用的では
ありません。あくまでchildrenのついでにparentの説明をしただけです。
 
 

●便利なnext

では、青い部分を残して青いdivの次にあるdivだけを閉じるにはどうしたらよいでしょうか。
それにはnextを利用します。これは自分の親要素や子要素でなく同じ階層の次の要素を選択
します。サンプルとしてstep06.htmlを用意したので確認してください。青い部分をクリック
すると続くグレーのdivが開閉します。

$(this).next("div").slideToggle();

http://www.designdrill.jp/jquery/03/step06.html
next意外にも前の要素を指すprevなどもありますが、詳しくはリファレンスを確認してください。
Traversingの項目と合わせてselectorsの項目も改めて確認しておくと良いでしょう。両方とも
要素を選択するために重要なものです。
リファレンス:Traversing
リファレンス:selectors
 
 
これでインタラクティブなコンテンツを作成する基礎知識は大体説明したので、次回からは
思いついたままに色々説明していきたいと思います。
ということで3章はこのthisだけで終了になります。