jqueryプロパティ操作attr()prop()css()の違い

attr()とprop()操作プロパティ

      ：

1属性の定義は、W 3 Cマニュアルに記載されている:属性には、標準属性:id class style title言語属性lang dirおよびaのhref target属性、input要素のradio checked type alt src disabled valueなど、imgラベルのwidth height src altなど、存在しない属性を新規属性と呼ぶ.2 attr()は、要素の属性を設定することもできます(つまり、要素に元の存在しない属性を追加することもできます).また、要素の本来の属性と追加の設定の属性を取得することもできます.取得するプロパティが設定されていない場合、取得された結果はundefinedです.3 prop()は、要素の属性(HTML固有の属性、要素に属性を追加できる)を設定したり、要素の固有の属性値を取得したりすることができ、追加設定された他の属性であればprop()では取得できません.4要素属性の設定:attr(「属性名」,「属性値」)は、要素固有の属性を設定することもできるし、要素が本来存在しない属性を設定することもできる.例えばattr()は、ttle id classなど、次のコードdiv行に固有のHTML属性を設定することもできるし、index aaaなど、元の存在しない属性を設定することもできる.一方、prop(「属性名」,「属性値」)は、固有のHTML属性しか設定できません.要素属性値の取得:attr(「属性値」)は要素に設定された属性値のみを取得でき、固有属性と新規属性を含む.設定されていない属性は値を取得できず、結果はすべてundefinedである.prop(「属性値」)は固有属性の属性値のみを取得でき、新規属性の属性値は取得できない.まずこの話の意味を説明して、このコードを見てください.

    


       $("#dv").attr("index","1")//      
       $("#dv").attr("title","1")//      

设置之后div变为

   


       console.log($("#dv").prop("title"));//      1
       console.log($("#dv").prop("index"));//      undefined

二番目のコードを説明してください。

A 对于固有的HTML属性
html代码

jquery代码（输出html代码里面有的属性，attr只能获取class id title ，prop可以获取没有设置的属性 比如style）

       console.log($("#dv").prop("title"));
       console.log($("#dv").attr("title"));

       console.log($("#dv").prop("style"));
       console.log($("#dv").attr("style"));

コンソール出力(HTML固有の属性値を取得可能)

    div
    div
CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: ""…}
undefined

このことから、1は固有のHTML属性に対して、要素に設定されている場合、attrとpropはいずれも固有のHTML属性に対して取得することができ、要素に設定されていない場合、attrはundefinedであり、propはその属性の値を取得することができる.簡単な例を見てみましょう
htmlコード

このコードにはchecked属性値は設定されていません(checked属性対応値にはtrue falseが2つあります)
jqueryコード(htmlコードにある属性を出力し、attrはtype value idしか取得できず、propはcheckedなどの設定されていない属性を取得できます)

       console.log($("#chk").prop("value"));
       console.log($("#chk").attr("value"));

       console.log($("#chk").prop("checked"));
       console.log($("#chk").attr("checked"));

出力結果:チェックボックスをクリックする前に次のように出力します.

                       
                       
                    false
                    undefined

チェックボックスをクリックすると、次のように出力されます.

                    
                    
                 true
                 undefined

まとめ:1 attr()で属性値を取得するには、その属性がHTMLコードに明示的に設定されているか、attrで追加された属性によって取得される必要があります.設定されていない場合、undefined 2に戻ります.prop()で属性値を取得すると、その属性はHTMLの固有の属性にすぎません.明示的な設定にかかわらず、対応する属性値を取得できます.追加の属性であれば、では、取得できません.以下この問題について述べる
htmlコード:

jquery代码

       $("#dv").attr("index","1")//  attr         ，W3C        
       console.log($("#dv").prop("index"));
       console.log($("#dv").attr("index"));

コード実行後:

控制台输出：

    undefined
    1

3つの福祉バーcss()

    jquery  

        console.log($("#dv").prop("style"));
       console.log($("#dv").attr("style"));
       console.log($("#dv").css("width"));

divに埋め込みhtmlコードにかかわらず、いくつかのスタイルを追加します.

控制台输出
CSSStyleDeclaration {0: “width”, 1: “height”, 2: “background-color”, alignContent: “”, alignItems: “”, alignSelf: “”, alignmentBaseline: “”, all: “”…}
width:100px;height: 50px;background-color:pink;
100px

     
    
    div class="cls1 cls2" id="dv" title="    div">

コンソール出力:
CSSStyleDeclaration {alignContent: “”, alignItems: “”, alignSelf: “”, alignmentBaseline: “”, all: “”…} undefined 100px
小結:区別に注意し、属性とスタイル属性は通常id class style lang dir titleなどを含むが、スタイル属性はstyle属性やstyleラベルに設定されているので、混同しないように注意する.css()はstyleの中の属性値しか取得できません.注意構文:styleスタイルのプロパティ値を取得する:オブジェクト.css(「プロパティ名」)、styleスタイルのプロパティ値:オブジェクトを設定します.css(「属性名」,「属性値」)二重引用符は欠かせない

4 DOMで要素のプロパティを取得する記事を参照してください。http://blog.csdn.net/qq_35809245/article/details/54146996

5読書を歓迎して、あなたは辛くて美しくて勤勉で、あなたの楽しみを祈ります!