data-*와 js 간의 상호 작용

이번에는 data-*와 js의 상호 작용에 대해 소개해 드리겠습니다. data-*와 js의 상호 작용에 대한 주의 사항은 무엇입니까?

HTML5새로운 속성 data-*

예제 작성

<p data-role="page"
     data-last-value="43"
     data-hidden="true"
     data-options=&#39;{"name":"John"}&#39;>
</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=&#39;{"name":"John"}&#39;>

걱정하지 마세요. 출력한 값

 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

H5의 서버 푸시 이벤트에 대한 자세한 설명

HTML5 자이로스코프를 기반으로 움직이는 애니메이션 효과를 구현

H5 캔버스에 스네이크 미니 게임 구현

위 내용은 data-*와 js 간의 상호 작용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!