jquery.jsを読み解く

第2回　jQueryライブラリ（172行目～469行目）

2008年2月13日

山下英孝

JavaScript, jQuery

オブジェクト, value, メソッド

今回は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メソッドを実行しています。

JavaScript, jQuery

山下英孝（やましたひでたか）

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

ブログ：Weboo! Returns.

jquery.jsを読み解く

バックナンバー一覧

このエントリのトラックバック URI

お名前
メールアドレス
タイトル
コメント

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする，資格試験合格サイト「めざせ！情報処理試験パスサポ」が開設されました。

サクセスストーリーに続く，快適サーバー運用管理のヒント！: データの増大，煩雑な管理，システムダウン，セキュリティなど，迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。
gihyo.jp インフラエンジニア情報局: ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え，その魅力について多角的に紹介。
テストエンジニアステーション: いま，ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

※検索はページ右上の検索ボックスをご利用ください。

もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）: 本連載では，実践サンプルとともに，jQueryを上手に活用してサイト制作の品質向上・効率化を実現するための実践テクニックを解説します。
サクセスストーリーに続く，快適サーバー運用管理のヒント！: サーバーを自社で運用管理するのはもう限界…。データの増大，煩雑な管理，システムダウン，セキュリティなど，迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。
続・先取り！ Google Chrome Extensions: 2010年1月のリリースが予定されているGoogle Chrome 4に搭載されるExtensionsについて，その詳細を先取りで解説します。最新情報から，ユーザースクリプトやテーマの作り方など関連情報もお届けします。
モダンPerlの世界へようこそ: この連載では，Perlの世代間ギャップに悩んでいる方に，いくらかの背景知識と，これだけは知っておいたほうがよいという最低限の慣用句をお届けします。
Hosting Department：ホスティングを活用するための基礎知識: 本連載では，ホスティングサービスを活用する上で知っておきたい基礎知識を解説します。
Blogopolisから学ぶ計算幾何: 計算幾何学は，図形に関するアルゴリズムを研究するコンピュータサイエンスの一分野です。本連載では，ビジュアルブログ検索エンジン「Blogopolis」で採用されている計算幾何のアプローチを例に取り上げながら，計算幾何の初歩を実践的に学習します。
Windows phoneアプリケーション開発入門: Windows Marcketplace for Mobileがサービス開始され，作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にWindows phoneアプリケーションの開発をしてみませんか？
いま，見ておきたいウェブサイト: この連載では，国内外の最新のウェブサイトを隔週更新で取り上げ，これら最新サイトの特徴や素晴らしい部分を，さまざまな角度から解説していきます。