.attr()과 .data()의 차이점
- php中世界最好的语言원래의
- 2018-04-19 15:39:301704검색
이번에는 .attr()과 .data()의 차이점을 소개하겠습니다. .attr()과 .data()를 사용할 때 주의사항은 무엇인가요?
간단한 예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery中.attr和.data的区别</title>
</head>
<body>
<p id="app"data-foo="hello"></p>
</body>
<script type="text/javascript"src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
vargetAttr1 = $('#app').attr('data-foo');
vargetData1 = $('#app').data('foo');
console.log('getAttr1: '+ getAttr1);//hello
console.log('getData1: '+ getData1);//hello
$('#app').attr('data-foo','world');//$.attr 设置DOM元素属性值
vargetAttr2 = $('#app').attr('data-foo');
vargetData2 = $('#app').data('foo');
console.log('getAttr2: '+ getAttr2);//world
console.log('getData2: '+ getData2);//*** hello ***
$('#app').data('foo','WORLD');//$.data 设置DOM node属性值
vargetAttr3 = $('#app').attr('data-foo');
vargetData3 = $('#app').data('foo');
console.log('getAttr3: '+ getAttr3);//world
console.log('getData3: '+ getData3);//*** WORLD ***
</script>
</html>
• $.attr()은 매번 DOM 요소에서 속성 값을 가져옵니다. 즉, 뷰에 있는 태그의 속성 값과 일치합니다. •$.attr('data-foo')는 태그에서 data-foo 속성 값을 가져옵니다. •$.attr('data-foo', 'world')는
문자열'world'를 태그의 'data-foo' 속성 에 삽입합니다. •$.data()는 Jquery 객체에서 값을 가져옵니다. 객체 속성 값이 메모리에 저장되므로 뷰의 속성 값과 일치하지 않을 수 있습니다. •$.data('foo')는 태그에서 data-foo 속성 값을 가져오는 것이 아니라 Jquery 개체에서 foo 속성 값을 가져옵니다. •$.data('foo', 'world')는 뷰 태그의 data-foo 속성 대신 Jquery 객체의 'foo' 속성에 'world' 문자열을 삽입합니다.
위의 코드와 설명을 결합하면 누구나 이 둘의 차이점을 이해할 수 있을 것입니다.
요약
따라서 $.attr()과 $.data()는 혼합 사용을 피해야 합니다. 즉, 다음 두 가지 상황은 최대한 피해야 합니다. 1. $.attr()을 사용하여 속성을 설정한 다음 $.data()를 사용하여 속성 값을 가져옵니다. 2. $.data()를 사용하여 속성을 설정한 다음 $.attr()을 사용하여 속성 값을 가져옵니다.
동시에 성능 관점에서 set 및 get 작업에 $.data()를 사용하는 것이 좋습니다. 왜냐하면 Jquey 개체의 속성 값만 수정하고 추가
DOM 작업을 발생시키지 않기 때문입니다.
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
jQuery는 마우스 휠로 이미지 확대/축소 크기를 작동시킵니다.jQuery는 웹 페이지 하단으로 이동할지 여부를 결정합니다
위 내용은 .attr()과 .data()의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!