デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:jQuery入門
2章:jQuery基礎
3章: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オブジェクトを作成する「$( )」はリファレンスのjQuery(セレクタ)で説明しています。

セレクタは非常にたくさんの種類があります、どのような種類があるか大まかでよいのでチェックしておきましょう。→参考:セレクタ目次(css3と共通のセレクタも多いので、css3の学習にもつながります)

次回はオブジェクトを操作する「メソッド」について説明します。