jQuery/$ の宣言
jQuery全体は無名関数内に記述されており、グローバルを汚染しません。
唯一グローバルに宣言されているものは jQuery と $ であり、jQueryのメソッドを呼び出す際はこれを利用します。
|
1 2 3 4 5 6 7 |
/*===== jquery-1.11.1.js-L10296 =====*/ // Expose jQuery and $ identifiers, even in // AMD (#7102#comment:10, https://github.com/jquery/jquery/pull/557) // and CommonJS for browser emulators (#13566) if ( typeof noGlobal === strundefined ) { window.jQuery = window.$ = jQuery; } |
ここでwindow.jQueryとwindow.$に無名関数内のjQueryを代入しています。
またjQuery,$は実際にはjQuery.fn.init()です。
|
1 2 3 4 5 6 7 8 9 10 |
/*===== jquery-1.11.1.js-L66 =====*/ var version = "1.11.1", // Define a local copy of jQuery jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' // Need init if jQuery is called (just allow error to be thrown if not included) return new jQuery.fn.init( selector, context ); }, |
jQueryオブジェクト（メソッドチェーン）
$('#id')と書く事でjQuery.fn.init()のインスタンスとして jQueryオブジェクト が生成されます。
jQuery内のメソッドの多くはjQueryオブジェクトを受け取って、jQueryオブジェクトを返すように設計されています。
そのため、$('#id').html('chain!').css('color','blue'); のようにメソッドを繋げて書く事ができます。（メソッドチェーン）
メソッドチェーンは、メソッドがjQueryオブジェクトを受け取ってjQueryオブジェクトを返す事で実現するため、返り値がstring型などになると動作しなくなります。
|
1 2 |
$('#id').html('chain!').css('color','blue'); // => OK $('#id').html().css('color','blue'); // => ERROR |
これは.html()メソッドを引数無しで呼び出した場合、返り値が string になるからです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
/*===== jquery-1.11.1.js-L5818 =====*/ html: function( value ) { return access( this, function( value ) { var elem = this[ 0 ] || {}, i = 0, l = this.length; if ( value === undefined ) { return elem.nodeType === 1 ? elem.innerHTML.replace( rinlinejQuery, "" ) : undefined; } // See if we can take a shortcut and just use innerHTML if ( typeof value === "string" && !rnoInnerhtml.test( value ) && ( support.htmlSerialize || !rnoshimcache.test( value ) ) && ( support.leadingWhitespace || !rleadingWhitespace.test( value ) ) && !wrapMap[ (rtagName.exec( value ) || [ "", "" ])[ 1 ].toLowerCase() ] ) { value = value.replace( rxhtmlTag, "<$1></$2>" ); try { for (; i < l; i++ ) { // Remove element nodes and prevent memory leaks elem = this[i] || {}; if ( elem.nodeType === 1 ) { jQuery.cleanData( getAll( elem, false ) ); elem.innerHTML = value; } } elem = 0; // If using innerHTML throws an exception, use the fallback method } catch(e) {} } if ( elem ) { this.empty().append( value ); } }, null, value, arguments.length ); }, |
下の箇所で引数を評価しており、undefinedの場合の返り値はelem.innerHTMLになります。
|
1 2 3 4 5 6 |
/*===== jquery-1.11.1.js-L5824 =====*/ if ( value === undefined ) { return elem.nodeType === 1 ? elem.innerHTML.replace( rinlinejQuery, "" ) : undefined; } |
typeof で見てみると分かりやすいですね。
|
1 2 |
console.log(typeof $('#id').html('chain!')); // => object console.log(typeof $('#id').html()); // => string |
次回からはjQueryの関数について、細かく見ていきたいと思います。
