読者です 読者をやめる 読者になる 読者になる

webサイト制作の勉強@迅

webサイト制作の基本やホームページ制作を学ぶ、webサイト制作の勉強@迅。webサイト制作に必要なイラストレーター|フォトショップ|Dreamweaver|HTML5|CSS3|javascript|jQuery|の基本を紹介しています。

jQueryをこれから使いたい人のために~jQuery入手&導入編~

jQueryとは

簡単に特徴をまとめておきます。

javascriptをより少ない記述でかけるようにしたjavascriptライブラリです。

javascriptのライブラリは他にもありますが、一番ポピュラーで浸透しているものと言っても過言では無いでしょう。

jQueryを入手する

jQueryのサイトにアクセスします。↓こちらからでも大丈夫です。

jquery.com

オレンジ色のDownload jQueryボタンを押しましょう。最新版のjQueryのダウンロードページにいきます。

f:id:zinnteitan:20161101195306j:plain

 

下記のようなページにいけましたら、

Download the compressed,production jQuery 3.1.1をクリックして最新バージョンのjQueryの圧縮版を入手しましょう。

※compressed=圧縮された(ファイル)=つまり軽いです。中身をいじったりする必要は無いので、改行等が取り除かれている圧縮版を使いましょう。

jQuery 3.1.1はjQueryのバージョンです。常にアップデートされていますので、最新版をダウンロードするようにしましょう。

f:id:zinnteitan:20161101195550j:plain

 

入手したjquery-3.1.1.min.jsというファイルはjsという名前のフォルダを作って中にしまっておきましょう。

以上が、jQueryの入手です。続いて、このjQueryの圧縮ファイルをhtmlの中で読み込んでjQueryを使用できる状態まで持っていきましょう。

 

HTMLにダウンロードしたjQuery本体を読み込ませる

index.htmlと同じ階層に先程ダウンロードした圧縮版jQuery本体を入れたjsフォルダを配置しておきます。続いて、ヘッダの中に以下のコードを記述して、jsフォルダの中のjQuery本体の圧縮されたjsファイルを読み込みます。このファイルが読み込まれた時点で、jQueryの記述が可能になります。

 <script src="js/jquery-3.1.1.min.js"></script>

 

jQueryをbodyタグ内に記述してみる

jQueryの本体はもう読み込まれているので、jQueryを記述することが可能になっています。実際にjQueryをhtmlファイル内に記述してみましょう。

<body>

<script>

jQueryのコードを記述する場所

</script>

</body>

htmlファイル内にjQueryのコードを書く場合は<script>タグで囲んだ範囲内にjQueryのコードを記述します。

 

jQueryを外部ファイルの.jsに記述してみる

jsフォルダ内にscript.jsというjavascriptファイルを用意します。この用意したjavascriptファイルにjQueryのコードを記述して、ヘッダで本体の読み込みが終わった後に、この外部ファイルをヘッダから読み込みます。

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/script.js"></script>

 

※jsファイル内では、jQueryのコードを<script>タグで囲む必要はありません。

 

実際にこのような感じで記述していきます

今はコードの意味がわからなくても大丈夫です。

bodyタグ内に記述する例。↓

<script>

$(function(){
  $("#panel-btn").on('click',function() {
    $("#panel").slideToggle(200);
    $("#panel-btn-icon").toggleClass("close");
    return false;
  });
});

</script>

 

外部.jsファイル内にjQueryのコードを記述する例。↓

$(function(){
  $("#panel-btn").on('click',function() {
    $("#panel").slideToggle(200);
    $("#panel-btn-icon").toggleClass("close");
    return false;
  });
});

 

以上です。いかがでしたでしょうか、jQueryは少ない記述で、比較的容易にサイトに対して、動的なコンテンツを実装することができます。是非皆さんもjQueryを使って様々な動的コンテンツを作ってみてはいかがでしょうか。ではまた次回。