09 | 2017/10 |  11

  1. 無料サーバー

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

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

スポンサーサイト

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

 

jQuery の挙動を解読する(34):要素属性に係るメソッドの解読 ── jQuery解読(51)

このエントリイでは、本家サイトにおいて Attributes に分類されているインスタンスメソッドを対象にしてそのコード解読を行います。なお、Attri() メソッドはこちらのエントリイ( jQuery() の挙動を解読する(30) jQuery を使ってタグ属性や css 値を設定/取得する upon ver1.3.2──jQuery解読(45) )において、また text() と html() メソッドは、こちらのエントリイ( jQuery の挙動を解読する(33):DOM Manipulate メソッド解読──jQuery解読(50) )で、それぞれ解読済みなので、ここで対象とするメソッドは次の通りです。

addClass()、hasClass()、removeClass()、toggleClass()、val()

addClass()、hasClass()、removeClass()、toggleClass() が行う処理

これらのインスタンスメソッドは、順に、class 属性の「追加」、「有無調査」、「削除」及び「追加/削除の交互作用」を行うためのもので、hasClass() メソッド以外は 1 つのインスタンスメソッドの中に盛り込まれているので、解読するコードブロック数は 2 つになります。

まずは hasClass() から。

これは class 属性が存在するかしないかを調査するためのメソッドで返値は真偽値です。

■ hasClass( selector ) メソッド
405: hasClass: function( selector ) {
    // 引数 selector が存在し、かつ「 .selector 」が存在すれば true を、
    // 存在しなければ false を返す。
406:  return !!selector && this.is( "." + selector );
407: },
■ 関連メソッド(1) 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: },
■ 関連メソッド(2) jQuery.multiFilter()……elems 内から expr 該当/非該当要素を抽出する。
2383: jQuery.multiFilter = function( expr, elems, not ) {
2384:  if ( not ) { // not が true ならば
2385:  expr = ":not(" + expr + ")"; // expr 文字列を加工する。
2386: }
2387:  // 対象ノード elems から expr にマッチする要素を抽出する。
    // 返値は Sizzle.matches メソッドの定義から配列となる。
2388:  return Sizzle.matches(expr, elems);
2389: };

▲ToTop

次に、addClass()、removeClass()、toggleClass() について。

これらのメソッドは下に見るように jQuery.each( { name:function(){} },fn ) 形式のコードで定義されており、この構造のメソッドについては,別のエントリイ( anything from here jQuery の挙動を解読する(31):jQuery.each({ nameN:fnN(){}},function(){}) によるメソッド登録──jQuery解読(48) )でその解読を済ませています。

ここでは 3 つのクラス属性に関するメソッドが共通して利用している className クラスメソッドについて解読します。

