03 | 2017/04 |  05

  1. 無料サーバー

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

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

スポンサーサイト

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

 

jQuery の挙動を解読する(35):Traversing メソッドについて(1) ──jQuery解読(52)

何回かに分けて Traversing に分類されているインスタンスメソッドの解読を行います。

全体の項目とこのエントリイの項目
  • eq()、slice()、is()、filter()、closest()、not()、add()
  • children()、contents()、find()、next()、nextAll()
  • offsetParent()、parent()、parents()、prev()、prevAll()、siblings()、andSelf()、end()

このエントリイでは、本家サイトにおいて Traversing に分類されているインスタンスメソッドの内、次のメソッドを解読対象とします。

eq()、slice()、is()、filter()、closest()、not()、add()

eq()、slice() メソッド解読

eq() メソッドはインスタンスに登録されている要素ノードから、i+1 番目の 1 つのノードを取り出します。

そのために使用される slice() メソッドはインスタンス内に登録されている要素ノードから、連続した一部を取り出すためのメソッドです。このメソッドを適用すると、元のインスタンスの一部のプロパティを保持する新たなインスタンスが得られます。このとき、pushStack() メソッドにより、新たなインスタンスの selector プロパティには抽出経過を記録する文字列が代入されます。

■ eq() メソッド……インスタンスの配列 like なプロパティから i 番目の要素を取り出す
495: eq: function( i ) {
496:  return this.slice( i, +i + 1 );
497: }, 

■ slice() メソッド …… インスタンスの配列 like なプロパティからその連続した部分を取り出す
499: slice: function() {
500:  return this.pushStack( Array.prototype.slice.apply( this, arguments ),
501:   "slice", Array.prototype.slice.call(arguments).join(",") );
502: },
このエントリイ上で eq()、slice() を試してみる

左のボタンをクリックすると、最初の pre タグの背景色が teal になり、もう一度このボタンをクリックすると元に戻ります。

左のボタンをクリックすると 6 番目から 9 番目迄の 4 つの p タグ背景色が teal に変わり、もう一度クリックすると元に戻ります。

尚、ボタンをクリックした際には、mousedown 時にそのボタンの背景色が変わり、mouseup すると元に戻るように設定しました。

is()、filter() メソッド解読

is() メソッドは或るノードがインスタンス内に登録されているかどうかを調べます。filter() メソッドはその名の通りインスタンス内に登録されているノードを対象として、一定の条件でフィルタリングを行います。

■ jQuery(a).is(s) …… a にマッチする要素ノード内に s にマッチする要素があるかどうか調査する。
401: is: function( selector ) {
    // 引数 selector が存在し、かつ jQuery インスタンスの中に selector に
    // マッチするノードが 1 つ以上あれば true を、なければ false を返す。
402:  return !!selector && jQuery.multiFilter( selector, this ).length > 0;
403: },

■ jQuery(s,c).filter(selector) メソッド
349: filter: function( selector ) {
    // selector が関数の場合とそうでない場合とに分けて pushStack() メソッ
    // ドの結果を受け取る。
350:  return this.pushStack(
351:   jQuery.isFunction( selector ) && // selector が関数ならば
     // インスタンスの各プロパティに登録されている要素ノードに対して
352:   jQuery.grep(this, function(elem, i){
353:    return selector.call( elem, i ); // 順番に関数を適用し結果を返す。
354:   }) || // あるいは
355:   // 関数でない場合には、multiFilter メソッドを使用して、インスタンス
     // に登録されている要素ノードから selector にマッチする要素を取り出す。
356:   jQuery.multiFilter( selector, jQuery.grep(this, function(elem){
357:    return elem.nodeType === 1;
358:   }) ), "filter", selector );
359: },
このエントリイ上で is()、filter() を試してみる

左のボタンをクリックすると、この p タグの contents に「左のボタン」という文字列があるかどうか調べ、結果を animate 表示 します。当然それは存在しているのでtrueであることを示す文字列がアニメーションポップアップで表示されます。

尚、このボタンは単純なクリックボタンで toggle にはなっていません。表示された popup を消去するにはその popup 内にある×をクリックします。またボタンが複数回クリックされた場合には、popup を即ぐに消し去ってから新たなポップアニメーションが起動します。

また、このボタンだけは IE8 では作動しません。おそらくは IE8 の Animation に関するバグのためだと思われますが、正確な原因は不明です。

左のボタンをクリックすると「 左のボタン 」という文字列を含む全ての p タグ背景色が teal に変わり、もう一度クリックすると元に戻ります。

尚、ボタンをクリックした際には、mousedown 時にそのボタンの背景色が変わり、mouseup すると元に戻るように設定しました。

closest() メソッド解読

これは 1.3.x から追加された新しいメソッドです。jQuery(s,c)にマッチする要素( A )を対象として、closest(selector) を適用すると、A 及びその親ノードの中から、selector フィルタにマッチするノードをを取得します。

要点はインスタンスが参照しているノードからだけではなく、その親ノードからも条件に合致するノードを探す点にあります。イベントオブジェクトがバブリングして親要素にも達するように、このメソッドは親要素をも対象としている点が注目されます。「 closest(近親者)」と名付けられた所以です。

