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.
jquery.jsを読み解く
- 第13回 jQueryライブラリ（2834行目～3107行目）
- 第12回 jQueryライブラリ（2530行目～2833行目）
- 第11回 jQueryライブラリ（2365行目～2529行目）
- 第10回 jQueryライブラリ（2183行目～2364行目）
- 第9回 jQueryライブラリ (1962行目～2182行目)
- 第8回 jQueryライブラリ（1795行目～1961行目）
- 第7回 jQueryライブラリ（1637行目～1794行目）
- 第6回 jQueryライブラリ（1360行目～1636行目）
- 第5回 jQueryライブラリ (1094行目～1359行目)
- 第4回 jQueryライブラリ（770行目～1093行目）
![[改訂3版]図解でよくわかる ネットワークの重要用語解説](http://image.gihyo.co.jp/assets/images/cover/2009/thumb/TH40_9784774138213.jpg){kind=small}
