이번에는 data-*와 js의 상호 작용에 대해 소개해 드리겠습니다. data-*와 js의 상호 작용에 대한 주의 사항은 무엇입니까?
예제 작성
<p data-role="page"
data-last-value="43"
data-hidden="true"
data-options='{"name":"John"}'>
</p>
1. 정의:
data-* 속성은 페이지 또는 애플리케이션에 대한 개인 사용자 정의 데이터를 저장하는 데 사용됩니다.
data-* 속성을 사용하면 모든 HTML 요소에 사용자 정의 데이터 속성을 삽입할 수 있습니다.
2. 참고:
data-* 속성에는 두 부분이 포함됩니다.
속성 이름에는 대문자가 포함되어서는 안 되며 접두사 "data-" 뒤에 문자가 하나 이상 있어야 합니다.
속성 값은 어떤 문자열
data-* 속성과 jQueryInteraction
data-* 속성 값을 얻으려면 jQuery에서 .data() 함수를 사용하세요.
console.log($("p").data('lastValue')); //输出的值为:43
console.log($("p").data('role')); //输出的值为:page
참고 사항
data-**속성 이름 형식 카멜 대소문자 명명 다시 쓰기
data-attribute는 이 데이터 속성을 처음 사용한 후에는 더 이상 액세스하거나 변경되지 않습니다(모든 데이터 값은 jQuery에 내부적으로 저장됩니다. )
데모:
console.log($("p").data('lastValue')); //输出的值为:43
$('p').data('lastValue',44); //设置data-last-value=44
$('p')[2] //假设这是文档中的第3个p,我们输出这个dom
//输出:<p data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>
걱정하지 마세요. 출력한 값
console.log($("p").data('lastValue')); //输出的值为:44
은 jQuery에 저장됩니다.
data-* 속성 값을 얻으려면 jQuery에서 .attr() 함수를 사용하세요.
console.log($('p').attr('data-role')); //输出的值为:page
console.log($('p').attr('data-last-value')); //输出的值为:43
사용 데이터를 설정하기 위한 jQuery의 .attr() 함수 -*속성 값
$('p').attr('data-emp',{'name':'zhangsan','age':23}); //给p添加一个data-emp的属性,属性值为一个json对象
참고: 대시는 카멜 케이스 이름 지정
이 문서의 케이스를 읽은 후 해당 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
HTML5 자이로스코프를 기반으로 움직이는 애니메이션 효과를 구현
위 내용은 data-*와 js 간의 상호 작용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!