>웹 프론트엔드 >JS 튜토리얼 >jQuery $.data() 대 $.attr(): 언제 어느 것을 사용해야 할까요?

jQuery $.data() 대 $.attr(): 언제 어느 것을 사용해야 할까요?

DDD
DDD원래의
2024-12-16 18:33:12874검색

jQuery $.data() vs. $.attr(): When to Use Which?

jQuery 데이터와 속성: 차이점 이해

jQuery에서는 $.data와 $.attr을 모두 사용하여 DOM의 속성을 조작합니다. 강요. 그러나 목적은 서로 다르며 사용법과 동작이 다릅니다.

$.data 사용 시기

$.data는 주로 다음과 관련된 데이터를 저장하는 데 사용됩니다. jQuery 내부 캐시($.cache) 내의 DOM 요소입니다. 이 데이터는 요소 자체에 HTML 속성으로 저장되지 않습니다. 따라서 데이터 바인딩 또는 사용자 정의 스크립팅 목적으로 데이터를 지속적으로 저장해야 하는 경우 $.data를 선택하는 것이 좋습니다.

예:

<a>
$('#foo').data('myData', 'someValue');
// Gets the stored data
$('#foo').data('myData'); // outputs "someValue"

$.attr을 사용해야 하는 경우

$.attr, on 반면에 주로 HTML5 데이터 속성을 설정하거나 검색합니다. 이러한 데이터 속성은 DOM 요소에 속성으로 저장되며 추가 메타데이터 또는 콘텐츠를 제공하기 위한 것입니다.

예:

<a>
$('#foo').attr('data-attribute'); // outputs "myCoolValue"
$('#foo').attr('data-attribute', 'newValue'); // Sets the data-attribute to "newValue"

추가 고려 사항

  • $.data를 사용한 데이터 저장 복잡한 개체를 지원하는 반면 HTML 데이터 속성은 문자열만 포함할 수 있습니다.
  • $.data는 "true"를 부울로 변환하는 등 데이터를 검색할 때 값을 적절한 유형으로 자동 변환합니다.
  • $.attr은 데이터를 검색할 때 원래 데이터 유형을 유지합니다.
  • 혼란을 피하기 위해 다음과 같은 경우 camelCase 구문을 사용하는 것이 좋습니다. $.data와 함께 저장된 데이터에 액세스.
  • $.removeAttr을 사용하여 $.data와 직접적으로 동일하지 않은 데이터 속성을 제거할 수도 있습니다.

위 내용은 jQuery $.data() 대 $.attr(): 언제 어느 것을 사용해야 할까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.