jQuery – 基本

基本構文~readyイベント

概要

jQueryが、bodyブロックの各要素が読み込まれた後に実行されるよう、jQueryのreadyイベントを使う。

readyイベントは、画像などを含むページのコンテンツ全体の読み込みではなく、ページのDOM要素が読み込まれた段階で呼び出される。

このreadyイベントが呼ばれたときに、そのコールバックとしての内容としてjQuery文を書いていく。

通常、このコールバックは無名異関数として記述される()。

jQueryをすべて書き下す例

jQueryのコンストラクタでdocumentオブジェクトを作成し、そのreday()メソッドの中で無名関数のコールバックを指定し、固有のjQuery操作を行うように実装。

以下の例はCoffeeScriptで記述しており、コールバックの処理内容として、h1要素の内容を3000msかけて消すよう指示している。

jQueryに直接コールバックを渡す記法

以下の二つは同じ効果を持つ。

  • jQuery(function)
  • jQuery(document).ready(function)

jQuery()の引数にセレクタを指定すると後述のコンストラクタと解釈されてオブジェクトが作成されるが、ここでは引数に関数を指定しているため解釈が変わり、readyメソッドと同じ効果を持つ。

 

エイリアスによるシンプルな書き方

jQueryでは、”$”が”jQuery”のエイリアスとなっているので、上記のコードは以下のように簡略化できる。

特にjQueryに直接コールバックを渡す方法は一番シンプル。

 

オブジェクトとメソッド

オブジェクトの作成

jQueryの操作対象はページのDOM要素だが、jQueryでは、DOMのidやクラス名を使ってそのDOMのオブジェクトを作成し、それらのメソッドを通して操作する。

オブジェクトの作成はjQuery()コンストラクタを使い、セレクタとしてcssのセレクタを指定。

先の例では、id=”header”を与えられた要素(h1)のオブジェクトを以下の様に作成している。

メソッドによる操作

メソッドは各オブジェクトのクラスに定義されており、他のオブジェクト指向言語と同じ形で呼び出す。

この例では”#header”で作成したオブジェクトに対して、cssメソッドで前景色を青にするよう指定している。

これをエイリアスを用いて書くと以下の通り。

メソッドの機能

メソッドには、機能に応じて以下の種類がある。

  • オブジェクトの情報を取得するもの
  • オブジェクトに対して操作を行うもの
  • オブジェクトのイベント処理を行うもの

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です