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

jQuery Data vs Attr

데이터 속성 작업 시 $.data와 $라는 두 가지 기본 jQuery 메서드를 사용할 수 있습니다. 속성 효과적인 데이터 저장 및 검색을 위해서는 차이점을 이해하는 것이 중요합니다.

HTML5 데이터 속성의 $.attr

다음과 같은 HTML5 데이터 속성을 다루는 경우 <a>로서 적절한 메소드는 $.attr입니다. 이를 통해 요소의 HTML에서 직접 데이터 속성을 읽고 쓸 수 있습니다. 예를 들면 다음과 같습니다.

$('#foo').attr('data-foo'); // Outputs: "bar"
$('#foo').attr('data-foo', 'baz'); // Updates the attribute to "baz"

임의 데이터 저장을 위한 $.data

반대로, $.data를 사용하면 특정 데이터와 관련 없이 요소에 임의의 데이터를 저장할 수 있습니다. 속성. 이 데이터는 HTML이 아닌 jQuery 캐시를 통해 액세스할 수 있습니다. 위젯 인스턴스화 및 복잡한 개체 저장에 자주 사용됩니다. 예:

$('#foo').data('myData', {key: 'value'});
$('#foo').data('myData').key; // Outputs: "value"

$.data의 하이픈 및 CamelCase

$.data를 사용할 때 하이픈으로 연결된 데이터 속성 이름은 자동으로 camelCase로 변환되지만 원본은 CamelCase로 자동 변환됩니다. 하이픈 형식은 HTML에서 계속 사용할 수 있습니다. 그러나 $.data()를 통한 액세스에는 JavaScript에서 하이픈을 사용하지 않는 것이 좋습니다.

$.data의 자동 캐스팅

$.data의 또 다른 유용한 기능 ()는 값을 자동으로 시전하는 기능입니다. 값이 인식된 패턴과 일치하면 적절한 데이터 유형으로 변환됩니다. 이 단순화된 패턴은 다음과 같습니다.

<a>

다음과 같이 액세스할 수 있습니다.

$('#foo').data('num'); // Outputs: 15
$('#foo').data('bool'); // Outputs: true
$('#foo').data('json'); // Outputs: {fizz: ['buzz']}

$.attr 대 $.data를 사용하는 경우

일반적으로 , HTML과 직접적인 상호 작용이 필요한 HTML5 데이터 속성에 액세스하려면 $.attr을 사용하세요. 특히 복잡한 개체로 작업할 때 HTML을 통해 액세스할 수 없는 임의의 데이터를 저장하려면 $.data를 사용하세요.

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