jQuery入門講座使い方-オブジェクトについて

オブジェクトについて

概要

操作する対象を指定する

jQueryに限らず、ほとんどのスクリプト言語では「オブジェクト」という仕組みが必要です。これによって操作する対象を指定します。jQueryで利用できるオブジェクトのことをjQueryオブジェクトと呼び、ここではjQueryオブジェクトの作成方法を説明します。

オブジェクト ( object ): オブジェクトとはスクリプトで操作する対象のことを指します。

jQueryオブジェクト ( jQuery object ): jQueryで利用するオブジェクトです。

解説

jQueryオブジェクトの作成

丁寧なjQueryオブジェクトの作成方法は以下の様になり、「jQuery( )」の( )内に操作したい対象を記述します。
※（）内のセレクタについては次項で説明します。

jQuery(セレクタ)

jQueryオブジェクトは頻繁に利用するので上記のように長いと大変です。ですので以下の様に「$」だけで記述できるようになっています。こちらを覚えるようにしてください。
前ページの「readyイベント」と同じように見えますが（）内にfunctionではなくセレクタを設定する点が異なります。

$(セレクタ)

セレクタとは

セレクタとはjQueryの仕組みではなくcssの仕組みです。→参考：googleで「css セレクタ」で検索

セレクタ ( selector ): cssにおいて対象を指定する仕組み。

セレクタはcssの仕組みですが、構文「$( )」のカッコ内で利用でき、jQueryオブジェクトを作成します。cssの仕組みを利用できる点が、jQueryをデザイナーにも使いやすくしている理由となっています。

前ページで紹介したサンプル（ready/02.html）でも、以下のように利用しています。cssのセレクタ指定と異なり、クォートが必要なことに注意してください。

$(function () {
	$("img").hide();
});

これでjQueryオブジェクトが作成され、img要素をjQueryで操作できるようになるわけです。

セレクタ以外を利用することもあります

jQueryではセレクタ以外を指定してjQueryオブジェクトを作成する事があります。そのうちthisは重要なので、2章「thisについて」で説明します。あと利用する機会があるのは以下のdocumentとwindowですが、利用頻度は低いと思うので、今の段階では頭の片隅に覚えておくだけでよいです。
※windowとdocumentはセレクタではなくDOM要素と呼ばれるものです。これについては2章で説明します。

documentは前ページの「2つの構文」で覚えなくても良いと説明した構文で利用しています。これはページ全体をさします（セレクタではないのでクォートで囲まないことに注意）。なので以下の構文は「ページ全体（document）の準備（ready）ができたら」という事になります。

jQuery(document).ready(
  /*--------------------------------------------------
  ページ構成が読み込まれたら この()内の処理が実行されます。
  ---------------------------------------------------*/
);

windowはブラウザのウインドウを指しますが、このサイト内では殆ど利用していません（「使い方」にも登場しません）。リファレンスではscrollメソッドで利用し、ブラウザのスクロール時の処理を設定しています。

$(function () {
	$(window).scroll(scrollFunc);
});

あとjQueryではありませんが、javaScriptで「ウインドウを閉じる」を作成する時に利用します。
→googleで「javascript ウインドウ閉じる」で検索

オブジェクトについて

概要

操作する対象を指定する

解説

jQueryオブジェクトの作成

セレクタとは

セレクタ以外を利用することもあります

関連項目