04 | 2017/05 |  06

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

jQuery() の挙動を解読する(7) jQuery().find()メソッド解読(start)──jQuery解読(11)

  • 初稿:2007/11/14
  • 改訂:2008/02/03……抜本改訂

jQuery().find() が登場する箇所

jQuery().find() メソッドはjQuery()関数の初期化メソッドである init() メソッド内に2箇所登場します。

29: // A simple way to check for HTML strings or ID strings
30: // (both of which we optimize for)
31: var quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/;
32: 
33: // Is it a simple selector
34: var isSimple = /^.[^:#\[\.]*$/;
35:
36: jQuery.fn = jQuery.prototype = {
37:  init: function( selector, context ) {
38:  // Make sure that a selection was provided
39:  selector = selector || document;
40:
41:  // Handle $(DOMElement)
42:  if ( selector.nodeType ) {
43:   this[0] = selector;
44:   this.length = 1;
45:   return this;
46:
47:  // Handle HTML strings
48:  } else if ( typeof selector == "string" ) {
49:   // Are we dealing with HTML string or an ID?
50:   var match = quickExpr.exec( selector );
51:
52:   // Verify a match, and that no context was specified for #id
53:   if ( match && (match[1] || !context) ) {
54:
55:    // HANDLE: $(html) -> $(array)
56:    if ( match[1] )
57:     selector = jQuery.clean( [ match[1] ], context );
58:
59:    // HANDLE: $("#id")
60:    else {
61:     var elem = document.getElementById( match[3] );
62:
63:     // Make sure an element was located
64:     if ( elem )
65:      // Handle the case where IE and Opera return items
66:      // by name instead of ID
67:      if ( elem.id != match[3] )
68:       return  jQuery().find( selector );
69:
70:      // Otherwise, we inject the element directly into the jQuery object
71:      else {
72:       this[0] = elem;
73:       this.length = 1;
74:       return this;
75:      }
76:
77:     else
78:      selector = [];
79:    }
80:
81:   // HANDLE: $(expr, [context])
82:   // (which is just equivalent to: $(content).find(expr)
83:   } else
84:    return  new jQuery( context ).find( selector ) ;
85:
86:  // HANDLE: $(function)
87:  // Shortcut for document ready
88:  } else if ( jQuery.isFunction( selector ) )
89:   return new jQuery( document )[ jQuery.fn.ready ? "ready" : "load" ]( selector );
90:
91:  return this.setArray(
92:   // HANDLE: $(array)
93:   selector.constructor == Array && selector ||
94:
95:   // HANDLE: $(arraylike)
96:   // Watch for when an array-like object, contains DOM nodes, is passed in as the selector
97:   (selector.jquery || selector.length && selector != window && !selector.nodeType && selector[0] != undefined && selector[0].nodeType) && jQuery.makeArray( selector ) ||
98:
99:  // HANDLE: $(*)
100:  [ selector ] );
101: },

第一は 53: if ( match && (match[1] || !context) ) の時、つまり、

  1. (1)selector が文字列型で(48行)、
  2. (2)31行で定義された quiclExpr にマッチし、
  3. かつ (3)m[1] が存在し、
  4. 更に(4)context が付与されていない場合において、
  5. (5)selector 文字列が "#id" の形式の場合に、
jQuery().find( selector ) として登場します。(68行)

第二は文字列 selector が "・・<・・・>・・" でもなく、また "#id" でもない場合の new jQuery(context).find(selector) です(84行)。

どちらにも共通していることは、jQuery() 関数を再帰呼び出しすることであり、異なる点は new 演算子の有無です。どちらの場合においても jQuery 関数を再帰呼び出しするのですから、その定義から新しいインスタンスが作成されることに相違はありません。では何故 new 演算子の有無の別があるのか、興味深いところですが解明できていません。

new 演算子が有る jQuery 再帰呼び出しの場合には、二重に new 演算子が作用してしまうのではないかと考えますが、本当にそうなるのか、またその作用の意味は何か、解明できていません。

init() メソッドから呼び出される jQuery(context).find(selector) はどう動くのか

init() から呼び出される jQuery(context).find(selector) インスタンスメソッドは次のようになっています。

284: find: function( selector ) {
285:  var elems = jQuery.map(this, function(elem){
286:   return jQuery.find( selector, elem );
287:  });
288:
289:  return this.pushStack( /[^+>] [^+>]/.test( selector ) || selector.indexOf("..") > -1 ?
290:   jQuery.unique( elems ) :
291:   elems );
292: },

再帰呼び出しされる前者の jQuery().find("#id") では、DOM ツリー全体を対象として find("#id") メソッドが実行され、後者では新たなインスタンスを生成した上で context( context が与えられていなければ document 全体)を対象として find( selector ) インスタンスメソッドが実行されます。以下にその挙動の概要をまとめますが、find( selector ) インスタンスメソッドから呼び出される jQuery.find( selector, context )クラスメソッドの挙動の仕組みは別途解明することとし、それに先立ちこのクラスメソッドを利用する jQuery(context).find(selector) インスタンスメソッドの挙動を概観しておきます。

1. jQuery(context).find(selector) インスタンスメソッドの挙動概観
  1. jQuery.map(this,fn(elem){}) メソッド起動
  2. context 内の各々の要素 elem を対象として jQuery.find( selector, elem ) 実行
  3. そのリターン値を elems に代入
  4. 次に selector 文字列に対して、(1) "a b"( + でもなく>でもない a 及び b (共に1文字)の間にスペースがある文字列)があるかどうか、あるいは、(2) ".." を含む文字列かどうかをチェック
  5. この検証にヒットすれば jQuery.unique( elems ) を起動してその結果を返す。
  6. ヒットしなければ elems を返す。

こうして context 内の selector に適合する要素が jQuery.find( selector, context ) クラスメソッドによって抽出され、これが jQuery( context ).find( selector ) に return されます。

2. $("#id") → $().find("#id") 呼び出しの場合の挙動
  1. new 演算子がない $().find("#id") が呼び出されると、$() 呼び出しによって直ぐに 19 行で新たなインスタンスが生成され init() が起動されます。すると $ に引数はありませんから、init() 関数の第一引数には document が代入され、インスタンスは 45 行から [document] となりこれが 19 行から $() に return されます。
  2. 次に、$().find("#id") つまり [document].find("#id") メソッドから呼び出される 285 行の map() メソッドにおいて、this は [document] を指し示し、第二引数の elem は map() メソッドの定義から document 内の個々の要素エレメントを意味します。こうして document 内の各要素に対して 286 行のクラスメソッド $.find( selector, elem ) が適用されます。ここで第一引数には当然 "#id" が渡されます。つまり、
    var elems = jQuery.map([document], function(elem){ return jQuery.find("#id", elem) })
    です。
  3. elems 取得後には、 "#id" 文字列に対して、(1) "a b"( a も b も + でもなく>でもない1文字で間にスペースがある文字列 )があるかどうか、あるいは(2) ".." を含む文字列かどうかがチェックされます。
  4. この検証にヒットすれば jQuery.unique( elems ) を起動してその結果が返されますが、 "#id" 文字列の場合その内容からこの検証にはヒットしません。
  5. こうして "#id" に適合する要素 elems が jQuery.find( "#id", [document][i] ) クラスメソッドによって抽出され、これが $().find("#id") に return され、更に $("id") に返されて目的が達成されます。
3. new jQuery(context).find(selector) 呼び出しの場合の挙動

これについては既に 1. で述べたことと全く同一になるので省略します。

次のエントリイでは...

jQuery.find() クラスメソッドを解読します。

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/580-2d4169cf

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200711141414
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。