jquery.jsを読み解く

第2回 jQueryライブラリ(172行目~469行目)

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

今回はjQueryオブジェクトに定義されたメソッドの説明が中心となります。前回のようなjQueryの特徴的な部分と違ってアクロバティックな感じではないので,あまり面白くないかもしれません。しかし,jQueryの挙動を深く理解するためには必要な部分ですので淡々と進めて行きたいと思います。

また,説明に入る前に少々捕捉ですが,前回から今回までの間にバージョン1.2.3がリリースされました。Adobe AIRに対応したり,namespace周りの挙動が若干変わったりしていますが,根本的に大きくは変わってはいないようです。本連載では,引き続き1.2.2を前提に説明を進めていきます。

attr()

0172:  attr: function( name, value, type ) {
0173:    var options = name;
0174:
0175:    // Look for the case where we're accessing a style value
0176:    if ( name.constructor == String )
0177:      if ( value == undefined )
0178:        return this.length && jQuery[ type || "attr" ]( this[0], name ) || undefined;
0179:
0180:      else {
0181:        options = {};
0182:        options[ name ] = value;
0183:      }
0184:
0185:    // Check to see if we're setting style values
0186:    return this.each(function(i){
0187:      // Set all the styles
0188:      for ( name in options )
0189:        jQuery.attr(
0190:          type ?
0191:            this.style :
0192:            this,
0193:          name, jQuery.prop( this, options[ name ], type, i, name )
0194:        );
0195:    });
0196:  },
0197:

attrメソッドは,要素の属性を操作します。jQueryのメソッドは,パラメータによって動作が変わるものが多いのですが,このattrメソッドもその一つです。

第1引数nameのみが渡されてそれが文字列の場合(178行目),別のjQueryメソッドを実行します。どのメソッドを実行するかというと引数typeが指定されていればそのメソッドを実行し,指定されていなければ1020行目のjQuery.attrメソッドを実行します。name,valueのペアで第2引数も指定されていれば,属性値をセットするという動作になります。182行目がその処理でローカル変数optionsに値を格納します。また,attrメソッドにはハッシュを渡すことも可能で,その場合は173行目において格納しておいたoptionsが使用されます。

実際に属性をセットするのは186行目からで,各要素に対してjQuery.attrメソッドを実行します。jQuery.attrメソッドは1020行目で定義されており,詳しくは次回以降に説明します。193行目のjQuer.prop()は,数値が渡された時に単位pxを付加する処理です。

また,引数typeは内部的に使用するもので,CSSの属性値を直接扱うメソッド等で利用されます。

css()

0198:  css: function( key, value ) {
0199:    // ignore negative width and height values
0200:     if ( (key == 'width' || key == 'height') && parseFloat(value) < 0 )
0201:      value = undefined;
0202:    return this.attr( key, value, "curCSS" );
0203:  },
0204:

CSSのプロパティを設定するメソッドです。 内部的には先ほどのattrメソッドを呼び出しています。widthまたはheightで負の値を設定しようとした場合は,valueをundefinedとし無視します。

また,202行目にあるように,3番目の引数"curCSS"を指定することによって,css属性を扱う処理になります。

text()

0205:  text: function( text ) {
0206:     if ( typeof text != "object" && text != null )
0207:      return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
0208:
0209:    var ret = "";
0210:
0211:    jQuery.each( text || this, function(){
0212:      jQuery.each( this.childNodes, function(){
0213:         if ( this.nodeType != 8 )
0214:          ret += this.nodeType != 1 ?
0215:            this.nodeValue :
0216:            jQuery.fn.text( [ this ] );
0217:      });
0218:    });
0219:
0220:    return ret;
0221:  },
0222:

206行目がパラメータが渡された時の処理で,いったん中身を空にしてからテキストノードを設定して返します。

211行目からはパラメータがない場合の処理で,すべての要素からテキストノードを結合して返します。nodeTypeが1(つまりElement)ならば,再帰的にtextメソッドを呼び出してテキストノードを取得します。また,コメント(nodeType=8)は取り除かれます。

wrapAll()

0223:  wrapAll: function( html ) {
0224:     if ( this[0] )
0225:      // The elements to wrap the target around
0226:      jQuery( html, this[0].ownerDocument )
0227:        .clone()
0228:        .insertBefore( this[0] )
0229:        .map(function(){
0230:          var elem = this;
0231:
0232:          while ( elem.firstChild )
0233:            elem = elem.firstChild;
0234:
0235:          return elem;
0236:        })
0237:        .append(this);
0238:
0239    return this;
0240:  },
0241:

wrapAllメソッドは,1.2から追加された機能で,選択された要素を一纏めに囲って返します。

このメソッドを実行するにはすくなくとも1つ以上の要素が必要なので,224行目にてチェックします。次に囲う方のDOM要素を生成し,これを選択されている要素の直前に挿入し,その一番子要素を探してそこに追加(移動)します。

ここは少し分かりにくいかもしれませんが,何がthisで,jQueryオブジェクトは何を表しているのかが分かれば理解できるかと思います。

wrapInner()

0242:  wrapInner: function( html ) {
0243:    return this.each(function(){
0244:      jQuery( this ).contents().wrapAll( html );
0245:    });
0246:  },
0247:

wrapInnerメソッドは,選択された各要素が持つ各子要素をパラメータで指定された要素で囲みます。243行目のeachによって,各々の子要素に対して先ほど説明したwrapAllメソッドを実行します。

wrap()

0248:  wrap: function( html ) {
0249:    return this.each(function(){
0250:      jQuery( this ).wrapAll( html );
0251:    });
0252:  },
0253:

wrapメソッドは,選択された各要素を引数の要素で囲って返します。249行目のeachメソッドによって,各要素に対して先ほど紹介したwrapAllメソッドを実行しています。

著者プロフィール

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

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

ブログWeboo! Returns.

コメント

コメントの記入