jsのpropとattrの違いを詳しく解説

この記事の主な目的は、attr がページ検索から要素の値を取得することです。そのため、値を取得するにはページで要素を明確に定義する必要がありますが、これは比較的時間がかかります。
例:

<input name=&#39;test&#39; type=&#39;checkbox&#39;> 
$(&#39;input:checkbox&#39;).attr(&#39;type&#39;); 返回checkbox. 
$(&#39;input:checkbox&#39;).attr(&#39;checked&#39;); 返回undefined。

なぜなら、 <input name='test' type='checkbox'>< / コード内にチェックされたキーワードがありません>。 <code style="font-size:14px;line-height:22px;padding:4px 2px 0px;"><input name=&#39;test&#39; type=&#39;checkbox&#39;>中没有checked关键字。

• prop是从属性对象中取值，属性对象中有多少属性，就能获取多少值，不需要在页面中显示定义。
  比如
  

例:

$('input:checkbox').prop('checked'); 返回false
。

ログイン後にコピー

• ここで問題が発生します。がカスタム属性の場合、属性オブジェクトにはそのような属性はありません。したがって、prop は未定義を返します。ただし、この属性はページから取得できるため、attr を取得できます。

次に

attrは、attr(‘name’, ‘value’)で変更しない限り、値は変わりません。 prop 属性の値はチェックボックスなど動的で、選択するとチェックが true になり、prop の値も変化します。

• 概要

したがって、経験則は次のとおりです:
HTML要素自体の固有属性については、それらを処理するときにpropメソッドを使用します。速くて正確。

HTML 要素の独自にカスタマイズされた DOM 属性については、処理時に attr メソッドを使用します。 上記の説明は少し曖昧かもしれませんが、いくつか例を挙げてみましょう。

<a id="first" href="#" target="_self">超链接</a>

この例では、<a> 要素の DOM 属性には、<a> 要素自体の属性が含まれています。 W3C 標準、または IDE でインテリジェントにプロンプ​​トを表示できる属性。これらは固有属性と呼ばれます。これらのプロパティを扱う場合は、prop を使用することをお勧めします。

<a id="first" href="#" target="_self" uuu="guoguo">超链接</a>

この例では、<

> 要素の DOM 属性には id、href、target、uuu が含まれており、最後の "uuu" 属性はカスタマイズされています。 ;
• a

  >要素自体にはこの属性はありません。これはカスタム DOM 属性です。これらの属性を扱う場合は、attr を使用することをお勧めします。
  

  HTML 要素の固有属性を読み取ります (割り当てられています)

<a href="#" target="_self">超链接</a>
//attr和prop都读取成功
//attr("href")的值是：#//prop("href")的值是：http://localhost:4590/AttributeHandle/Index#alert($("a").attr("href"));alert($("a").prop("href"));

ログイン後にコピー

<a href="#" target="_self">超链接</a>
<input type="checkbox" id="testCheckBox" value="测试CheckBox"/>
alert($("a").attr("id"));//输出：undefine
alert($("a").prop("id"));//输出：默认值""alert($("a").attr("checked"));//输出：undefine
alert($("a").prop("checked"));//输出：undefine
alert($("#testCheckBox").attr("checked"));//输出：undefine
alert($("#testCheckBox").prop("checked"));//输出：默认值falsealert($("a").attr("class"));//输出：undefine
alert($("a").prop("class"));//输出：默认值""

读取HTML元素自定义属性（已赋值）

<a href="#" target="_self" uuu="guoguo">超链接</a>
alert($("a").attr("uuu"));//输出：guoguoalert($("a").prop("uuu"));//输出：undefine

读取HTML元素自定义属性（未赋值）

<a href="#" target="_self" uuu="guoguo">超链接</a>
alert($("a").attr("abc"));//输出：undefinealert($("a").prop("abc"));//输出：undefine

设置HTML元素固有属性

<a href="#" target="_self" uuu="guoguo">超链接</a>
$("a").attr("id","link");//id属性添加成功$("a").prop("id","link");//id属性添加成功

设置HTML元素自定义属性

<a href="#" target="_self" uuu="guoguo">超链接</a>$("a").attr("abc", "myself");//成功添加属性abc="myself"$("a").prop("abc", "myself");//添加abc属性失败$("a").attr("action", "addAttribute");//成功添加属性action="addAttribute"$("a").prop("action", "addAttribute");//添加action属性失败

总结

prop读取属性值：读取已赋值的固有属性会得到属性值，读取未赋值的固有属性会得到属性默认值，读取自定义属性时无论是否赋值均得到undefine。 
prop设置属性值：prop只能设置固有属性值。 
attr读取属性值：无论是固有属性还是自定义属性，attr只能读取元素中已有的属性值，读取元素中没有的属性值会返回undefine。 
attr设置属性值：attr可以对任意属性设置属性值。

以上がjsのpropとattrの違いを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。