即実践　手を動かして6時間でjQueryをマスターしよう。知識、経験ゼロからjQueryを使いこなそう

jQueryがjavascriptのライブラリ集であること。jQueryを使えばjavascriptを使って複雑で長いコードで実装していたしくみを簡単に実装できることを説明しています。

jQueryをページに実装するために最初にしなければいけないこととしてjQueryライブラリのページへの読み込みがあります。この方法をこのレクチャーでは説明しています。

jQueryライブラリをhtmlページに読み込むための命令を実際に書いて練習します。

さきほど記述したスクリプトについて解説します。

さきほど書いたAlertのスクリプトについて、その構文を解説します。

このセクションからいよいよjQueryの文法についての学習をはじめます。まずhtml文書をひとつよういして、簡単なテキストを表示し、それをjQueryで変化させるスクリプトを書いてみます。

先のレクチャーで書いたhtmlページを使って、さらにセレクタとメソッドの応用的な使い方を練習をします。このレクチャーでは特にセレクタがCSSのセレクタの指定と書き方が共通していることを理解します。

引き続きセレクタについて練習します。このレクチャーではセレクタの子要素の指定について学びます。

ここからメソッドについて学びます。このレクチャーではcssというメソッドを使って、jQueryでcssスタイルシートの内容を書き替えてみます。この例でもjQueryとCSSの書き方が似ていることが理解できます。

ひとつのメソッドで複数の指定をする場合、複数の指定を一行にまとめて書くことができます。このレクチャーではメソッドを効率的に短く書く方法を紹介します。

数多くあるメソッドの中からcssを例に説明してきましたが、このレクチャーではその他に２つのメソッドtestとremoveを使ってみます。

メソッドをひとつのセレクタに対して複数記述する場合、メソッドチェーンという方法を使えば複数行にわたる指定も一行で書くことができます。このレクチャーではjQueryを劇的に短く、効果的に書けるメソッドチェーンについて解説します。

このレクチャーではセレクタとメソッドにつづいて「イベント」について学習します。イベントとは「いつ、どこで、何を」の「いつ」に当たる部分の指定方法です。ここではまずhtmlファイルを書いて準備します。

ひきつづきイベントについての学習です。クリックをすると要素の背景色が変化するという簡単なスクリプトを書いて、「クリックする」ことで変化を生じさせるイベントを理解します。

新しいイベントの書き方、onイベントについて学習します。新しいバージョンのjQueryではイベントはonイベントを使って書くことが標準の書き方になります。このレクチャーではonイベントを使ったイベントの書き方、複数のイベントの登録方法を学びます。

さきほどのonイベントにつづいて、このレクチャーではその逆のoffイベントについて学びます。このレクチャーでjQuery文法の基礎は終わりです。

このレクチャーでは先のレクチャーで書いたhtmlページにいよいよanimateを使ったjQueryスクリプトを書いて実行し、解説します。

このレクチャーでは先のhtmlページのjQueryに更に様々な変化をつけてanimateメソッドの応用を学びます。

このレクチャーでもanimateメソッドの応用を学びます。ここではアニメーションの時間を指定する方法を学びます。

jQueryではhtml文書のhtmlコードを直接編集して操作することもできます。ここではその例としてhideとshowという２つのメソッドを使ったスクリプトを学びます。このレクチャーではhtmlページをひとつつくってhtmlとcssのコードを書き次のレクチャーで行うhideメソッドのjQueryの練習のための準備をします。

まずhideメソッドを使った簡単なjQueryスクリプトを書いて、hideメソッドの使い方を学びます。

同じようにして今度はshowメソッドを使って見ます。

このレクチャーでは先ほどのhtml文書にcssスタイルシートを書いて、jQueryスクリプトを書く前の段階にまで仕上げます。

htmlとcssができたので次はいよいよアコーディオンのjQueryスクリプトを書きます。このレクチャーではhideとslideUpメソッドを使ったスクリプトを書きます。

最後にslideDownメソッドを使ってアコーディオンを完成させます。

同じ処理を何度も行う場合、その処理を関数に登録することで２回目以降の処理はその関数を呼び出すだけで実行できます。このレクチャーは関数の概要を説明し、次のレクチャーで行う関数の練習のためにhtml ページを準備します。

このレクチャーでは関数のスクリプトを書くために簡単なhtmlページを作ります。htmlページにhtmlとcssのコードを書きます。

このレクチャーでは関数を使わずに同じ処理を３回繰り返すjQueryスクリプトを書きます。

最後に関数を使ってjQueryを書き直します。このレクチャーでjQuery文法の説明が終わりです。

Bxsliderのサイトページから必要なファイルをダウンロードし、コンピュータ内のサイトに保存しておきます。

jQueryのライブラリを読み込むスクリプトを書き、サイトに保存したcssファイルへのリンクを行います。

htmlページにナビゲーション部分のhtmlとカルーセルを実現するjQueryをBxsliderからコピーペーストし完成です。

Bxsliderの豊富なオプションを使ってみます。表示の時間や画像のスライドの方法など100種類近くのオプションの設定方法をみます。

サンプルを見てプルダウンメニューの概要を確認し、jQueryを実装するhtmlページを準備します。

準備したページにプルダウンメニュー用のhtmlを書きます。３段の孫メニューまで用意しましょう。

引き続きhtml部分の編集を行います。

つづいてCSSスタイルシートの設定を行います。レスポンシブWEBデザインに対応させるため、幅をパーセントで指定していることに注意してください。

さらにCSSスタイルシートを設定します。

スクリプトを書く前に処理の手順を確認しておきます。ひとつひとつの処理を分解して、jQueryでどのようにスクリプトを書くか考えながら処理を箇条書きにしておきます。

このレクチャーでjQueryスクリプトを記述します。手順を確認しながら間違いのないように書きましょう。

プレビューしてみて動作を確認し、不満のある部分は修正します。

ページのトップに戻るボタンを配置するjQueryです。アンカー要素を配置しただけのボタンと違って、下部へのスクロールがないときは表示されず、スクロールしても常に同じ位置にボタンが表示されるback-to-topボタンの動作をサンプルで確認します。

このレクチャーではjQueryライブラリの読み込み設定とback-to-topボタンを配置するhtmlを書き込みます。

jQueryスクリプトとCSSの設定をback-to-topのサイトページからコピーペーストし完成させます。CSSでは初期状態では表示させないようにdisplay: noneの設定を忘れないように行います。保存して、プレビューで確認し、修正をして完成させます。

Lightboxとはどんな機能か。サンプルを見てLightboxの概要を理解します。

まずLightboxを組み込むhtmlファイルの準備をします。htmlファイルを用意し、Lightboxで使用する画像４枚をhtmlページに配置します。

画像の間に間隔をとります。CSSで１番目の要素のみ設定を変える方法を学びます。

上下の要素との間にoverflow: hiddenを使ってpaddingで正しく間隔を空ける方法を学びます。

Lightboxの公式ページを開いて、実装の方法を確認します。

Lightboxを実装するために必要なファイルを公式ページからダウンロードし、サイト内に置きます。

サイト内に置かれたcssファイルとjsファイルへのリンクをhtmlページのheadタグ内に書き、さらにjQueryライブラリが読み込まれているか確認します。

htmlファイルの画像にリンクを設定し、Lightboxが正しく動作するようにa要素内にrelを書きます。

実装されたLightboxにオプションを設定し、表示の時間や画像のサイズをカスタマイズしてみます。