jQueryの導入と使い方

jQeuryの導入

jQueryの導入は簡単です。公式サイトからjsファイルをダウンロードして任意の名前にリネームして、サイトのページからそのファイルを参照するだけです。

jQueryの使い方

グローバル変数は「jQuery」とその別名である「$」のみです。

$()はjQuery()の簡略表記で、jQueryが提供するもっとも基本的かつ特徴的な機能です。

 

$()関数の役割

  1. セレクタ構文で特定の要素を抽出する(返値はjQueryオブジェクト)
  2. DOM ElementオブジェクトをjQueryオブジェクトに変換する
  3. ドキュメントの読み込みが完了した際のイベントハンドラ($(document).ready() と同等)

$()で取得したjQueryオブジェクトに対してAPI(メソッド)を呼び出すのが一般的な使い方となります。

間違いやすい点

$()関数の役割のうち、1と2の戻り値はjQueryオブジェクトでありDOM要素ではありません。

ですので、DOM要素が持つメソッドは使用できません。

すなわち、document.getElementById()の代替として$()を使うことはできません。これは間違いやすいので要注意です。

$(document).ready()

jQuery() あるいは $()と書くことも可能です。

$()に関数オブジェクトを渡す、あるいは匿名関数を記述することでページロード時の処理を登録できます。

ただし、ここでいうページロード時とは、window.onloadとは少し違います。

window.onloadが画像などのリソースを含むすべての要素の読み込みが完了したタイミングで呼び出されるのに対して、$()はドキュメントツリーが完成したタイミングで実行されます。よって画像の遅延読み込みをする場合には$()のほうが早いタイミングで呼ばれます。

参考:$(document).ready()|jQuery

よく使われるメソッド

  • attr(name,value) 要素に属性を追加
  • text(txt) テキストを要素配下にセット
  • css(name,value) スタイルを要素にセット
  • appendTo(target) ターゲット要素の配下に追加
  • find(el) 要素を検索
  • end() 直前に行われた要素セットに影響を与えるような処理(コンテキストが変わってしまうと表現します)をキャンセルします。例えばfindで要素を見つけた直後に使用することで元のコンテキストに戻ります。
  • html 要素のINNERHTMLを設定

メソッドチェーン

$(xxx)
.attr(xxx)
.text(xxx)
.css(xxx)
.appendTo(xxx);

上記のようなコードを見ると、まるでwith文のように見えますが実はそうではありません。
よく見てみると各行末にはセミコロンが付いておらず、最終行のみセミコロンが付いています。
JavaScriptでは改行が意味を持たないことを思い出してください。
上記は

$(xxx).attr(xxx).text(xxx).css(xxx).appendTo(xxx);

を分かりやすく改行したものなのです。

上のようにメソッドを連結したものを「メソッドチェーン」と呼びます。

jQueryオブジェクトのメソッドの多くは返値として自分自身(jQueryオブジェクト)を返却するものが多く、上のように複数のメソッドをドット演算子(.)で繰り返し呼び出すことができるのです。

メソッドチェーンを使うことで簡潔に記述でき可読性が向上するだけでなく、より思考に近い形で表現できるようになり生産性の向上にもつながります。