jQuery入門その1 - kikki's tech note

本章では、jQueryの導入から基礎的な使い方を解説します。

jQueryの入手

まず、jQueryを公式サイトから入手してみましょう
以下の公式サイトにアクセスして、「Development」をダウンロードしましょう。
jQuery
f:id:kikkisnrdec:20120506120704j:plain
「Production」版は、自分のサイトを公開する際に使用してください。
今回は、学習を目的としているので「Development」をダウンロードします。

Hello jQuery

では、実際にjQueryを使ってみましょう。
以下のコードを入力して、google chromeで確認してみましょう
test.html

<html>
<head>
    <title>Hello jQuery</title>
    <style>
        ul li
        {
            color: red;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>hello</li>
    </ul>
    <script>
        var lis = jQuery('ul li');
        console.log(lis);
    </script>
</body>
</html>

chromeで開き、右クリック→「要素の検証」→「console」に、

[
<li>hello</li>
]

が表示されます。
また、chrome内には赤色で「hello」が表示されます。

test.htmlでは、jQueryオブジェクトにhtml要素のセレクタを渡して、返ってきたオブジェクトをログに出力しています。

jQueryの中身

以下、jQueryの解説です。
少し難しい話になるので、不要な方は飛ばしてください。

では、jQueryのコード（ver1.7.2）を追っていきます。
まずjQueryは、コード全体が以下のように記載されているため、名前空間を汚しません。

(function(window, undefined){
})();

無名関数で実行しているため、すべての定義がローカルスコープ内に完結しています。
そうすると、jQueryの実行関数の中でしかjQueyを利用できません。
そこで、以下のようにglobal空間つまりwindow関数にjQueryオブジェクトをひもづけています。

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

次にjQueryの中の処理を見ていきます。
jQueryでは、最初に以下の通り初期化を行っています。

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		return new jQuery.fn.init( selector, context, rootjQuery );
	}
//######
// 略1
//######
jQuery.fn = jQuery.prototype = {
	constructor: jQuery,
	init: function( selector, context, rootjQuery ) {
//######
// 略2
//######
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

細部の説明をする前に、jQueryのオブジェクトについて説明します。
jQueryを使う際には、ユーザはjQueryオブジェクトを意識せずに利用できます。
これは、jQueryのプロトタイプにオブジェクト生成の処理が含まれているためです。
具体的には、jQuery関数内で「jQuery.fn」オブジェクトを生成して「init」メソッドを呼び出しています。
この「jQuery.fn.init」のプロトタイプ「jQuery.fn.init.prototype」は、「jQuery.fn」オブジェクトに紐付き、jQueryのプロトタイプ「jQuery.prototype」とイコール関係にあります。
以上の経緯からユーザはjQueryオブジェクトを意識せず（生成せず）とも、jQueryを利用できます。

では上記コードの細部の解説をすると、
最初に「var jQuery = function(」でjQueryオブジェクトを定義して、返り値として「jQuery.fn」オブジェクトを生成し「init」メソッドの返り値（配列オブジェクト）を返しています。
略1以下では、「jQuery.fn」をjQueryのプロトタイプとして各プロパティ（例：length）や各メソッド（例：init）を定義しています。
最後に略2以下では、「jQuery.fn.init」プロトタイプに「jQuery」のプロトタイプを紐づけています。

あと細かい機能については、API資料を参照してください。