■ jQuery(s,c).closest(selector) メソッド
361: closest: function( selector ) {
    // jQuery.expr.match.POS は /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/
    // である( #1663 から )。そしてこの正規表現は次のような文字列となる。
    //「 コロンの後に nth から odd までのいずれかの文字列があり、その後に(数字)が 
    // 1 回以下続き、その後に - ではない 1 文字があるか行末まで何もない 」
    // ── selector がこのような文字列の場合には、 jQuery(selector) の
    // 結果を変数 pos に代入し、そうでない場合には null 値を代入する。
362:  var pos = jQuery.expr.match.POS.test( selector ) ? jQuery(selector) : null,
363:   closer = 0;
364:
365:  return this.map(function(){ // インスタンスに map メソッド処理を行って返す。
     // この結果、インスタンスの各要素及びその親ノードの中から、selector 条件に
     // 合致するノードが抽出され、それらをプロパティとする jQuery インスタンス
     // が返される。
366:   var cur = this; // この this は map メソッド内にあるので、
             // インスタンスに登録されている個々の要素ノードを指す。
367:   while ( cur && cur.ownerDocument ) { // cur 及びその document ノードが
      // ある限り、変数 pos があれば cur が pos の何番目かにあるかどうか
      // チェックし、pos がなければ cur にマッチする要素の中に selector
      //  にマッチするものがあるかどうかをチェックし、いずれかが true であれば、
368:    if ( pos ? pos.index(cur) > -1 : jQuery(cur).is(selector) ) {
       // cur 要素に closest と言う名前と closer 値を関連づける。
369:     jQuery.data(cur, "closest", closer);
370:     return cur; // curを返す。
371:    }
372:    cur = cur.parentNode; // cur をその親ノードとし、closer 値を増加する。
373:    closer++;
374:   }
375:  });
376: },

左のボタンをクリックすると「 メソッド 」という文字列を含む全ての p タグ背景色が teal に変わり、もう一度クリックすると元に戻ります。

尚、ボタンをクリックした際には、mousedown 時にそのボタンの背景色が変わり、mouseup すると元に戻るように設定しました。

not()、add() メソッド解読

not メソッドは名前からその機能が推測しにくいメソッドです。is() メソッドは「あるかないか」の真偽値を返しますが、notメソッドの返値は jQuery オブジェクトです。

このメソッドは jQuery インスタンスから、selector で指定された条件を満たさないノードを抽出します。

他方、add() メソッドはその名の通り、jQuery インスタンスに selector 条件に合致するノードを「追加」します。

■ jQuery(s,c).not(selector) メソッド
378: not: function( selector ) {
379:  if ( typeof selector === "string" ) // selector が文字列の時
380:   // test special case where just one selector is passed in
     // isSimple は #33 から /^.[^:#\[\.,]*$/。つまり最初に何か 1 文字があり、
     // 次に : でも、# でも、 [ でも、.でも、 ,でもない文字がゼロ個以上続く
     // 文字列を意味する。つまり、何らかのフィルターでもなく、クラス名でもなく、
     // id でもなく、複数のセレクタでもない単純な文字列を意味する。
381:   if ( isSimple.test( selector ) ) // selector が上のような条件の文字列ならば
      // インスタンスから selector 条件を満足するノードを削除し、その結果を
      // jQuery インスタンスを返す。
382:    return this.pushStack( jQuery.multiFilter( selector, this, true ), "not", selector );
383:   else // 単純ではない文字列だったら、インスタンスから selector 条件に
      // 合致するノードを抽出して selector に代入する。
384:    selector = jQuery.multiFilter( selector, this );
385:  // selector に length 値があって、最後の selector 値が定義されていて、
    // selector がノードではなければ true を返す。
386:  var isArrayLike = selector.length && selector[selector.length - 1] !== undefined && !selector.nodeType;
387:  return this.filter(function() { // インスタンスに登録されている各ノード
     // に対してfilter メソッドにより引数の関数を適用する。filter メソッド
     // 内では grep メソッドが条件に合致するノードだけを抽出する。
     // これにより各ノードが selector に合致しない場合には true が返され、
     // 合致した場合には false が返される。この結果 selctor 条件に合致しない
     // ノードだけが残され、これをプロパティとする jQuery インスタンスが返される。
388:   return isArrayLike ? jQuery.inArray( this, selector ) < 0 : this != selector;
389:  });
390: },

■ jQuery(s,c).add(selector) メソッド
392: add: function( selector ) {
393:  return this.pushStack( jQuery.unique( jQuery.merge(
394:   this.get(), // merge メソッドの第 1 引数は配列でなければならない。
395:   typeof selector === "string" ?
      // merge メソッドは第 2 引数が配列 like なプロパティ値を持つオブ
      // ジェクトであっても、配列そのものでも同様に扱える。
396:    jQuery( selector ) :
397:    jQuery.makeArray( selector )
398:  )));
399: },

 

■ コメントの投稿 ■

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

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/706-5969b7ad

●参照元一覧●

<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が開きます。

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