jQuery에서 .attr()과 .data()의 차이점-JS 튜토리얼-php.cn

jQuery에서 .attr()과 .data()의 차이점

小云云

풀어 주다： 2017-12-29 11:20:35

원래의

1382명이 탐색했습니다.

$.attr() 및 $.data()는 본질적으로 DOM 속성과 Jquery 객체 속성의 차이점입니다. 예를 들어 jQuery에서 .attr()과 .data()의 차이점을 살펴보겠습니다.

$.attr()과 $.data()는 본질적으로 DOM 속성의 차이점입니다. 및 Jquery 객체 속성.

Jquery 객체 속성 및 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">
    var getAttr1 = $('#app').attr('data-foo');
    var getData1 = $('#app').data('foo');
    console.log('getAttr1: ' + getAttr1); //hello
    console.log('getData1: ' + getData1); //hello
    $('#app').attr('data-foo', 'world'); //$.attr 设置DOM元素属性值
    var getAttr2 = $('#app').attr('data-foo');
    var getData2 = $('#app').data('foo');
    console.log('getAttr2: ' + getAttr2); //world
    console.log('getData2: ' + getData2); //*** hello ***
    $('#app').data('foo', 'WORLD'); //$.data 设置DOM node属性值
    var getAttr3 = $('#app').attr('data-foo');
    var getData3 = $('#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')는 가져옵니다. 문자 'world' 문자열은 뷰 태그의 data-foo 속성 대신 Jquery 개체의 'foo' 속성에 채워집니다.

위의 코드와 설명을 결합하면 모두가 둘의 차이점을 이해할 수 있을 것입니다.

요약

그래서 $.attr()과 $.data()는 혼합 사용을 피해야 합니다. 즉, 다음 두 가지 상황은 최대한 피해야 합니다.

1. $.attr()을 통해 속성을 설정합니다. 그런 다음 $.data()를 사용하여 속성 값을 가져옵니다.

2. $.data()를 사용하여 속성을 설정한 다음 $.attr()을 사용하여 속성 값을 가져옵니다.

동시에 성능 관점에서 set 및 get 작업에는 $.data()를 사용하는 것이 좋습니다. 왜냐하면 Jquey 개체의 속성 값만 수정하고 추가 DOM 작업을 발생시키지 않기 때문입니다.