国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

傻傻的分也分不清楚的property和attribute

SimpleTriangle / 711人閱讀

摘要:最近,一個小伙伴問了我一個問題和的區別當時我想了又想,很不好意思的說了我不知道,所以,抽了個事件好好的利用了一下度娘和總結了一下。

最近,一個小伙伴問了我一個問題property和attribute的區別?當時我想了又想,很不好意思的說了我不知道,所以,抽了個事件好好的利用了一下‘度娘’和‘Google’總結了一下。度娘搜索到的有用信息知乎中的討論csdn搜索的結果,Google發現的有用信息,lucy女神的解釋 JOJI.ME中的解釋通過查看這些我們發現要分辨property和attribute并非那么難。

property和attribute的真實含義

property它是相對于對象本身來說的,本身就是對象的組成部分,也可以說是對象本身

property用人來類比就好像是人有眼,手,耳等器官一樣,人生而有之(先天的)

attribute它是相對于對象來說的,本身只是對對象的一種說明,就好像是我們在朋友聚會時對彼此不認識的伙伴的介紹一樣。

attribute用人來類比就好像是人有名字,學歷,女朋友等(后天的)

javascript使用中我們應該注意的事項

property 是有類型的,例如Bollean,number,string等

attribute 只能是string,而沒有其他類型

使用中應注意的事項

使用過jQuery的同學都知道,在jQuery中有.prop()和.attr()這樣兩個鉤子函數,有相當一部分同學只是知道有這樣兩個方法,但該如何的使用一些同學還是傻傻的分也分不清楚?對于那些說只要會用能解決問題就行了的觀點,我也只能一笑而過。

// dom

在示例中input元素的type,checked,name都是input元素對象的property,我們可以像給一半元素對象賦值一樣修改input的對象的property,通過下面的代碼:

document.querySelectorAll("input")[1].type = "text"

會得到這樣的結果

document.querySelectorAll("input")[0].setAttribute("type", "text")

attribute修改會得到這樣的結果

我們發現結果都改變了input對象的類型,難道是巧合,確實是巧合,因為prop和attr都可以設置字符串的屬性,因為是字符串所以都起效

如果我們修改checked的值將只有prop起作用,因為checked的屬性值是Boolean類型的如下圖

document.querySelectorAll("input")[0].checked = false

document.querySelectorAll("input")[1].setAttribute("checked", false)

我們發現 setAttribute("checked", false)并不是不起作用,而是被選中了,說明了什么,說明了input元素對象將checked值設為了‘false’字符串,而在js中非空的String類型會根據執行的語境別轉換類型為Boolean類型true

jQuery中的prop()和attr()源碼的分析

jquery version 3.2.1

.prop()原碼分析

jQuery.fn.extend( {
    prop: function( name, value ) {
        return access( this, jQuery.prop, name, value, arguments.length > 1 );
    },

    removeProp: function( name ) {
        return this.each( function() {
            // 刪除名字為name的property
            delete this[ jQuery.propFix[ name ] || name ];
        } );
    }
} );

jQuery.extend( {
    prop: function( elem, name, value ) {
        ...
        if ( value !== undefined ) {
            ...
            // 為名字為name的property屬性賦值
            return ( elem[ name ] = value );
        }
        ...
        // 返回名字為name的property屬性
        return elem[ name ];
    },
    ...
} );

.attr()源碼分析

jQuery.fn.extend( {
    attr: function( name, value ) {
        return access( this, jQuery.attr, name, value, arguments.length > 1 );
    },

    removeAttr: function( name ) {
        return this.each( function() {
            jQuery.removeAttr( this, name );
        } );
    }
} );

jQuery.extend( {
    attr: function( elem, name, value ) {
        ...
        if ( value !== undefined ) {
            if ( value === null ) {
                jQuery.removeAttr( elem, name );
                return;
            }

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

            elem.setAttribute( name, value + "" );
            return value;
        }

        if ( hooks && "get" in hooks && ( ret = hooks.get( elem, name ) ) !== null ) {
            return ret;
        }            
        // 取得并返回名字為name的attribute
        ret = jQuery.find.attr( elem, name );
        return ret == null ? undefined : ret;
    },
    ...
    removeAttr: function( elem, value ) {
        ...
        if ( attrNames && elem.nodeType === 1 ) {
            while ( ( name = attrNames[ i++ ] ) ) {
                // 元素elem刪除名字為name的attribute
                elem.removeAttribute( name );
            }
        }
    }
} );

