2018.06.29

jQueryの基礎知識

目次

jQueryとは

jQueryはJavaScriptという言語の「ライブラリ」と言われるもので、JavaScriptを扱いやすくしたファイルのようなものです。jQueryを使えばWEBページに動きを付けることができ、現在のホームページ制作ではほぼ必須のスキルといえるでしょう。

jQueryを使うには

jQueryを使うには、①jQueryそのものの読み込み、②jQueryを記述したファイルの読み込み、③jQueryの型の記述が必要になります。

jQueryの読み込み

まずはjQueryそのものを読み込まなければいけません。読み込み方は、ファイルをダウンロードしてローカルで読み込む方法もありますが、インターネット経由で読み込む方法が簡単で一般的なので、そちらをオススメします。

jQueryをインターネット経由で読み込むには、下のコードをhtmlファイルのheadタグの中に貼り付けるだけでOKです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

jQueryを記述したファイルの読み込み

jQueryを書いていくファイルは、htmlやcssと違い、拡張子を「.js」にする必要があります。例えば、よく使われるファイル名だと「script.js」などですね。

新しく作ったjsファイルを読み込むには、htmlファイルの</body>の直前に以下のコードを書くようにします(src属性の値はファイル名によって変えてください)。

<script type="text/javascript" src="script.js"></script>

このjsファイルを読み込むためのコードはheadタグの中に書くこともできますが、</body>の直前に書くことでページの表示速度を速めることができます。

jQueryの型

jQueryのjsファイルにはまず書かなければならないコードがあり、それが下のコードなので、そのままコピペしてしまいましょう。

$(function() {
	
	//この中にコードを書いていく

});

jQueryのコードは{}の中に書いていくことになります。

jQueryの書き方の基本

jQueryのコードは基本的に次のようになります。

このように、jQueryにはセレクタとメソッドと呼ばれるものがあり、セレクタは「何を」、メソッドは「どうするか」に当たります。例えば、$(“p”).hide();とすると、htmlのp要素(セレクタ)が見えなくなります(hideメソッド)。

jQueryのコードは文末にセミコロン(;)が必要なことに注意しましょう。

セレクタはシングルクオーテーション(’)かダブルクオーテーション(”)で囲いますが、どちらもさほど違いはないため、好きなほうを使って大丈夫です。個人的には、片手で打てるので、ダブルクオーテーションのほうが好きです。

↓また、セレクタにはhtmlのタグだけでなくclassやidも指定できます。classの場合はドット(.)を、idの場合はシャープ(#)を付けます。


home

scroll