- 索引
- 1章:jQuery入門
-
- ├ jQueryのメリット
- ├ readyイベント
- ├ オブジェクトについて
- ├ メソッドについて
- ├ 情報の取得
- ├ イベント(1)
- ├ イベント(2)
- └ 初歩なサンプル
- 2章:jQuery基礎
-
- ├ thisについて(1)
- ├ thisについて(2)
- ├ jQueryとDOM要素
- ├ 簡単な演出
- ├ thisから辿る
- ├ 汎用的なアニメ(1)
- ├ 汎用的なアニメ(2)
- ├ アニメの停止
- ├ アニメを管理する仕組み
- └ 汎用的なアニメ(3)
- 3章:jQuery発展
-
- ├ イベントフロー(1)
- ├ イベントフロー(2)
- ├ イベントフロー(3)
- ├ 画像のプリロード
- ├ jQueryの高速化
- └ メソッドチェーン
- 番外編:研究
-
- ├ イベントを外す
- ├ cssアニメとの連携(1)
- ├ cssアニメとの連携(2)
- ├ cssアニメとの連携(3)
- ├ セレクタの自作(1)
- ├ セレクタの自作(2)
- ├ クロージャ(1)
- ├ クロージャ(2)
- └ クロージャ(3)
オブジェクトについて
概要
操作する対象を指定する
jQueryに限らず、ほとんどのスクリプト言語では「オブジェクト」という仕組みが必要です。これによって操作する対象を指定します。jQueryで利用できるオブジェクトのことをjQueryオブジェクトと呼び、ここではjQueryオブジェクトの作成方法を説明します。
- オブジェクト ( object )
- オブジェクトとはスクリプトで操作する対象のことを指します。
- jQueryオブジェクト ( jQuery object )
- jQueryで利用するオブジェクトです。
解説
jQueryオブジェクトの作成
丁寧なjQueryオブジェクトの作成方法は以下の様になり、「jQuery( )」の( )内に操作したい対象を記述します。
jQuery(セレクタ)
jQueryオブジェクトは頻繁に利用するので上記のように長いと大変です。ですので以下の様に「$」だけで記述できるようになっています。こちらを覚えるようにしてください。
$(セレクタ)
セレクタとは
セレクタとは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ですが、利用頻度は低いと思うので、今の段階では頭の片隅に覚えておくだけでよいです。
documentは前ページの「2つの構文」で覚えなくても良いと説明した構文で利用しています。これはページ全体をさします(セレクタではないのでクォートで囲まないことに注意)。なので以下の構文は「ページ全体(document)の準備(ready)ができたら」という事になります。
jQuery(document).ready( /*-------------------------------------------------- ページ構成が読み込まれたら この()内の処理が実行されます。 ---------------------------------------------------*/ );
windowはブラウザのウインドウを指しますが、このサイト内では殆ど利用していません(「使い方」にも登場しません)。リファレンスではscrollメソッドで利用し、ブラウザのスクロール時の処理を設定しています。
$(function () { $(window).scroll(scrollFunc); });
あとjQueryではありませんが、javaScriptで「ウインドウを閉じる」を作成する時に利用します。
→googleで「javascript ウインドウ 閉じる」で検索
関連項目
セレクタからjQueryオブジェクトを作成する「$( )」はリファレンスのjQuery(セレクタ)で説明しています。
セレクタは非常にたくさんの種類があります、どのような種類があるか大まかでよいのでチェックしておきましょう。→参考:セレクタ目次(css3と共通のセレクタも多いので、css3の学習にもつながります)
次回はオブジェクトを操作する「メソッド」について説明します。
次のページ:メソッドについて