jQueryとは、ウェブサイトを構築する際に、ちょっとした動きを演出したいときなどに利用されるJavascriptライブラリのことです。よく画像などがフェードしながら切り替わったり、スライドして次々と画像が表示されたりするものを目にしたことがあるかと思いますが、これらの動きもjQueryを利用して実装していることが多く、簡単に取り入れることができます。記述の仕方もわりとCSSに近いものがあり、CSSを触ったことのある方であれば、比較的、理解しやすいと思います。

jQueryの使い方

jQueryを使用するのはまず、jQuery本体を読み込む必要があるので、jQueryの公式サイトでファイルをダウンロードしてください。
ライセンスはMITライセンスとなっているので、著作権表示を消さなければ自由に使用することができます。
実際に読み込ませるときは、HTMLのhead要素内に読み込ませます。先に本体ファイルを読み込ませ、そのあとに他のjQueryファイルを読み込ませます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charaset="utf-8">
<title></title>
<script src="js/jquery.js"></script>　//本体を先に読み込ませる
<script src="js/function.js"></script>
</head>

jQueryのコードは直接head要素内に書き込んでも動きますが、あまり書き過ぎると煩雑になるので、別ファイルとして読み込ませる方が良いでしょう。それでは、実際にjQueryコードの基本的な記述を見ていきます。

jQueryの基本的な構造

$(document).ready(function() {
  //jQueryの処理を記述
});

jQueryではただ単に、命令文を書いただけでは、意図した通りに動作してくれません。そこで「ready」というメソッドを使ってスクリプトを制御させます。この場合、readyメソッドの中に書かれた命令はHTMLが読み込みが終了したあとに実行されます。また、このreadyメソッドは以下のように省略することもできます。

$(function() {
  //jQueryの処理を記述
});

ほとんどの場合、jQueryでスクリプトを書くときは、最初にreadyメソッドを書き、その中に命令文を記述していく形になります。これはjQueryを書くときの1つのお約束事と覚えておきましょう。

セレクタを利用した記述例

jQueryでは、様々なセレクタを利用してHTML要素を指定できたりします。1つ簡単な例を書いてみます。

$(function() {
  $("p").css("color","red");
});

これは、p要素にあるテキストを赤色に変えるという命令になります。このようにセレクタを使って指定することができます。ちなみにこれは、要素セレクタを利用した記述になります。この他にも、IDセレクタやクラスセレクタ、first-childやlast-childなどのような擬似セレクタなど様々なセレクタがありますので、いろいろ試してみてください。

おすすめの記事