jQuery - PrototypeにインスパイアされたJavascriptライブラリ

jQuery

jQuery is designed to change the way that you write Javascript.

jQueryはあなたのJavascriptプログラミングの方法に変化をもたらすように設計されている。

というわけで、jQueryを使ったJavascriptプログラミングにチャレンジしてみよう。

What is jQuery?

jQuery is a Javascript library that takes this motto to heart: Writing Javascript code should be fun. jQuery acheives this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.

jQueryは、「Javascriptプログラミングを楽しくするべきだ。」をマジメに考えるJavascriptライブラリだとさ。

非常にコンパクトなライブラリでサイズは10kbほどで、コードリーディングもさほど辛くない。

また、ｊQueryを使った、デモはこちらから見ることが出来ます。
http://jquery.com/docs/Demos/


ｊQueryのアーキテクト

• ｊQueryBase
• BasicEffects
• Advanced Events

から構成される。

jQueryBaseは、ｊQueryのコア部分である。DOM要素を取得する$()やイテレータ,イベントハンドラの登録関数などからる。
BasicEffectsは、Effect（視覚効果）を与えるメソッドを実装している。
Advanced Eventsは、イベントを扱うときに役に立つメソッドの実装である。


ｊQueryBase

jQueryでは、全てのプラグイン、基本の関数、セレクタでCVSとXPathをサポートしている。
PrototypeからインスパイアされているｊQueryを語るには、$()メソッドを初めに説明するべきだろう。
Prototpyeの$()とjQueryのそれは、動作が異なる。これについては、後の「PrototypeとjQuery」で説明したい。

$() 関数

全ての元になる大事な関数。DOM要素を参照する。
jQuery の$()関数は、Prototypeの$()とは異なる。Prototypeでは、IDでDOMを参照するがjQueryではXpath, CSS, 独自の式でDOM要素を参照する。また、返り値はｊQueryObjectで、これもPrototypeとは異なる。

$()関数は、3つのシンタックスを取る。

• $(EXPRESSION)
• $(DOMElement)
• $(..., Context)

EXPRESSIONは、CSSとXpathからなるセレクタの式である。
簡単な使用方法として、pタグの要素を全て取得する場合は次のように書く。

$("p")

$()は、jQUeryオブジェクトを返すので連鎖してメソッド呼び出しが可能である。

$("p").addClass("test").show()

デフォルトでは、$()関数は現在のHTMLドキュメントからDOM要素を検索する。
DOM要素を指定して$()関数を通す事で、DOM要素をjQueryObjectとして取得でき、jQueryObject

が持つ全てのメソッドが使用可能となる。

$(document.getElementById("test")).onclick(...)
$(document).onready(...)
$(window).onload(...)
$(xml.responseXML) // For working with XMLHTTPRequest

$(...,Context)
第二引数の、コンテキストはオプションで指定可能である。このパラメータを指定した場合、コ

ンテキストの中からDOM要素の参照が行われる。つまり、下記の記法の速記法である。

$(context).find(...)

shorthand(速記法):

$("p", document)
$("title", xml.responseXML)

Iteration

size()
要素数を返す。

$("p").size()

get(), get(N)
DOM要素を配列で返す。Nが指定された場合は、N番目の要素が返される。

$("p").get()

each(function())
全ての要素に対して関数を適用する。
コード例:

$("p").each(function(i){
this.innerHTML = this + " is the Element, " +
i + " is the Position";
});

BaseEvents

クリック等のイベントに対するイベントハンドラの登録関数。

bind(String,Function)
Stringで指定したイベントに、Functionで指定した関数をバインドする。

$("p").bind("click",function(){
alert("Hello!");
});

p要素中のテキストをクリックすると、イベントハンドラとしてバインドされたalert("Hellow!")が起動する。

unbind(String, Function)
バインドした関数を解除する。


DOM Modification
DOM操作を提供するクラス。
DOM要素へのinnerHTMLの編集・追加、要素の削除など。

ｈｔｍｌ（String）
Stringで指定された内容をDOM要素に設定する。

サンプル:

$("p").html("This is html!");

remove()
選択されている要素を削除する。

$("p").remove()

append(String)
append(DOMElement)
append(Array)
マッチした要素の最後に文字列や、DOM要素を追加する。

$("p").append("Append text")

