예제와 사용법을 통해 jquery의 attr과 prop의 차이점에 대한 자세한 설명

jquery 상위 버전에 prop 메서드가 도입된 후 언제 prop을 사용해야 합니까? attr은 언제 사용하나요? 둘 사이의 차이점은 무엇입니까? 이러한 문제가 발생합니다.

둘의 차이점에 대한 답변이 온라인에 많이 있습니다. 다음은 매우 간단한 경험입니다.

HTML 요소의 고유한 속성을 처리할 때 prop 메서드를 사용하세요.

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

jQuery에서는 attr() 함수와 prop() 함수 모두 지정된 속성을 설정하거나 가져오는 데 사용되며 해당 매개변수와 사용법은 거의 동일합니다.

하지만 이 두 기능의 용도는 동일하지 않습니다. 이 두 기능의 차이점을 자세히 소개하겠습니다.

1. 작업 개체가 다릅니다

분명히 attr과 prop은 각각 attribute와 property라는 단어의 약어이며 둘 다 "속성"을 의미합니다.

그러나 jQuery에서는 속성과 속성이 서로 다른 개념입니다. Attribute는 HTML document 노드의 속성을 나타내고, property는 JS 객체의 속성을 나타냅니다.

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
// 这里的name、age、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "//m.sbmmt.com/" };
</script>

jQuery에서 prop() 함수의 설계 목표는 지정된 DOM 요소(JS 객체, 요소 유형 참조)에 속성(property)을 설정하거나 가져오는 것입니다. attr() 함수의 설계 목표는 다음과 같습니다. 지정된 DOM 요소에 해당하는 문서 노드의 속성을 설정하거나 가져오는 것입니다.

<!-- attr()函数针对的是该文档节点的attribute -->
<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
// prop()函数针对的是该DOM元素(msg)自身的property
var msg = document.getElementById("message");
var $msg = $(msg);
</script>

물론, jQuery의 기본 구현에서 attr() 및 prop() 함수의 함수는 JS 기본 요소 개체(예: 위 코드의 msg)를 통해 구현됩니다. attr() 함수는 주로 Element 객체의 getAttribute() 및 setAttribute() 메서드에 의존합니다. prop() 함수는 주로 JS의 기본 객체 속성 획득 및 설정 방법에 의존합니다.

<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);
/* *** attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value ) *** */
// 相当于 msg.setAttribute("data_id", 145);
$msg.attr("data_id", 145);
// 相当于 msg.getAttribute("data_id");
var dataId = $msg.attr("data_id"); // 145
/* *** prop()依赖的是JS原生的 element[property] 和 element[property] = value; *** */
// 相当于 msg["pid"] = "pid值";
$msg.prop("pid", "pid值");
// 相当于 msg["pid"];
var testProp = $msg.prop("pid"); // pid值
</script>

물론, jQuery는 이러한 작업을 캡슐화하여 작업을 더 편리하게 만들고(예: 개체 형태로 동시에 여러 속성 설정) 브라우저 간 호환성을 달성합니다.

또한 prop()은 요소 노드의 속성이 아닌 DOM 요소의 속성을 대상으로 합니다. 그러나 DOM 요소의 일부 속성을 변경하면 요소 노드의 해당 속성에도 영향을 미칩니다. 예를 들어 속성의 id는 속성의 id에 해당하고 속성의 className은 속성의 클래스에 해당합니다.

<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);
document.writeln( $msg.attr("class") ); // test
$msg.prop("className", "newTest");
// 修改className(property)导致class(attitude)也随之更改
document.writeln( $msg.attr("class") ); // newTest
</script>

2. 다양한 애플리케이션 버전

attr()은 jQuery 버전 1.0에 존재하는 함수이고 prop()은 jQuery 버전 1.6의 새로운 함수입니다. 1.6 이전에는 1.6 이상 버전에서만 attr() 함수를 사용할 수 있었으며 실제 필요에 따라 해당 함수를 선택할 수 있다는 것은 의심의 여지가 없습니다.

3. 설정에 사용되는 속성 값의 유형이 다릅니다

attr() 함수는 문서 노드의 속성에 대해 작동하므로 속성 값 세트는 그렇지 않은 경우에만 string 유형일 수 있습니다. 문자열 유형인 경우에도 호출됩니다. toString() 메소드는 이를 문자열 유형으로 변환합니다.

prop() 함수는 JS 객체의 속성에 대해 작동하므로 설정된 속성 값은 배열, 객체를 포함한 모든 유형이 될 수 있습니다.

4. 기타 세부사항

jQuery 1.6 이전에는 attr() 함수만 사용할 수 있었습니다. 이 함수는 속성을 설정하고 가져오는 것뿐만 아니라 속성을 설정하고 가져오는 역할도 담당했습니다. 예를 들어 jQuery 1.6 이전에는 attr()이 tagName, className, nodeName, nodeType 등과 같은 DOM 요소의 속성을 설정하거나 가져올 수도 있었습니다.

jQuery 1.6에 prop() 함수가 추가되고 속성을 설정하거나 가져오는 데 사용되기 전까지 attr()은 속성을 설정하고 가져오는 데만 사용되었습니다.

또한 양식 요소의 확인됨, 선택됨, 비활성화됨 및 기타 속성에 대해 jQuery 1.6 이전에는 attr()이 이러한 속성의 반환 값을 부울 유형으로 얻었습니다. 선택(또는 비활성화)된 경우 true를 반환합니다. , 그렇지 않으면 false를 반환합니다.

그러나 1.6부터는 attr()을 사용하여 이러한 속성의 반환 값을 문자열 유형으로 가져옵니다. 선택(또는 비활성화)되면 선택됨, 선택됨 또는 비활성화됨을 반환합니다. 즉, 요소 ​​노드는 이 속성이 없음)은 정의되지 않음을 반환합니다. 또한 일부 버전에서는 이러한 속성 값이 문서가 로드될 때 초기 상태 값을 나타내므로 나중에 해당 요소의 선택(또는 비활성화) 상태가 변경되더라도 해당 속성 값은 변경되지 않습니다.

jQuery는 속성의 선택, 선택 및 비활성화가 속성의 초기 상태 값을 나타내고 속성의 선택, 선택 및 비활성화가 속성의 실시간 상태 값(값은 true 또는 false)을 나타낸다고 믿기 때문입니다.

따라서 jQuery 1.6 이상 버전에서는 prop() 함수를 사용하여 확인, 선택, 비활성화 및 기타 속성을 설정하거나 가져옵니다. prop()으로 구현할 수 있는 다른 작업의 경우 prop() 함수를 사용해 보세요.

위 내용은 예제와 사용법을 통해 jquery의 attr과 prop의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!