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是从属性对象中取值，属性对象中有多少属性，就能获取多少值，不需要在页面中显示定义。
  比如
  

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>

この例では、<

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"));

🎜🎜🎜 HTML 要素の固有属性を読み取ります (割り当てられていません)🎜🎜 異なる HTML タグの固有属性は、まったく同じではありません。 : チェックされた属性はチェックボックスのタグの固有プロパティですが、タグの固有プロパティではありません。 class 属性は a タグの固有属性ですが、要素内で値が割り当てられていない場合、attr() を使用して読み取ることができません。 🎜

<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 サイトの他の関連記事を参照してください。