prepend(...)
before(...)
after(...)
マッチした要素の最初や最後に文字列やDOM要素を追加する。


wrap(...)
マッチした要素を引数で指定したHTMLでラップする。
次の例は、pタグに一致する要素をpタグで囲む。

$("p").wrap("wrap_text");

Style Methods
スタイルに関するメソッド。CSSを適用する。

CSS(Key, Value)
要素に対してスタイルを適用する。element.Key = Value;と同じ効果。
サンプルコードは、全てのpタグの要素に対して"font: 14px Arial"を適用する。

$("p").css("font","14px Arial");

CSS（Hash）
要素に対してスタイルを適用する。上の関数と違い、スタイル名:値のハッシュを指定する。
サンプル:

$("p").css({
font:"14px Arial",
border:"1px solid #000"
});

addClass(String)
マッチしたクラスにCSSクラスを適用する。
サンプル:

$("p").addClass("even")

removeClass(String)
マッチした全てのクラスからCSSを削除する。

$("p").addClass("even")

BaseEffects
視覚効果のためのメソッド。

hide()
マッチした要素を非表示にする。

show()
マッチした要素を表示する。

toggle()
マッチした全ての要素をトグルする。


ここまでで、ｊQueryBaseの説明は終わりだが、視角効果の実装をもう少し補足する。

ｆｘ

ｊQuery中に実装予定のEffectsのためのライブラリである。

PrototypeとJQuery
この項が重要?
結局、ｊQueryはPrototypeとどう違うのか？Prototypeの$()が拡張され、CSS＋XPath + 独自の言語でDOMを参照するというのが、よさそうな印象を受ける。

そして、JQueryは、Prototypeに非常にインスパイアーされています。
$()メソッドなどは、同名だが動作が異なるため、Prototype.jsとJQueryを一緒に使用する場合は注意が必要である。

1.　PrototpyeとJQueryを共用する場合は、jquery.jsを後に読み込む必要がある。

PrototypeとJQueryの挙動の違い

$()関数の挙動の違い

$("pre")
Prototype: ドキュメント中からIDが"pre"の要素を探し、存在する場合はオブジェクトを返し、見つからない場合はnullを返す。
JQuery: preタグの要素を探す。
見つからない場合:　"pre"というIDを持つ要素を探し、見つかればその要素を返す。見つからなければ、空のマッチした要素がセットされたJQueryオブジェクトが返される。
見つかった場合:　マッチした全てのpre要素からなるJQueryオブジェクトが返される。

$(DOMELEMENT)
DOM要素を直接指定するシンタックスである。

Prototype: DOM要素を返す。
JQuery: DOM要素をラップしたJQueryオブジェクトを返す。そのため、返り値はPrototype, JQueryで利用可能である。

PrototypeとJQueryを共用する際のポイント
PrototypeのbehaviorとJQueryは、異なるので次の二つの対策のうち一つをすることがお勧めである。

1. あいまいなセレクタの禁止
2. ID名にDOM要素のタイプ(HTMLタグ名など)を使用しない
   

1番目について。
IDでユニークなDOM要素を参照するときには、
$("#pre")
とコーディングする。
$("pre")
では、IDでユニークな要素を参照するのかpreタグの要素を参照するのかあいまいである。

2番目について。
Prototype記法を使用したい場合には、このID名の命名ルール「ID名としてDOM要素のタイプで現れる可能性のタグを使用しない。」を適用する解決策が考えられる。
このルールは一つでもDOM要素のタイプとして存在するID名が使われた途端に破綻します。


JObjectは、DOM要素のラップ

先 程、「DOM要素をラップしたJQueryオブジェクトを返す。」と書いた。JQueryでは、PrototypeユーザとJQueryユーザの両方をサ ポートするように設計されている。従来のDOMオブジェクトのプロパティへのアクセスも残したまま、新規にJQueryのメソッドが追加されている。

$("wrap").style.display = 'none';

JQueryでもラップしたDOM要素を返すために上記の記法は有効である。
だが、JQueryではこの書き方は推奨されない。

$("#wrap").hide();

安全のために、JQueryにより認可された機能と用語のみを使用すべきである。
ｊQueryは、Prototypeの不足している部分を補ってくれている。
また、Prototypeと共用して使用することも考慮している。CSS, XPathセレクタの独自定義の式は便利そうである。

Tags: Javascript Ajax jQuery