Jquery에서 attr()과 prop()의 차이점은 무엇입니까?

jquery에서 attr()과 prop()의 차이점은 다음과 같습니다. attr 함수는 문서 노드의 속성에 대해 작동하고 설정된 속성 값은 문자열 유형만 될 수 있습니다. prop 함수는 문서 노드의 속성에 대해 작동합니다. Node.js 객체 및 설정된 속성 값은 배열 및 객체를 포함한 모든 유형이 될 수 있습니다.

환경:

이 문서는 모든 브랜드의 컴퓨터에 적용됩니다.

차이점 소개:

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

(추천 튜토리얼: jquery 동영상 튜토리얼)

구체적인 차이점은 다음과 같습니다.

1. 서로 다른 작업 객체

분명히 attr과 prop은 각각 attribute와 property라는 단어의 약어로, 둘 다 나타냅니다. "속성"을 의미합니다.

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

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// 这里的name、age是Person的property
var Person = { name: "小明", age: 18};
</script>

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

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

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

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

attr() 함수는 문서 노드의 속성에 대해 작동하므로 문자열 유형이 아닌 경우에만 속성 값 설정이 가능합니다. 유형이 있는 경우 해당 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() 함수를 사용해 보세요.

<button>按钮</button>
    <input type="checkbox" name="" id="" checked="checked">
    <script src="jquery.js"></script>
    <script>
        // $(&#39;button&#39;).on(&#39;click&#39;,function(){

        // });
        // var r = $(&#39;input&#39;);
        $(&#39;button&#39;).on(&#39;click&#39;,function(){
            console.log(11)
            if ($(&#39;input&#39;).prop(&#39;checked&#39;)) {
                $(&#39;input&#39;).prop(&#39;checked&#39;,false);
            }else{
                $(&#39;input&#39;).prop(&#39;checked&#39;,true);
            }
        })
    </script>
   // attr / prop
// attr ==> getAttribute() / setAttribute()
// 用于操作 自定义的属性，对于DOM对象自身的布尔值类型的属性，只能
// 通过这个两个方法来设置或者读取默认值，而不能动态改变值
// 
// prop ==> dom.checked = true;
// 对于 布尔值的属性（selected/checked/diabled） 都需要通过直接访问属性
// 方式来操作（点语法、[]）

네이티브 js는 일치하는 요소의 내부 html과 외부 html을 얻을 수 있다는 것을 모두 알고 있습니다. 네이티브 js의 dom 개체에는 다음 두 가지 속성이 있습니다

document.getElementById("linkType" ) .outerHTML;

jQuery를 사용하여 일치하는 요소(자체 요소의 HTML 포함)를 얻는 방법은 무엇입니까?

이 속성이 존재하므로 $("#linkType").prop("outerHTML")을 사용하여 이를 가져올 수 있습니다.

$("#linkType").prop("outerHTML",outerHTML로 할당할 수 있습니다. ) externalHTML의 내용을 변경하세요.

jQuery의 attr은 이 속성 값을 얻을 수 없다는 점에 주목할 필요가 있습니다.

관련 권장 사항: js 튜토리얼

위 내용은 Jquery에서 attr()과 prop()의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!