アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » DEVELOPER STAGE » 特集 » jquery.jsを読み解く » 第13回 jQueryライブラリ(2834行目~3107行目)

jquery.jsを読み解く

第13回 jQueryライブラリ(2834行目~3107行目)

前回から今回までの間に,jQueryの最新版 1.2.6がリリースされました。どうやら再びパッチの適用に不備があったようで,1.2.4および1.2.5は使用しないようにとのことですのでご注意ください。変更点としては前回説明した通りなのですが,リリースノートを見るとかなりの高速化が図られていることが分かります。

  • イベントバンドリングが103%高速化
  • CSSセレクタの13%高速化
  • offset() 21%高速化
  • css() 25%高速化

それでは,2834行目からのソースを見ていきましょう。

jQuery.param()

2834:   // Serialize an array of form elements or a set of
2835:   // key/values into a query string
2836:   param: function( a ) {
2837:     var s = [];
2838: 
2839:     // If an array was passed in, assume that it is an array
2840:     // of form elements
2841:     if ( a.constructor == Array || a.jquery )
2842:       // Serialize the form elements
2843:       jQuery.each( a, function(){
2844:         s.push( encodeURIComponent(this.name) + "=" + encodeURIComponent( this.value ) );
2845:       });
2846: 
2847:     // Otherwise, assume that it's an object of key/value pairs
2848:     else
2849:       // Serialize the key/values
2850:       for ( var j in a )
2851:         // If the value is an array then the key names need to be repeated
2852:         if ( a[j] && a[j].constructor == Array )
2853:           jQuery.each( a[j], function(){
2854:             s.push( encodeURIComponent(j) + "=" + encodeURIComponent( this ) );
2855:           });
2856:         else
2857:           s.push( encodeURIComponent(j) + "=" + encodeURIComponent( a[j] ) );
2858: 
2859:     // Return the resulting serialization
2860:     return s.join("&").replace(/%20/g, "+");
2861:   }
2862: 
2863: });

2834行目からは,jQuery.param()メソッドの定義で,フォーム要素の配列やキー/値形式のオブジェクトをクエリー文字列形式にシリアライズするメソッドになります。

2837行目は,データ格納用に空の配列を用意します。

2841~2845行目は,フォーム要素の配列などのArrayオブジェクトが渡されてきた場合の処理でjQuery.each()メソッドを使って,name=value形式にして配列sに格納していきます。またデータは,encodeURIComponent()によりエスケープされます。

2848~2857行目は,キーと値のペアが渡されてきた場合の処理です。もし,この値が配列だった場合には,jQuery.each()メソッドを使って同じキー名を繰り返し設定するようにします。配列でなければ,key=value形式でそのまま配列sに格納します。

最後に2860行目で,配列sを"&"で結合して,スペースを"+"に変換して完了です。

jQuery.fn.show()

2864: jQuery.fn.extend({
2865:   show: function(speed,callback){
2866:     return speed ?
2867:       this.animate({
2868:         height: "show", width: "show", opacity: "show"
2869:       }, speed, callback) :
2870:       
2871:       this.filter(":hidden").each(function(){
2872:         this.style.display = this.oldblock || "";
2873:         if ( jQuery.css(this,"display") == "none" ) {
2874:           var elem = jQuery("<" + this.tagName + " />").appendTo("body");
2875:           this.style.display = elem.css("display");
2876:           // handle an edge condition where css is - div { display:none; } or similar
2877:           if (this.style.display == "none")
2878:             this.style.display = "block";
2879:           elem.remove();
2880:         }
2881:       }).end();
2882:   },
2883:   

jQuery.fn.show()メソッドは,選択された要素が非表示になっている場合に表示状態にするメソッドです。

第1引数speedが指定されていれば,2867~2868行目にあるようにanimate()メソッドをheight:"show",width:"show",opacity:"show"というパラメータとともに呼び出します。

speed引数が指定されていない場合は,2871行目のfilter(":hidden")によって非表示の要素のみを抽出し,2872行目でthis.oldblockに以前の値が保持されていれば,style.displayプロパティを元に戻します。ここで,this.oldblockとは元々のdisplayプロパティの値なのですが,もしこの値が"none"だった場合には,そのままでは表示されません。そこで,2874行目で空のタグをbody内に挿入し,そのタグのデフォルトのdisplay値を取得しています。しかし,divタグなどのようにそれでもdisplay値に"none"が返ってくるものに関しては,2878行目で強制的に"block"を設定します。

jQuery.fn.hide()

2884:   hide: function(speed,callback){
2885:     return speed ?
2886:       this.animate({
2887:         height: "hide", width: "hide", opacity: "hide"
2888:       }, speed, callback) :
2889:       
2890:       this.filter(":visible").each(function(){
2891:         this.oldblock = this.oldblock || jQuery.css(this,"display");
2892:         this.style.display = "none";
2893:       }).end();
2894:   },
2895: 

jQuery.fn.hide()メソッドは,選択された要素が表示されている場合に非表示状態にするメソッドです。

第1引数speedが指定されていれば,2886~2888行目にあるようにanimate()メソッドをheight: "hide", width: "hide", opacity: "hide"というパラメータとともに呼び出します。

speed引数が指定されていない場合は,2890行目のfilter(":visible")によって表示されている要素のみを抽出し,2892行目でstyle.displayをnoneに設定することで非表示にします。また,2891行目で非表示にする前にdisplayプロパティの値をthis.oldblockに保存しておきます。

著者プロフィール

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

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

ブログWeboo! Returns.

コメント

コメントの記入

パスサポ

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

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

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

その他の連載

読むウェブ ~本とインタラクション

ディスプレイで読む活字とそのインタラクション(interaction:相互作用)について,最新Webを紹介しながら読み解いていく。

いま,見ておきたいウェブサイト

この連載では,国内外の最新のウェブサイトを隔週更新で取り上げ,これら最新サイトの特徴や素晴らしい部分を,さまざまな角度から解説していきます。

Windows phoneアプリケーション開発入門

Windows Marcketplace for Mobileがサービス開始され,作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にWindows phoneアプリケーションの開発をしてみませんか?

ここは知っておくべき!Windows Server 2008技術TIPS

5年ぶりのサーバOSとなったWindows Server 2008が出荷されて早2年。2009年にはR2が出荷され,再び注目を集めています。発売前から実施したトレーニングによって感じた,インフラエンジニアの方々に知っておいていただきたい機能を中心にご紹介します。

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス