jQuery その2 formの要素をクリア（初期化）

こんにちは。瞑想界のゴッドファーザーことcypher-worksです。
フォームの内容をすべてクリアするサンプルです。
今回はjavascriptとjQueryを両方作ってよりjQueryを深く知ろうとしましょう。

以下、javascriptで実装

//クリアボタン制御（初期値に戻らせる）
function clear1(){
    form=document.forms[0];
	formClear(document.forms[0]);
}
//------------------------------------------------------------------------------
//
//  formクリア
//
//------------------------------------------------------------------------------
function formClear(form_obj){
	for (i = 0; i < form_obj.elements.length;i++ ) {
		obj =form_obj.elements[i];
		if (obj.type == "checkbox" || obj.type == "radio") {
			obj.checked=false;
		}else if (obj.type == "text" || obj.type == "textarea") {
			obj.value="";
		}else if (obj.type == "select") {
			obj.selectedIndex=-1;
		}
	}
}

以下、jQueryコード

$.fn.clearForm = function() {
  return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == 'form')
      return $(':input',this).clearForm();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = '';
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

出所：http://www.learningjquery.com/2007/08/clearing-form-data

サンプル

–
ホワイト
レッド
イエロー
ブルー
グリーン
犬 　
猫
ハムスター
鳥
熱帯魚
爬虫類

javascriptで実装したほうはプルダウンが初期化されませんね。う～ん。
しかし、jQueryで実装したほうはきれいに全部初期化されますね
（jQueryの初期化はこの投稿のみ表示したとき正常に動作します。なにかが邪魔をしていそうです？）

以下、HTMLでの呼び出しコード（フォームのID属性がform_sampleの場合）

<input type="button" value="jsでクリア" onClick="clear1();" />
<input type="button" value="jQueryでクリア" onClick="$('#form_sample').clearForm()" />

ではjQueryを解析していきましょう。

$.fn.clearForm = function() {

“$.fn.”これでfunctionを表現できるのでしょうか。
下記リファレンスに”$.fn.”が当てはまりそうな記述がありますね。
http://semooh.jp/jquery/api/core/jQuery.fn.extend/object/
拡張機能の文法として使われてますね。”return each”の記述も見ることができます。拡張機能もそうでしょうが、適用したいエレメントに機能を施したいという時に使うのでしょう。

return this.each(function() {

“this.each(function() “の意味を検証しましょう。
http://semooh.jp/jquery/api/core/each/callback/
これは、合致するエレメントが見つかる度に1度ずつ、毎回関数が実行されることを意味する。その際に、関数内でthisポインタは各エレメントを指す。分かった！では次。

var type = this.type, tag = this.tagName.toLowerCase();

まず、変数の宣言は”,”で繋げられるのですね。さて”this.tagName.toLowerCase()”はどのような意味なのか。
google先生に聞くと、
tagNameはタグの種類を返してきそうですね。
https://developer.mozilla.org/Ja/DOM/Element.tagName
toLowerCase()は文字列を全部小文字にするそうです。

以上、説明は割愛かつ終わりにします。

thank you for your time.