jQueryをこれから使いたい人のために~jQuery入手＆導入編~
jQueryとは
簡単に特徴をまとめておきます。
javascriptをより少ない記述でかけるようにしたjavascriptライブラリです。
javascriptのライブラリは他にもありますが、一番ポピュラーで浸透しているものと言っても過言では無いでしょう。
jQueryを入手する
jQueryのサイトにアクセスします。↓こちらからでも大丈夫です。
オレンジ色のDownload jQueryボタンを押しましょう。最新版のjQueryのダウンロードページにいきます。
下記のようなページにいけましたら、
Download the compressed,production jQuery 3.1.1をクリックして最新バージョンのjQueryの圧縮版を入手しましょう。
※compressed=圧縮された(ファイル)＝つまり軽いです。中身をいじったりする必要は無いので、改行等が取り除かれている圧縮版を使いましょう。
※jQuery 3.1.1はjQueryのバージョンです。常にアップデートされていますので、最新版をダウンロードするようにしましょう。
入手した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を使って様々な動的コンテンツを作ってみてはいかがでしょうか。ではまた次回。
