【jQuery】自由自在にセレクターを移動しよう!

ウェブ制作技術

こんにちわ。

CGSCのWebデザイナー&Photographerのタカノです。

 

Webデザインをするにあたって「jQuery」って便利ですよね。

便利なものをどんどん活用したいのが新米Webデザイナーというもの。

早速、jQueryを基礎から一緒に勉強していきましょう。

 

最後にアコーディオンメニューを例にして、便利なjQueryの機能でどんな操作をしているか振り返るのでお楽しみに!

アコーディオンメニューも作れるようになるなんて一石二鳥ですよね!

 

「自由自在にセレクターを移動しよう!」

jQueryで何かイベントを起こしたい時には、セレクターを選択しなければいけません。

では、今回はとりあえず4つのjQuery関数「parent()、children()、next()、find()」がどのように機能するのか説明に挑戦したいと思います。

以下のHTMLの”start”から”goal”まで4つの関数を使ってセレクターを移動してみましょう。

では、想像してみましょう。

GOALは常に見えているわけではありません。今、私を含め、この記事を読んでくださっている方はSTART地点に立ったばかり!

さあ、GOALに向かって歩みだそうではありませんか!!

上記の想像をjQueryのスクリプトにしてみましょう。

さて、無理矢理な感じは否めませんが、4つの関数を利用してスクリプトを作ってみました。

これから一行ずつ解説していきたいと思います。

一行目:STARTに立ったばかりの我々に、GOALはまだ見えていないので、消しておきましょう。

二行目:STARTをクリックしたらfunction()以下が実行される。

三行目:targetという変数をつくり、”=”の右辺を代入! そして、ここが今回の一番のテーマです!

以下が解説になります。

$(this)は現在選択しているセレクターになります。すなわち、「$(“.start”)」になります。

.parent().parent().next().children();を順番に追いかけます。

「 .start  [ $(this) ] → children_A [ .parent() ] → parent_A [ .parent() ] → parent_B [ .next() ] → children_B [.children()] 」

上記のような移動をしています。

四行目:$(target)は三行目で説明したように、children_Bの位置です。.find()はそのまま()内の.goalを探し、

CSSをblock要素にしてGOALの文字を表示させています。

 

以上、セレクター移動講座でした。

 

では、お待ちかねのアコーディオンメニューも作ってみましょう!

HTMLサンプル↓↓↓

<dt class=”trigger”>Date_01</dt>を部分をクリックすると連動して同じ番号の<dd>Info_01</dd>部分が開閉するアコーディオンを作ってみましょう。

 

jQueryサンプル↓↓↓

最初のtriggerを起点にして.next()で次の要素に滑るように移動できるなんて、まるで波乗りジョニーですね。滑りましたね。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。