深刻瀏覽器兼容細數jQuery Hooks 屬性篇

時間 2019-11-12

標籤深刻瀏覽器兼容細數 jquery hooks 屬性欄目瀏覽器简体版

原文原文鏈接

關於鉤子：http://www.cnblogs.com/aaronjs/p/3387906.htmljavascript

本章的目的很簡單，經過鉤子函數更細節的瞭解瀏覽器差別與處理方案,css

版本是2.0.3因此不兼容ie6.7.8，因此對應了鉤子會少不少。。html

總的來講鉤子在.attr(), .prop(), .val() and .css() 四種操做中會涉及java

屬性操做的鉤子node

propFixjquery

propHooksios

attrHooksapi

valHooks瀏覽器

jQuery.propFix 中的對象框架

源碼部分

1：保留值屬性名字修正

jQuery.propFix: {
    for   :  "htmlFor",
   class  :  "className"
},

因爲class屬於JavaScript保留值，所以當咱們要操做元素的class屬性值時，直接使用obj.getAttribute('class')和obj.setAttribute('class', 'value')可能會遭遇瀏覽器兼容性問題，W3C DOM標準爲每一個節點提供了一個可讀寫的className屬性，做爲節點class屬性的映射，標準瀏覽器的都提供了這一屬性的支持，所以，能夠使用e.className訪問元素的class屬性值，也可對該屬性進行從新斌值。而IE和Opera中也可以使用e.getAttribute('className')和e.setAttribute('className', 'value')訪問及修改class屬性值。相比之下，e.className是W3C DOM標準，仍然是兼容性最強的解決辦法。
同理htmlFor用於讀取label標籤的for屬性

測試demo,經過class與className修改元素的屬性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <span id="test" for="mmm" in="nnn" disabled='disabled' class='ccc'>測試屬性修改</span></br></br> <span id="preserve1c71f7f89c0a405a87f520f3fe275bf0" class="wlWriterPreserve"><script type="text/javascript"> var test = document.getElementById('test'); document.write('原始class值結果class='+ test.className + '</br>') test.class = 1111; document.write('經過class修爲1111結果class=' + test.className+ '</br>') test.className = 2222; document.write('經過className修爲2222結果class=' + test.className+ '</br>') </script></span>  </body> </html>

2：與表單操做相關:

反轉下，讓鉤子適配用僞代碼匹配，目測應該是爲了兼容開發者輸入大小寫格式不正確

好比輸入錯誤格式：cellpadding

若是jQuery.propFix 轉成cellPadding ，駝峯寫法了

jQuery.each([
        "tabIndex",
        "readOnly",
        "maxLength",
        "cellSpacing",
        "cellPadding",
        "rowSpan",
        "colSpan",
        "useMap",
        "frameBorder",
        "contentEditable"
    ], function() {
        jQuery.propFix[ this.toLowerCase() ] = this;
    });

tabIndex 屬性可設置或返回按鈕的 tab 鍵控制次序

readonly 屬性規定輸入字段爲只讀。

maxlength 屬性規定輸入字段的最大長度，以字符個數計。

cellspacing 屬性規定單元格之間的空間

cellpadding 屬性規定單元邊沿與其內容之間的空白。

rowspan 屬性規定單元格可橫跨的行數。

colspan 屬性規定單元格可橫跨的列數。

HTML <img> 標籤的

usemap 屬性將圖像定義爲客戶端圖像映射

frameBorder 屬性設置或返回是否顯示框架周圍的邊框。

contenteditable 屬性規定是否可編輯元素的內容。

值得一提的是這個方法用的比較巧妙了，收集全部的合集名，而後在每個上下文回調中把每個名字傳遞到propFix方法,key轉成小寫,value保存正確寫法

jQuery.propFix[ this.toLowerCase() ] = this;

jQuery.propHooks 屬性方法

關於tabIndex屬性

http://www.w3help.org/zh-cn/causes/SD2021

propHooks: {
    tabIndex: {
        get: function( elem ) {
            return elem.hasAttribute( "tabindex" ) || rfocusable.test( elem.nodeName ) || elem.href ?
                elem.tabIndex :
                -1;
        }
    }
}

// Support: IE9+
// Selectedness for an option in an optgroup can be inaccurate
if ( !jQuery.support.optSelected ) {
    jQuery.propHooks.selected = {
        get: function( elem ) {
            var parent = elem.parentNode;
            if ( parent && parent.parentNode ) {
                parent.parentNode.selectedIndex;
            }
            return null;
        }
    };
}

jQuery.attrHooks 方法

attrHooks: {
    type: {
        set: function( elem, value ) {
            if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) {
                // Setting the type on a radio button after the value resets the value in IE6-9
                // Reset value to default in case type is set after value during creation
                var val = elem.value;
                elem.setAttribute( "type", value );
                if ( val ) {
                    elem.value = val;
                }
                return value;
            }
        }
    }
},

jQuery.valHooks 方法

根據 JQuery api文檔的描述，.val() 函數有兩種用法，分別用來獲取或設置元素的值，這裏只介紹獲取值的方法。

文檔裏面說 .val 主要是用於獲取元素的value，好比 input, select 和 textarea等，

什麼是元素的value?」

用 select 標籤爲例，以下的代碼：

測試代碼

<select id="choise">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

這裏的option有2個值，一個是value = 1 另外一個則是 text = One

