집 > 기사 > 웹 프론트엔드 > jquery는 data() 요소에 데이터를 저장합니다.

jquery는 data() 요소에 데이터를 저장합니다.

无忌哥哥원래의: 2018-06-29 13:39:501997검색

요소에 데이터 저장: data()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.在元素中存储数据:data()</title>
</head>
<body>
<img src="../images/peter.jpg" width="200" alt="php中文网" title="朱老师" id="pic" data-job="php中文网朱老师">
</body>
</html>

data(): 요소에서 속성 이름이 data-로 시작하는 사용자 정의 데이터를 읽습니다. 이전 attr() 메서드를 사용하는 경우 data- 접두사

var res = $(&#39;#pic&#39;).data(&#39;job&#39;)

를 생략할 수 있습니다. 완전한 속성 이름을 작성해야 합니다

var res = $(&#39;#pic&#39;).attr(&#39;data-job&#39;)

data()도 자체 판독기와 설정기가 있는 메소드

$(&#39;#pic&#39;).data(&#39;data-course&#39;, &#39;php项目开发课程&#39;)

동적으로 설정된 사용자 정의 속성인 경우 접두사

var res = $(&#39;#pic&#39;).data(&#39;course&#39;)

를 생략하면 가져올 수 없습니다. 접두사를 추가하세요

var res = $(&#39;#pic&#39;).data(&#39;data-course&#39;)

data()는 요소의 기본 속성을 가져올 수 있나요? 읽을 수 없습니다.

var res = $(&#39;#pic&#39;).data(&#39;title&#39;)

하지만 제목 속성의 동적 설정을 지원하며 이는 스크립트에서만 사용하도록 제한됩니다.

var res = $(&#39;#pic&#39;).data(&#39;title&#39;,&#39;hellow&#39;)

이제 스크립트에서 읽을 수 있습니다. 제목 값이 변경되었습니다. 비록 이 값은 원래 alt 값과 다르지만

var res = $(&#39;#pic&#39;).data(&#39;title&#39;)

마찬가지로, data()에도 사용자 정의 또는 생성된 속성을 삭제하기 위한 해당 제거 데이터()가 있습니다

var res = $('#pic').removeData('title')  //仅删除临时创建的,原值不受影响
var res = $('#pic').removeData('data-course')  //仅删除临时创建的
var res = $(&#39;#pic&#39;).data(&#39;data-course&#39;)  //仅删除临时创建的

원래 태그가 함께 제공됩니다. 삭제할 수 없는 맞춤 속성

var res = $('#pic').removeData('data-job') 
var res = $(&#39;#pic&#39;).data(&#39;job&#39;)

콘솔에서 결과 보기

console.log(res)

위 내용은 jquery는 data() 요소에 데이터를 저장합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Vue 컴포넌트 옵션 소품 사용 소개다음 기사：Vue 컴포넌트 옵션 소품 사용 소개