■ addClass()、removeClass()、toggleClass()
1218:jQuery.each({
1219: removeAttr: function( name ) {
1220:  jQuery.attr( this, name, "" );
1221:  if (this.nodeType == 1)
1222:   this.removeAttribute( name );
1223: },
1224:
1225: addClass: function( classNames ) {
1226:  jQuery.className.add( this, classNames );
1227: },
1228:
1229: removeClass: function( classNames ) {
1230:  jQuery.className.remove( this, classNames );
1231: },
1232:
1233: toggleClass: function( classNames, state ) {
1234:  if( typeof state !== "boolean" )
1235:   state = !jQuery.className.has( this, classNames );
1236:  jQuery.className[ state ? "add" : "remove" ]( this, classNames );
1237: },
1238:
1239: remove: function( selector ) {
1240:  if ( !selector || jQuery.filter( selector, [ this ] ).length ) {
1241:   // Prevent memory leaks
1242:   jQuery( "*", this ).add([this]).each(function(){
1243:    jQuery.event.remove(this);
1244:    jQuery.removeData(this);
1245:   });
1246:   if (this.parentNode)
1247:    this.parentNode.removeChild( this );
1248:  }
1249: },
1250:
1251: empty: function() {
1252:  // Remove element nodes and prevent memory leaks
1253:  jQuery(this).children().remove();
1254:
1255:  // Remove any remaining nodes
1256:  while ( this.firstChild )
1257:   this.removeChild( this.firstChild );
1258: }
1259:}, function(name, fn){
1260: jQuery.fn[ name ] = function(){
1261:  return this.each( fn, arguments );
1262: };
1263:});
■ jQuery.className()
709: className: {
710:  // internal only, use addClass("class")
    // このメソッドは jquery.js 内部でのみ使用するメソッドであり、
    // addClass("class") と記述して使用する。
711:  add: function( elem, classNames ) {
     // classNames をスペースで区切って Name 毎に配列の要素にして、
     // Name 毎に巡回処理する。
712:   jQuery.each((classNames || "").split(/\s+/), function(i, className){
      // elem が要素ノードでそれが className と一致するクラス名を持っていなければ
713:    if ( elem.nodeType == 1 && !jQuery.className.has( elem.className, className ) )
       // elem のクラス名があれば半角スペースを付け、なければ
       // 何も付けずに、className を elem のクラス名として追加登録する。
714:     elem.className += (elem.className ? " " : "") + className;
715:   });
716:  },
717:
718:  // internal only, use removeClass("class")
719:  remove: function( elem, classNames ) {
720:   if (elem.nodeType == 1) // elem が要素ノードならば
721:    elem.className = classNames !== undefined ? // elem にクラス名があれば
       // 要素 elem のクラス名を要素とする配列を作り、配列要素に対して
       // grep 処理を行う。
722:     jQuery.grep(elem.className.split(/\s+/), function(className){
        // classNames 内に className があるかないか調査し、
        // なければ true を、あれば false を返して、grep メソッド処理を行う。
        // ここに grep メソッドの第 3 引数が指定されていないので、渡された
        // 真偽値が true の場合はその要素を残し、false の場合には削除する。
        // この結果、grep から返される配列の要素から classNames 文字列に含
        // まれるクラス名は消えることになる。
723:      return !jQuery.className.has( classNames, className );
724:     }).join(" ") : // 返された配列の要素を半角スペースで結合して文字列にする。
       // こうして elem.className には classNames 内に含まれているクラス名が
       // 削除されたクラス名が代入される。
725:     ""; // クラス名がなければ空文字を返す。
726:  },
727:
728:  // internal only, use hasClass("class")
    // elem ノードが className というクラス名を持つかどうかを調べるメソッド
729:  has: function( elem, className ) {
     // 要素ノード elem が存在すれば、elem のクラス名か elem を要素とする
     // 配列の要素に、className があるかどうかを調査し、あれば true を、
     // 要素でなければ false を返す。
730:   return elem && jQuery.inArray( className, (elem.className || elem).toString().split(/\s+/) ) > -1;
731:  }
732: },

jQuery(s,c).val(v) が行う処理

val(v) インスタンスメソッドは、v がない場合には jQuery(s,c) で抽出されるエレメント内の value 属性値を取得し、v がある場合には当該エレメントの value 属性値を設定します。様々な form 部品( input、button、select 等 )の value 属性を操作するためのメソッドなので、form 部品を余り使用しない私にとっては縁遠いものです。

なお、このメソッドが対象とする要素エレメントは、value 属性値を取得する場合には jQuery インスタンスに登録された最初のノードだけですが、設定する場合にはそのような限定はありません。

