WEBマスター

『jQuery』を覚えよう!

jQueryとは

村長
村長
「jQuery」とは、「JavaScript」を応用したものです。
簡単に言うと、すでにプログラムが構築されたものです!
なので、「JavaScript」が分かれば、扱いは簡単ですよ♪

「JavaScript」が分からない時は、クエストを見直してみましょう!

新人
新人
それなら勉強したので、大丈夫だと思います!
村長
村長
良かったです♪
とにかく見てやってみましょう♪

jQueryを読み込む方法

新人
新人
「jQuery」は、どのように読み込めば良いのでしょうか。
村長
村長
「jQuery」の読み込み方は2つあります。

jQueryのサイトから、ダウンロードして使う

村長
村長
まず、「jQuery」サイトにあるファイルをダウンロードして使う方法があります。
村長
村長
上記サイトから「Download the compressed, production jQuery 3.x.x」というファイルを右クリックでダウンロード(リンク先を保存)します。
新人
新人
分かりました!
村長
村長
「jquery-3.x.x.min.js」というファイル名になっていると思います。
「3.x.x」は、バージョンなので変わります。
新人
新人
なるほど!
村長
村長
ファイルをダウンロードしたら、任意のファイル名でサーバーにアップロードします!
そして、下記コードを<head>~</head>内または、<body>~</body>内に記述します。

jQueryのサイトから、ダウンロードして使う

村長
村長
もう1つは、「jQuery」に公開されているファイルをダウンロードせずに使う方法(CDN)があります。
新人
新人
どういう事でしょうか?
村長
村長
そして、下記コードを<head>~</head>内または、<body>~</body>内に記述するだけで良いので、簡単です♪
村長
村長
バージョンは、先ほどのサイトで確認してくださいね♪
新人
新人
はい!

jQueryで作るプログラム

村長
村長
それでは、さっそく作成してみましょう!

ハンバーガーメニュー

フェードイン

スライド

スムーズスクロール

フッター

トップへ戻る

まとめ

新人
新人
『jQuery』が理解出来ました!!
村長
村長
お疲れ様でした!
では『WEBマスター トップページ』に戻りましょう♪
新人
新人
はい!