jQuery亂談（六）

今天分析removeClass（）、removeProp（）、toggleClass（）、val（）。

　 removeClass（）：

/** * removeClass方法的內部實現和addClass方法很類似，都是先對引數型別進行判斷： * 引數為Function型別，則利用Function.call()執行函式引數，然後取得返回值，接著 * 利用jQuery.each方法和removeClass方法對每個匹配元素執行命令； * 引數為String型別，首先對每個匹配元素的class屬性的字串值規則化為 * " class1 class2 class3 "的形式，接著進行各自的處理（移除或新增） */ removeClass: function( value ) {         var removes, className, elem, c, cl, i, l;          // 如果引數為Function型別，執行該分支語句         if ( jQuery.isFunction( value ) ) {             // each方法在jQuery中經常用到，因為我們操作的jQuery物件經常是多個，該方法可以讓每個jQuery物件都執行相應的操作             return this.each(function( j ) {                  /* 這裡用到了Function.call()，這也是在jQuery內部實現中經常用到的                    還有與之類似的Function.apply()。二者都是用於改變執行上下文，                    借用已存在的方法進行操作，不同點就是傳遞引數的方式.                    這裡的value.call(this, j, this.className)會返回一個或更多用空格隔開的被移除class名 　　　　　　　　*/                 jQuery( this ).removeClass( value.call(this, j, this.className) );             });         }         /**         只有引數為String或者引數不存在（也可以引數等於undefined），才執行該分支語句         當引數不存在（也可以引數等於undefined）時，則匹配元素所有的樣式類名都會去掉         */         if ( (value && typeof value === "string") || value === undefined ) {             // // core_rspace = /s+/，用於匹配一個及以上的空白字元              removes = ( value || "" ).split( core_rspace ); // 將提供的引數按空白字元分開放到一個陣列裡              // // 迴圈對匹配元素的每一項進行處理             for ( i = 0, l = this.length; i = 0 ) {                             // 將要替換的樣式類名先處理為“ class1 ”的形式，然後替換為“ ”                             className = className.replace( " " + removes[ c ] + " " , " " );                         }                     }                     /**                     jQuery.trim方法用於去除字串前後空格，如果引數不存在，表明匹配元素的所有樣式類名將要全部去掉，所以直接等於"";                     如果引數存在，且為String型別，則應該去除整個樣式類名的前後空格                     */                     elem.className = value ? jQuery.trim( className ) : "";                  }             }         }         // // 形成鏈式呼叫         return this;     }

　　該方法用於移除每個匹配元素的一個，多個或全部class屬性。如果一個樣式類名作為一個引數,只有這樣式類為匹配的元素集合中被刪除 。 如果沒有樣式名作為引數，那麼所有的樣式類將被移除。使用方法：

• removeClass( [ className ] )

  className 為每個匹配元素移除的樣式屬性名。

• removeClass( function(index, class) )

  function(index, class) 這個函式返回一個或更多用空格隔開的被移除樣式名。接收元素的索引位置和元素舊的樣式名作為引數。

　　removeProp（）：

/* 這裡用到了propFix: {         tabindex: "tabIndex",         readonly: "readOnly",         "for": "htmlFor",         "class": "className",         maxlength: "maxLength",         cellspacing: "cellSpacing",         cellpadding: "cellPadding",         rowspan: "rowSpan",         colspan: "colSpan",         usemap: "useMap",         frameborder: "frameBorder",         contenteditable: "contentEditable"     }，它用於修正IE瀏覽器中的IE6、7getAttribute、setAttribute、removeAttribute等方法的不足 */ removeProp: function( name ) {         name = jQuery.propFix[ name ] || name;         return this.each(function() {             // try/catch 用於處理在IE瀏覽器中的抽風 (比如移除一個window的屬性)             try {                 /*                 這裡的this指的是配一個匹配的元素，我們可以透過this[ name ]訪問元素物件的name屬性,                 有兩種方式來訪問物件的屬性，點運算子或者中括號運算子。但一般推薦使用中括號運算子，                 因為中括號運算子在下面兩種情況下依然有效:                  動態設定屬性;屬性名不是一個有效的變數名（比如屬性名中包含空格，或者屬性名是 JS 的關鍵詞）                 */                 this[ name ] = undefined; // 將 name屬性設定成 undefined                 delete this[ name ]; // delete就是用於移除物件的屬性             } catch( e ) {}         });     }

　　該方法用於為匹配的元素刪除設定的屬性。只接受一個引數：removeProp( propertyName )。propertyName參數列示要移除的屬性名。該方法會移除使用 .prop()方法設定的屬性。若嘗試移除 DOM 元素或 window 物件上一些內建的   property 屬性，瀏覽器可能會產生錯誤。如果真的那麼做了，那麼 jQuery 首先會將 property 屬性設定成 undefined，然後忽略任何瀏覽器產生的錯誤。一般來說,只需要移除自定義的 property 屬性，而不是移除內建的（原生的） property 屬性。

注意: 不要使用該方法來移除原生的 property 屬性，例如：checked, disabled, 或 selected 屬性。因為這樣會完全移除該 property 屬性，它們一旦被刪除，就不能再被新增。請使用.prop() 來將這些 property   屬性的值設定成 false。

補充說明:

• 在 IE 9 之前,使用 .prop() 對一個 DOM 元素的屬性進行賦值時，若所賦值的型別不是基本型別(number, string, 或 boolean)，而且也沒有使用 .removeProp() 方法在   DOM 元素從文件中被移除之前。為了安全的在 DOM 物件上進行賦值而不用擔心記憶體洩露問題，請使用 .data() 方法 。

　　toggleClass（）：

toggleClass: function( value, stateVal ) {         var type = typeof value, // 第一個引數的型別             isBool = typeof stateVal === "boolean"; // 判斷第二個引數是否為boolean型          // 如果第一個引數為Function型別，執行該分支語句         if ( jQuery.isFunction( value ) ) {             // each方法在jQuery中經常用到，因為我們操作的jQuery物件經常是多個，該方法可以讓每個jQuery物件都執行相應的操作             return this.each(function( i ) {                 /* 這裡用到了Function.call()，這也是在jQuery內部實現中經常用到的                    還有與之類似的Function.apply()。二者都是用於改變執行上下文，                    借用已存在的方法進行操作，不同點就是傳遞引數的方式.                    這裡的value.call(this, j, this.className, stateVal)會返回在匹配的元素集合中的每個元素上用來切換的樣式類名 　　　　　　　　*/                 jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal );             });         }          // each方法在jQuery中經常用到，因為我們操作的jQuery物件經常是多個，該方法可以讓每個jQuery物件都執行相應的操作         return this.each(function() {             // 如果第一個引數為String型別，執行             if ( type === "string" ) {                 var className,                     i = 0,                     self = jQuery( this ),                     state = stateVal,                     classNames = value.split( core_rspace );                  while ( (className = classNames[ i++ ]) ) {                     // 判斷每一個class屬性值，決定新增還是移除                     state = isBool ? state : !self.hasClass( className );                     self[ state ? "addClass" : "removeClass" ]( className );                 }              } else if ( type === "undefined" || type === "boolean" ) {                 if ( this.className ) {                     // 如果class屬性存在，儲存                     jQuery._data( this, "__className__", this.className );                 }                  // 切換整個class屬性，也就是把新增或刪除class值後的字串返回給每個匹配元素的class屬性                 this.className = this.className || value === false ? "" : jQuery._data( this, "__className__" ) || "";             }         });     }

　　該方法在匹配的元素集合中的每個元素上新增或刪除一個或多個樣式類,取決於這個樣式類是否存在或價值切換屬性。即：如果存在（不存在）就刪除（新增）一個類。

• toggleClass( className )

  className 在匹配的元素集合中的每個元素上用來切換的一個或多個（用空格隔開）樣式類名。

• toggleClass( className, switch )

  className 在匹配的元素集合中的每個元素上用來切換的一個或多個（用空格隔開）樣式類名。

  switch 一個用來判斷樣式類新增還是移除的 boolean 值。

• toggleClass( function(index, class), [ switch ] )

  function(index, class) 用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函式。接收元素的索引位置和元素舊的樣式類作為引數。

  switch 一個用來判斷樣式類新增還是移除的 boolean 值。如果這個引數的值是true，那麼這個樣式類將被新增;如果這個引數的值是false，那麼這個樣式類將被移除。

　　val（）：

val: function( value ) {         var hooks, ret, isFunction,             elem = this[0]; // 匹配元素的第一個元素          // 如果引數不存在，執行該分支語句         if ( !arguments.length ) {               // 保證匹配元素的第一個元素存在             if ( elem ) {                 /*                 jQuery的val()函式需要針對不同標籤進行不同的處理, 因此定義一個以tagName為key的函式對映表                 valHooks: { option: {get:function(){}}} 這樣在程式中就不需要到處寫:                 if(elm.tagName == ’OPTION’){return …; }else if(elm.tagName == ’TEXTAREA’){ return …;}                 可以統一處理:                 valHooks[elm.tagName.toLowerCase()];                 對映表將函式作為普通資料來管理, 在動態語言中有著廣泛的應用.                 */                 // hooks是用來解決瀏覽器相容性的問題（select、option等元素）                 hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];                  if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {                     return ret; // ret為獲取的值                 }                  ret = elem.value;// 直接獲取元素的value值，這時應該主要針對表單元素                  return typeof ret === "string" ?                     // rreturn = /r/g,若元素的value值為字串型別，將字串中的回車符替換為""                     ret.replace(rreturn, "") :                     // 如果value為null，返回""；否則返回ret本身                     ret == null ? "" : ret;             }              return; // 如果值不存在，直接返回         }            // 以下程式碼主要處理引數存在的情況，就是設定值的情況          isFunction = jQuery.isFunction( value ); // 判斷引數是否為Function型別          return this.each(function( i ) {             var val,                 self = jQuery(this);              // 如果節點不是元素節點，直接返回             if ( this.nodeType !== 1 ) {                  return;             }              // 如果引數為Function型別，val等於函式引數返回的設定的值             if ( isFunction ) {                 val = value.call( this, i, self.val() );             } else {// 否則val直接等於引數值                 val = value;             }              // 如果val等於null/undefined，val = "";             if ( val == null ) {                 val = "";                 //  如果val為數字型別，將val值轉換為相應的字串型別             } else if ( typeof val === "number" ) {                 val += "";                 // 如果val為陣列型別，轉換為字串             } else if ( jQuery.isArray( val ) ) {                 val = jQuery.map(val, function ( value ) {                     return value == null ? "" : value + "";                 });             }              // 同上，hooks是用來解決瀏覽器相容性的問題（select、option等元素）             hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ];              // If set returns undefined, fall back to normal setting             if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {                 this.value = val;             }         });     }

　　該方法可以獲取匹配的元素集合中第一個元素的當前值，或者設定匹配的元素集合中每個元素的值。val() 方法主要用於獲取或設定表單元素的值。

• val()       

　　獲取匹配的元素集合中第一個元素的當前值。

• val( value ) 

　　設定匹配的元素集合中每個元素的值。

• 
  

  • val( value )

    　　value一個文字字串或一個以字串形式的陣列來設定每個匹配元素的值。

  • val( function(index, value) )

    　　function(index, value)一個用來返回設定值的函式。

　　jQuery的val()方法不僅能夠設定元素的值，同時也能獲取元素的值。常見的操作是對文字框的操作，比如判斷郵箱地址等。val()方法還有另外的一個用處，就是它能使select(下拉選單框),checkbox(多選框)和radio(單選框)相應的項被選中，這在表單操作中經常會用到。