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。

c6db19a8c5571531fae583c4104c57b0에 체크된 키워드가 없습니다. <code style="font-size:14px;line-height:22px;padding:4px 2px 0px;">3973a548d6b6c02de6ba3f6191e59f0a中没有checked关键字。

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

prop는 속성 객체에서 값을 가져옵니다. 속성 객체에 있는 속성만큼 많은 값을 얻을 수 있습니다. 페이지에 정의를 표시할 필요가 없습니다.

예를 들어

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

• 여기에서 문제가 발생합니다.

  만약 사용자 정의 속성인 경우 속성 개체에 해당 속성이 없습니다. 따라서 prop은 정의되지 않은 상태를 반환합니다. 하지만 이 속성은 페이지에서 검색할 수 있으므로 attr을 얻을 수 있습니다.

두 번째로

attr은 attr('name', 'value')에 의해 변경되지 않는 한 초기화 값을 가져옵니다. prop 속성 값은 checkbox와 같이 동적입니다. 선택한 후에는 check가 true가 되고 prop 값도 변경됩니다.

• 요약
• 어림칙은 다음과 같습니다.

HTML 요소 자체에 내재된 속성의 경우 처리 시 prop 메서드를 사용하세요. 빠르고 정확합니다.

HTML 요소의 사용자 정의된 DOM 속성을 처리하려면 attr 메소드를 사용하세요.

위 설명이 다소 모호할 수 있으니 몇 가지 예를 들어보세요.

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

이 예에서 4f3caf3ce92c1d2ea06394e82d0a43be 요소의 DOM 속성에는 id, href 및 target이 포함됩니다. W3C 표준 또는 IDE에서 지능적으로 프롬프트할 수 있는 속성을 고유 속성이라고 합니다. 이러한 속성을 다룰 때는 prop을 사용하는 것이 좋습니다.

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

이 예에서 d7e954fb0bcdf2aed76b42616b0bb342 요소의 DOM 속성에는 id, href, target 및 uuu가 포함되며, 처음 세 개는 고유 속성이고 마지막 "uuu" 속성은 c99915f525000f32f564c9e9eb12ba8a요소 자체에는 이 속성이 없으며 이는 맞춤 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!