從上面的實例代碼我們不難看出jQuery源碼對attribute和property的創建和刪除進行了嚴格的區分,attribute的創建和刪除用setAttribute(), getAttribute();而property的創建和刪除使用的方式跟一般對象一致,obj[name] = [value] 創建并賦值,delete obj[name] 則刪除

通過上面的示例我們發現setAttribute()也可以對一些property進行修改,這一點我們稍后再說,但無疑jQuery的做法把開發變得簡單了起來,

為attr和prop賦值&取值

通過上一小節的代碼我們知道,我們可以通過兩種方式向dom對象的屬性來賦值。

1.像給一半的js對象那樣給dom對象的屬性賦值,取值跟一般對象一樣;

2.通過setAttribute()為dom對象賦值,取值通過getAttribute()

第一種方法可以為dom對象賦值和取值,但能反應在瀏覽器dom結構中的只有元素自帶的屬性

第二種方法不僅可以為dom對象賦值和取值,還可以在瀏覽器的dom結構中來顯示自定義的dom對象屬性

下面是一張示例圖:

jQuery中的prop&attr

jQuery作為一代經典的前端庫,我們曾經在判斷input單選和復選框是否被選中
用if(doucment.querySelector("input").checked),現在用if($("input").prop(
"checked"))

jQuery對prop()和attr()做了嚴格的區分,prop就是對象的屬性,attr就是描述屬性

糾錯:type屬性兩方法以均可獲取和設置相應的值

圖片來源于:https://stackoverflow.com/questions/5874652/prop-vs-attr/5884994#5884994

友情提示

在定義自定義屬性是建議為 data-[屬性名] 這種形式,相信寫過jQuery插件或修改研究過 jQuery插件的同學都不陌生。

DOM property 和 HTML attribute

通過document.querySelector[0].attributes 可以獲取dom對象的所有attribute屬性

有些自定義的attribute,也可通過(.)這種方式來獲取

推薦

注:要深入了解的同學可以看一看

文章來源于https://github.com/lvzhenbang/article/blob/master/js/porp-attr.md

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90360.html

相關文章

  • HTML5中 `data-*` 如何處理數據詳解

    摘要:刪除這個簡單的使用場景就描述了如何工作。如果你將一個對象直接存儲在其中是不行的,但對對象進行序列化處理后,還是可以的。 寫過HTML5頁面,或者做過H5開發的同學或多或少都接觸過data-*這個自定義Attribute(對Attribute和property還分不太清的同學,可以看一看傻傻的分也分不清楚的property和attribute)這篇文章。 在做微信公眾號開發的時候你一定看...

    khlbat 評論0 收藏0
  • C++入門—namespace使用傻傻分不清楚&C++中函數參數也可以配備胎&a

    摘要:使用輸入輸出更方便,不需增加數據格式控制,比如整形,字符等缺省參數備胎缺省參數是聲明或定義函數時為函數的參數指定一個默認值。此外,函數重載要求參數不同,而跟返回值沒關系。 ...

    pingan8787 評論0 收藏0
  • webpack多頁應用架構系列(七):開發環境、生產環境傻傻分不清楚

    摘要:開發環境和生產環境都擁有的配置,但在細節上有所不同,比如說,又比如說中的和參數。更重要的是,實際上開發環境和生產環境的配置文件的絕大部分都是一致的,對于這一致的部分來說,我們堅決要消除冗余,否則后續維護起來不僅麻煩,而且還容易出錯。 本文首發于Array_Huang的技術博客——實用至上,非經作者同意,請勿轉載。原文地址:https://segmentfault.com/a/11900...

    paulquei 評論0 收藏0

發表評論

0條評論

SimpleTriangle

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<