入門
初心者のためのjQuery
11

これまで説明した基礎をもとに、それらのパーツを組み合わせ簡単なロールオーバーメニューを実装してみます。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

JavaScriptを書く上で重要な役割を果たす変数thisを使ったイベント設定を紹介します。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

ユーザーのマウス操作など「なにかが起きたときに」特定の処理を行う「イベント」について学びます。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

「要素を動かす」といっても、アニメーションのように「要素の表示」を動かすわけではありません。文字どおり指定された要素の構造上の位置を動かします。また、jQueryを使って、新規に要素を作成することもできます。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

よく使う重要なメソッドのうちのひとつ「アニメーション」を学びます。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

指定した要素の中身を変更するメソッドを学びます。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

前回はjQueryからHTML上の要素を取ってくる記述を学びました。今回は取ってきた要素に対して、スタイルを変更する方法を学びます。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

jQueryはJavaScriptのライブラリであるため、実装するためには、JavaScriptの基礎的な文法を知らないといけません。ここでは必要最低限の文法を解説します。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

今回から実際にjQueryを使ったJavaScriptを書いてみましょう。まずjQueryを使えるようにするための準備について説明します。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

簡単な機能が自分で実装できるレベルでJavaScript/jQueryを使うためには、どのような知識が必要か、そのポイントを解説します。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

普段HTMLやCSSを中心にソースコードを書いていて、JavaScriptなどのプログラムには触れたことのない人を主な対象に、jQueryを解説します。まずは、jQueryでなにができるのか概観してみましょう。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター