jQueryオブジェクトとは?

このエントリーは軽めのjQuery Advent Calendar 2012の20日目のエントリーです。

よくjQueryの解説などを見ていると「jQueryオブジェクト」という単語が出てきますね。今回はjQueryオブジェクトとは何者かを解説をします。読み終える頃には少しだけJavaScriptに詳しくなれるよ。（若干長いです。）

そもそもオブジェクトとは?

さて、「jQueryオブジェクト」を解説する前にJavaScriptのオブジェクトについて解説します。JavaScriptのオブジェクトは非常に複雑なのですが、基本だけでもわかるとJavaScriptやjQueryの学習効率が全然かわってきます。

まず、ざっくりと解説するとオブジェクトとは「プロパティ」と「メソッド」を持つ構造体のことです。

プロパティとは?

ではプロパティとはなんでしょうか?プロパティとは特定のデータが格納されている変数のような物です。例えば次のコード、これはユーザーエージェントを取得する命令です。

navigator.userAgent

具体的にはブラウザがもっているnavigatorオブジェクトのuserAgentプロパティに格納されているユーザーエージェントの情報を取得しています。

メソッドとは?

メソッドとはオブジェクトがもっている関数です。次のコードは前のページに戻る命令です。

history.back()

この命令はhistoryオブジェクトのbackメソッドを実行して前のページに戻るという命令です。

つまり?

JavaScriptの命令でつぎのように書かれていたら.(ドット)の左のaaaがオブジェクト、.(ドット)の右のbbbがプロパティです。

aaa.bbb

ただし、次のコードのように.(ドット)の右が括弧で終わっていた場合.(ドット)の左のaaaがオブジェクト、.(ドット)の右のccc()はメソッドとなります。

aaa.ccc()

オブジェクトによってもっているプロパティとメソッドが異なるので、JavaScriptで何かしたい場合は、まずオブジェクトを記述して利用したいプロパティやメソッドを記述していきます。

jQueryオブジェクトとは?

jQueryオブジェクトはjQueryの命令をもったオブジェクトです。ですのでjQueryの命令つまりメソッドやプロパティを利用したい場合は、まずjQueryオブジェクトを記述してその後ろに.(ドット)を繋げて記述する必要があります。

$("#id .class")

jQueryでよく見かけるこの記述は「jQueryオブジェクト」を取得する命令です。次のように変数に入れたり、

var hoge = $("#id .class")

つぎのようにjQueryのメソッドを続けて実行することができます。

$("#id .class").メソッド()

たとえば次のようなコードがあったとします。

$("#id").click(function(){
  this.css("color","red");//NG
  $(this).css("color","red");//OK
});

最初の記述がなぜNGかというとfunction(){...}ないで利用できるthisはjQueryオブジェクトではないからです。click(function(){...})内のthisはDOMオブジェクトというクリックされた要素の情報がはいったオブジェクトなので$()メソッドを利用してjQueryオブジェクトに変換しないとjQueryの命令は利用できません。

逆に次のコードのようにjQueryオブジェクトに変換してしまうとDOMオブジェクトの命令は利用できなくなってしまいますので注意が必要です。

$("#id").click(function(){
  this.style.color=red;//OK
  $(this).style.color=red;//NG
});

ちなみにDOMオブジェクト.style.colorはCSSのcolorプロパティを変更するJavaScriptの命令です。

メソッドチェーン

$(".hoge").css("color","red").attr("title","hoge");

みなさまおなじみのメソッドチェーン「$(".hoge")」がjQeuryオブジェクト「.css(...)」がjQueryオブジェクトのcssメソッドということは先ほど説明しましたね。メソッドチェーンではさらに「.attr(...)」といったメソッドが続きます。メソッドの右にメソッドを書いても良いの?メソッドはオブジェクトの右に書く物じゃないの?といった疑問が生まれます。

実はjQueryの多くのメソッドはjQueryオブジェクトを返します。その為、メソッドが返したjQueryオブジェクトの右にメソッドが記述できます。

先ほどの命令を日本語で説明すると「$(".hoge")」でclass属性「hoge」を持つ要素のjQueryオブジェクトを取得し、「.css(...)」でそのjQueryオブジェクトのCSSを変更しjQueryオブジェクトを再び返します。「.attr(...)」ではそのjQueryオブジェクトの属性を変更しているわけです。

jQueryオブジェクトを返さないメソッド

メソッドの一部はjQueryオブジェクトを返しません。そいったメソッドでは右にjQueryのメソッドを記述することができません。

$(".hoge").css("color").attr("title","hoge");

この場合「.css("color")」はjQueryオブジェクトではなく、最初のjQueryオブジェクトのcolorプロパティの値を返します。jQueryオブジェクトではないので「.attr(...)」をつづけて書くことができないわけですね。

変更したjQueryオブジェクトを返すメソッド

一部のjQueryのメソッドは最初に指定された物とは異なるjQueryオブジェクトを返します。

$(".hoge").css("color","red").first().attr("title","hoge");

「$(".hoge")」はclass属性「hoge」を持つ要素のjQueryオブジェクトを取得し「.css(...)」でそのjQueryオブジェクトのCSSを変更しjQueryオブジェクトを再び返します。この際にかえされるのは、最初と同じつまりclass属性「hoge」を持つ要素のjQueryオブジェクトです、「.first()」はclass属性「hoge」を持つ要素のjQueryオブジェクトから最初の一つのみを取得して返します。その為class属性「hoge」を持つ要素が複数ある場合、「.attr(...)」で変更されるのは最初の.hogeのみということになります。