jquery.jsを読み解く

第1回 jQueryライブラリ(1~171行目)

この記事を読むのに必要な時間:およそ 6 分

initメソッド定義

0036: jQuery.fn = jQuery.prototype = {
0037:   init: function( selector, context ) {
0038:     // Make sure that a selection was provided
0039:     selector = selector || document;
0040: 

36行目からが jQueryオブジェクトの初期化処理になります。jQuery.fnとjQuery.prototypeに対してメソッドを定義していきます。

37行目で定義されているinit関数がjQueryオブジェクトの事実上のコンストラクタになります。39行目の文により,$()のように何も引数を渡されずに呼び出された場合は,$(document)と同義になります。

0041:     // Handle $(DOMElement)
0042:     if ( selector.nodeType ) {
0043:       this[0] = selector;
0044:       this.length = 1;
0045:       return this;
0046: 

引数にDOMエレメントが渡された場合の処理です。渡されたDOMエレメントを格納し,lenghtに1を設定してそのままjQueryオブジェクトを返します。

0047:     // Handle HTML strings
0048:     } else if ( typeof selector == "string" ) {
0049:       // Are we dealing with HTML string or an ID?
0050:       var match = quickExpr.exec( selector );
0051: 
0052:       // Verify a match, and that no context was specified for #id
0053:       if ( match && (match[1] || !context) ) {
0054: 
0055:         // HANDLE: $(html) -> $(array)
0056:         if ( match[1] )
0057:           selector = jQuery.clean( [ match[1] ], context );
0058: 

引数に文字列が渡された場合で,それがHTML文字列かつコンテキストが指定されていない場合は,cleanメソッドを実行してselectorに設定し直しています。cleanメソッドについては次回以降で説明しますが,不正なHTML表記をきれいにしてDOM要素を構築していると思ってください。

0059:         // HANDLE: $("#id")
0060:         else {
0061:           var elem = document.getElementById( match[3] );
0062: 
0063:           // Make sure an element was located
0064:           if ( elem )
0065:             // Handle the case where IE and Opera return items
0066:             // by name instead of ID
0067:             if ( elem.id != match[3] )
0068:               return jQuery().find( selector );
0069: 
0070:             // Otherwise, we inject the element directly into the jQuery object
0071:             else {
0072:               this[0] = elem;
0073:               this.length = 1;
0074:               return this;
0075:             }
0076: 
0077:           else
0078:             selector = [];
0079:         }
0080: 

単純なID指定の場合には,getElementByIdでそのIDをもつ要素を検索し,みつかればその要素を配列に格納し,lengthに1を設定してそのまま返します。ただし,IEとOperaの場合は戻り値の形式が異なるために自身のfindメソッドを呼び出します。指定されたIDがみつからなかった場合は,selectorを空にします。

0081:       // HANDLE: $(expr, [context])
0082:       // (which is just equivalent to: $(content).find(expr)
0083:       } else
0084:         return new jQuery( context ).find( selector );
0085: 

contextが指定されている場合の処理です。一旦contextについてのjQueryオブジェクトを生成してから,findメソッドを実行します。82行目のコメントにもある通り,contextを指定した処理は,$(content).find(expr) と同義であることが分かります。

0086:     // HANDLE: $(function)
0087:     // Shortcut for document ready
0088:     } else if ( jQuery.isFunction( selector ) )
0089:       return new jQuery( document )[ jQuery.fn.ready ? "ready" : "load" ]( selector );
0090: 

引数として関数が渡された場合,つまり $(function(){ ... }) のように呼び出された場合の処理です。これは,$(document).ready(function(){ ... }); と一緒でDOMツリーの構築を待ってから指定された関数を実行します。

0091:     return this.setArray(
0092:       // HANDLE: $(array)
0093:       selector.constructor == Array && selector ||
0094: 
0095:       // HANDLE: $(arraylike)
0096:       // Watch for when an array-like object, contains DOM nodes, is passed in as the selector
0097:       (selector.jquery || selector.length && selector != window && !selector.nodeType && selector[0] != undefined && selector[0].nodeType) && jQuery.makeArray( selector ) ||
0098: 
0099:       // HANDLE: $(*)
0100:       [ selector ] );
0101:   },
0102: 

上記のいずれでもない場合の処理です。もし,配列やjQueryオブジェクト,DOM要素の配列が渡されていたら,その配列で初期化して返します

著者プロフィール

山下英孝(やましたひでたか)

大学を卒業後,大手SIerに就職し,電機メーカーの研究所勤務を経て,ウノウに入社。1年半に渡ってWebサイトの開発,ディレクション,運用を経験した後に独立。2008年2月よりフリーエンジニアとして活動中。好きな言語はJavaScriptとPythonで,Linuxサーバ運用管理も得意。

ブログWeboo! Returns.