■ val(value) メソッド
409: val: function( value ) {
    // ケースA: value が未定義の場合、つまり 対象とするform 部品要素から
    // value を取得する場合の処理
410:  if ( value === undefined ) {
411:   var elem = this[0]; //インスタンスの最初のノードを elem に代入する。
412: 
413:   if ( elem ) { // elem があれば
414:    if( jQuery.nodeName( elem, 'option' ) ) elem が option タグならば
       // 属性値 value が明記されていればその値を返し、なければ text 値
       // を返す。なお、空オブジェクトとの or 条件としたのは value が未
       // 定義の時に undefined を返さないための対策か?
415:     return (elem.attributes.value || {}).specified ? elem.value : elem.text;
416:    
417:    // We need to handle select boxes special
418:    if ( jQuery.nodeName( elem, "select" ) ) { // elem が select タグならば
419:     var index = elem.selectedIndex,
420:      values = [],
421:      options = elem.options,
422:      one = elem.type == "select-one"; // type 値が "select-one"かどうか
423: 
424:     // Nothing was selected
425:     if ( index < 0 )
426:      return null; // 何も選択されていないならば null 値を返す。
427: 
428:     // Loop through all the selected options
       // one が true ならば i を indexとし、 max を index +1 とする、
       // false ならば i=0、max は options の要素数とする。
       // i < max を loop 条件とし、増分値は i++ とする。
429:     for ( var i = one ? index : 0, max = one ? index + 1 : options.length; i < max; i++ ) {
430:      var option = options[ i ]; // i 番目の options ノードを変数 option に代入
431: 
432:      if ( option.selected ) { // option に selected 属性があれば
433:       // Get the specifc value for the option
         // val() メソッドを再帰呼び出しして結果を value に返す。
434:       value = jQuery(option).val();
435: 
436:       // We don't need an array for one selects
437:       if ( one ) // type 属性が select-one となっていた場合
438:        return value;
439: 
440:       // Multi-Selects return an array
441:       values.push( value );
442:      } // End of if (#432)
443:     } // End of for loop (#429)
444: 
445:     return values;
446:    }
447: 
448:    // Everything else, we just grab the value
      // キャリッジリターンを削除する。
449:    return (elem.value || "").replace(/\r/g, "");
450: 
451:   }
452: 
453:   return undefined; // 未定義値を返す。
454:  }
455: 
    //ケースB: value が数値の時。このときには value を設定することになる。
456:  if ( typeof value === "number" )
457:   value += ''; // 文字列に変換する
458: 
459:  return this.each(function(){ // インスタンス値を更新する。
460:   if ( this.nodeType != 1 ) // インスタンスが要素ノードではないとき
461:    return; // 何もしないで val() メソッドの適用を終える。
462:   // 従って以下のコードはインスタンスが要素ノードの時だけ進行される。
     // value が配列で、type 属性にラジオボタン又はチェックボックスがある場合
463:   if ( jQuery.isArray(value) && /radio|checkbox/.test( this.type ) )
      // this.value 値または this.name 値が value 配列内の要素と
      // 一致すれば checked 値を true とする。つまり当該ノードを「選択」
      // 状態とする。
464:    this.checked = (jQuery.inArray(this.value, value) >= 0 ||
465:     jQuery.inArray(this.name, value) >= 0);
466: 
     // インスタンスに登録されているノードが select タグの場合
467:   else if ( jQuery.nodeName( this, "select" ) ) {
      // value を配列 values に代入する。
468:    var values = jQuery.makeArray(value);
469: 
      // インスタンス内の各 option ノードを走査して
470:    jQuery( "option", this ).each(function(){
       // this.value または this.text 値が values 配列内にあれば
       // その要素の selected 値を true とする。
471:     this.selected = (jQuery.inArray( this.value, values ) >= 0 ||
472:      jQuery.inArray( this.text, values ) >= 0);
473:    });
474: 
475:    if ( !values.length ) // 配列要素が空ならば
476:     this.selectedIndex = -1; // 無選択状態とする。
477: 
478:   } else // 属性がラジオボタンでも、チェックボックスでも、select でもなければ
479:    this.value = value; // インスタンスの value 属性値を value とする。
480:  });
481: },

▲ToTop

 

■ コメントの投稿 ■

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

●トラックバック●

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

ブログはじめます。

これからブログをはじめていきます。 よろしくお願いします。

●参照元一覧●

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

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