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

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

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

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

先ほど読み込みのスクリプトが書かれたhtmlページをブラウザでプレビューして実際にjQueryが読み込まれているかどうかを確認してみましょう。このためにAlertというjQueryのスクリプトをもうひとつページに記述してプレビューします。

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

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

jQuery構文のなかで最も基礎的な要素「セレクタ「と「メソッド」について、先のレクチャーで書いたスクリプトを例に説明します。

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

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

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

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

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

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

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

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

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

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

jQueryで動画ができるanimateというメソッドを学びます。最初に正円が左から右に動くだけの簡単なスクリプトを書いてみます。このレクチャーではjQueryのスクリプトを書く前にhtmlとcssの設定を行います。

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

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

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

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

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

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

ここでは先ほど学んだhideとshowメソッドの他に簡単なメソッドを追加して、簡単なアコーディオンメニューをjQueryで作ってみます。初めての本格的で実用に使えるjQueryスクリプトの記述です。このレクチャーではまず、html部分を書きます。

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

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

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

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

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

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

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

このセクションでは画像をスライドさせる機能、「カルーセル」の例として”Bxslider”というプラグインをサンプルページに実装します。まずBxsliderの機能をサンプルで確認し、次にBxsliderのサイトページで実装の手順を確認します。

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

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

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

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

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

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

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

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

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

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

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

プレビューして確認し、完成です。

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

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

back-to-topのCSS、jQueryのコードの内容を説明します。

back-to-topを実装したページのボタンのデザインを変更し、文字から画像にします。画像を使用する練習です。

ページをスクロールしてフェードインする効果がどんなものか、具体的に完成したページを見ながら実装方法の概要を説明します。

練習素材で用意したhtmlページ効果をかけたい要素に必要なクラス名をつけてhtml側の準備をします。

前のレクチャーでhtmlに書いたクラス名でCSSスタイルを設定します。フェードインする前の要素の位置や不透明度などを設定します。そして最後にデフォルトでは見えなくなるようにdisplay: none:の設定を書きます。

続いてjQueryを書きます。このレクチャーではjavascriptの変数について学び、変数を使ってスクロールされた位置を取得する方法を理解します。

前のレクチャーで学んだ変数を使って実際のjQueryを書きます。このjQueryではhtmlページに新しいクラスを付与するjQueryの書き方を学びます。

前のレクチャーからの続きでjQueryを書き、最後にプレビューして確認し完成させます。

モーダルウィンドウがどんな機能なのか、完成したhtmlページを使って具体的に動かしてみます。さらにモーダルウィンドウがどんな仕組みで動いているのか説明します。

制作の手順を説明し、流れを理解してhtmlページに必要な要素を配置します。

オーバーレイ要素とモーダルウィンドウ要素のCSSを設定します。要素を中央配置する方法や不透明度をつける設定方法などを学びます。

引き続きCSSの設定を続けます。このレクチャーではモーダルウィンドウ要素の幅を%で設定する方法などを学びます。

jQueryの処理の手順を説明し、それに従ってjavascriptのコードを書いていきます。ここでのスクリプトはそう難しくありません。

次に複数の異なったモーダルウィンドウがある場合の設定をします。まず通常考えられる方法を実装してみて、検討します。

異なった複数のモーダルウィンドウを表示するためにhtmlとjQueryが値を共有する「データ属性」について学び、データ属性の仕組みを使ってjQueryを書いて完成させます。