option 真正的 value 應該是其 value 屬性中的值，而不是 option 標籤中間所包含的內容

在 w3school 的文檔中對 option 的 value 屬性的作了以下定義：

The value attribute specifies the value to be sent to a server when a form is submitted.
The content between the opening <option> and closing </option> tags is what the browsers will display in a drop-down list. However, the value of the value attribute is what will be sent to the server when a form is submitted.
Note: If the value attribute is not specified, the content will be passed as the value instead.

這一點對於全部能夠擁有 value 屬性的標籤都是相同的，即在對一個元素調用 .val() 函數時，首先取其 value 屬性的值，若是沒有的話，再使用其 text 值。

那麼接下來就要引入咱們的valHooks,針對option,select的處理

option,select        valHooks: {
            option: {
                get: function( elem ) {
                    // attributes.value is undefined in Blackberry 4.7 but
                    // uses .value. See #6932
                    var val = elem.attributes.value;
                    return !val || val.specified ? elem.value : elem.text;
                }
            },
            select: {
                get: function( elem ) {
                    var value, option,
                        options = elem.options,
                        index = elem.selectedIndex,
                        one = elem.type === "select-one" || index < 0,
                        values = one ? null : [],
                        max = one ? index + 1 : options.length,
                        i = index < 0 ?
                            max :
                            one ? index : 0;

                    // Loop through all the selected options
                    for ( ; i < max; i++ ) {
                        option = options[ i ];

                        // IE6-9 doesn't update selected after form reset (#2551)
                        if ( ( option.selected || i === index ) &&
                            // Don't return options that are disabled or in a disabled optgroup
                            ( jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null ) &&
                            ( !option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" ) ) ) {

                            // Get the specific value for the option
                            value = jQuery( option ).val();

                            // We don't need an array for one selects
                            if ( one ) {
                                return value;
                            }

                            // Multi-Selects return an array
                            values.push( value );
                        }
                    }

                    return values;
                },

                set: function( elem, value ) {
                    var optionSet, option,
                        options = elem.options,
                        values = jQuery.makeArray( value ),
                        i = options.length;

                    while ( i-- ) {
                        option = options[ i ];
                        if ( (option.selected = jQuery.inArray( jQuery(option).val(), values ) >= 0) ) {
                            optionSet = true;
                        }
                    }

                    // force browsers to behave consistently when non-matching value is set
                    if ( !optionSet ) {
                        elem.selectedIndex = -1;
                    }
                    return values;
                }
            }
        },

對於val方法的取值部分

if ( elem ) {
    hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];

    if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
        return ret;
    }

    ret = elem.value;

    return typeof ret === "string" ?
        // handle most common string cases
        ret.replace(rreturn, "") :
        // handle cases where value is null/undef or number
        ret == null ? "" : ret;
}

經過jQuery.valHooks匹配對應的鉤子處理方法

節點屬性的差別對比:

select : 建立單選或多選菜單

type:"select-one"
tagName: "SELECT"
value: "111"
textContent: "↵ Single↵ Single2↵"

option : 元素定義下拉列表中的一個選項

tagName: "OPTION"
value: "111"
text: "Single"
textContent: "Single"

radio : 表單中的單選按鈕

type: "radio"
value: "11111"

checkbox : 選擇框

type: "checkbox"
value: "11111"

根據對比select的節點type是'select-one’與其他幾個還不一樣，因此jQuery在適配的時候採用優先查找type,不然就找nodeName的策略

hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];

若是鉤子匹配到了，而且還存在get方法，那麼就要調用這個方法了,若是有返回值就返回當前的這個最終值

if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
    return ret;
}

那麼具體的兼容問題就會跑到對應的鉤子方法中處理了

// Loop through all the selected options
                    for ( ; i < max; i++ ) {
                        option = options[ i ];

                        // IE6-9 doesn't update selected after form reset (#2551)
                        if ( ( option.selected || i === index ) &&
                            // Don't return options that are disabled or in a disabled optgroup
                            ( jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null ) &&
                            ( !option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" ) ) ) {

                            // Get the specific value for the option
                            value = jQuery( option ).val();

                            // We don't need an array for one selects
                            if ( one ) {
                                return value;
                            }

                            // Multi-Selects return an array
                            values.push( value );
                        }
                    }

經過selectedIndex 屬性可設置或返回下拉列表中被選選項的索引號

經過遞歸select中的全部option

在包裝jQuery( option ).val()

從而調用option的鉤子方法get ,

get: function( elem ) {
                    // attributes.value is undefined in Blackberry 4.7 but
                    // uses .value. See #6932
                    var val = elem.attributes.value;
                    return !val || val.specified ? elem.value : elem.text;
                }

elem.attributes.value返回對應的option的val值

因此這裏就兼容的默認返回val，不然就返回text的內容了

radio，checkbox

// Radios and checkboxes getter/setter
    jQuery.each([ "radio", "checkbox" ], function() {
        jQuery.valHooks[ this ] = {
            set: function( elem, value ) {
                if ( jQuery.isArray( value ) ) {
                    return ( elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0 );
                }
            }
        };
        if ( !jQuery.support.checkOn ) {
            jQuery.valHooks[ this ].get = function( elem ) {
                // Support: Webkit
                // "" is returned instead of "on" if a value isn't specified
                return elem.getAttribute("value") === null ? "on" : elem.value;
            };
        }
    });