jQueryの.attr()と.data()の違い-jsチュートリアル-php.cn

jQueryの.attr()と.data()の違い

小云云

リリース： 2017-12-29 11:20:35

オリジナル

1368 人が閲覧しました

$.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' をtag 'data-foo' 属性内;

•$.data() は Jquery オブジェクトから値を取得します。オブジェクトの属性値はメモリに保存されるため、ビュー内の属性値と一致しない可能性があります。 •$.data('foo') は、タグからの data-foo 属性値ではなく、Jquery オブジェクトから foo の属性値を取得します。文字列 'world' は、view タグの data-foo 属性の代わりに、Jquery オブジェクトの 'foo' 属性に詰め込まれます。

上記のコードと説明を組み合わせると、誰もが 2 つの違いを理解できるはずです。

まとめ

したがって、$.attr() と $.data() は混合使用を避ける必要があります。つまり、次の 2 つの状況は可能な限り回避する必要があります:

1. $.attr() を通じて属性を設定します。 $.data() を使用して属性値を取得します。

2. $.data() を使用して属性を設定し、$.attr() を使用して属性値を取得します。

同時に、パフォーマンスの観点から、set および get 操作には $.data() を使用することをお勧めします。これは、Jquey オブジェクトの属性値を変更するだけであり、追加の DOM 操作は発生しないためです。