2017/8/4更新

【jQuery入門】jQueryの基本的な書き方・文法

今回は、jQueryを初めて使う人向けの基本的な書き方・文法ついて説明します。

jQueryの基本形

jQueryでは、DOM（HTML）の操作をすることが多く、基本形は以下のようになります。

$("セレクタ").メソッド("パラメータ[引数]");

1	$("セレクタ").メソッド("パラメータ[引数]");

セレクタは、CSSと似ており「#id」「.class」というように、対象となる要素を指定することができます。さらに、「.」でメソッドをつなげることで、対象の要素に対して操作を行います。

簡単なサンプル

例えば、#targetを非表示にする場合は、以下のようなコードです。

$("#target").hide();

1	$("#target").hide();

「$("#target")」でID（#target）をつかって要素を指定し、hide()メソッドで要素を非表示にします。

jQueryの基本：セレクタ

jQueryではCSSと似た形で、IDやクラスを使って要素を指定できます。

jQueryよく使われるセレクタ

$("#target")	IDセレクタ
$(".target")	クラスセレクタ
$("p img")	子孫セレクタ
$("p + p")	隣接セレクタ

ほかにも、先頭要素だけ取得する「:first」や、非表示の要素だけを取得する「:hidden」などの「フィルター」という仕組みがjQueryでは用意されています。

jQueryの基本：メソッド

jQueryでは、メソッドは「$("セレクタ")」に、「.」でつなげる形で使います。

また、.hide("slow")のように、パラメータ（引数）を渡すことで、メソッドの動作を制御します。パラメータの型はメソッドによって異なるので、公式ドキュメントなどを参照してください。

jQueryの基本：メソッド - コールバック

初心者の時に戸惑いがちなのが、メソッドのパラメータ（引数）に関数を渡すという形式。以下より、パラメータのことを引数と称します。

$("#target").on("click", function(){
  //処理内容
});

$("#target").on("click", function(){

//処理内容

});

これは、on()メソッドに対して第一引数「click」と、第二引数「function(){//処理内容}」を渡しているということです。

イベント発生時に処理する内容を記述

第二引数の「function(){//処理内容}」の部分は、コールバックと呼ばれるもので、あるイベント（クリックなど）が発生した時に、実行される処理内容をまとめたもの（関数）です。

２つのコードをサンプルとして見てみましょう。この２つは、どちらもボタンを押すと#target要素が表示・非表示されるという同じ動きをします。

例１.

$('#toggle').on('click', function() {
  $('#target').toggle("slow");
  $('#target').css("background","red");
});

$('#toggle').on('click', function() {

$('#target').toggle("slow");

$('#target').css("background","red");

});

例２.

$('#toggle').on('click', toggle);

function toggle() {
  $('#target').toggle("slow");
  $('#target').css("background","red");
}

$('#toggle').on('click', toggle);

function toggle() {

$('#target').toggle("slow");

$('#target').css("background","red");

}

例１.の場合は、関数に名前をつけずに処理をまとめただけの言ってしまえば使い捨ての関数。例２.の場合は、toggle()という関数を定義して、コールバックに指定しています。

その箇所でしか使わない処理の場合は例１.を、ほかの箇所でも使う場合は例２.のように名前付き関数を定義して使い回すというように使い分けると良いでしょう。

jQueryの基本：メソッド - メソッドチェーン

「メソッドチェーン」も、初心者が戸惑いやすい文法です。jQueryのメソッドは、メソッドチェーンといって、ドット「.」でチェーン（鎖）のようにつなげて、書くことができます。

//２つに分けていたコードを
$("#target").css("color", "red");
$("#target").addClass("additional");
//「.」でつなげて１つに
$("#target").css("color", "red").addClass("additional");

//２つに分けていたコードを

$("#target").css("color", "red");

$("#target").addClass("additional");

//「.」でつなげて１つに

$("#target").css("color", "red").addClass("additional");

要素の指定が一度で済み、JavaScriptの実行速度も早くなるので上記のような場合はメソッドチェーンを使うと良いでしょう。

以上が最も基礎的なjQueryの書き方です。合わせて以下も参照すると、より理解が深まるでしょう。

参照：【jQuery入門】jQueryにおける「$（ドルマーク）」の意味

jQuery