집 > 기사 > 웹 프론트엔드 > .attr()과 .data()의 차이점

.attr()과 .data()의 차이점

php中世界最好的语言원래의: 2018-04-19 15:39:301660검색

이번에는 .attr()과 .data()의 차이점을 소개하겠습니다. .attr()과 .data()를 사용할 때 주의사항은 무엇인가요?

Jquery Object속성과 DOM 속성

간단한 예

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