jqueryのdata()とattr()の違いは何ですか-フロントエンドQ&A-php.cn

jqueryのdata()とattr()の違いは何ですか

青灯夜游

リリース： 2021-11-15 14:38:58

オリジナル

1980 人が閲覧しました

違い: 「$.attr()」は毎回 DOM 要素から属性値を取得します。つまり、ビュー内のタグの属性値と一致しますが、「$.data()」は「Jqueryから値を取得します」オブジェクトから値を取得する場合、オブジェクトの属性値はメモリ上に格納されるため、必ずしもビュー内の属性値と一致するとは限りません。

jqueryのdata()とattr()の違いは何ですか

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

$.attr() と $.data() は本質的に DOM 属性 と Jquery オブジェクト属性 に属します違い。

簡単な例

<!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 = $(&#39;#app&#39;).attr(&#39;data-foo&#39;);
        var getData1 = $(&#39;#app&#39;).data(&#39;foo&#39;);
        console.log(&#39;getAttr1: &#39; + getAttr1); //hello
        console.log(&#39;getData1: &#39; + getData1); //hello
 
        $(&#39;#app&#39;).attr(&#39;data-foo&#39;, &#39;world&#39;); //$.attr 设置DOM元素属性值
        var getAttr2 = $(&#39;#app&#39;).attr(&#39;data-foo&#39;);
        var getData2 = $(&#39;#app&#39;).data(&#39;foo&#39;);
        console.log(&#39;getAttr2: &#39; + getAttr2); //world
        console.log(&#39;getData2: &#39; + getData2); //*** hello ***
 
        $(&#39;#app&#39;).data(&#39;foo&#39;, &#39;WORLD&#39;); //$.data 设置DOM node属性值
        var getAttr3 = $(&#39;#app&#39;).attr(&#39;data-foo&#39;);
        var getData3 = $(&#39;#app&#39;).data(&#39;foo&#39;);
        console.log(&#39;getAttr3: &#39; + getAttr3); //world
        console.log(&#39;getData3: &#39; + 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' を
  Jquery オブジェクト の 'foo' 属性に詰め込みます。 view タグの data-foo 属性。

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

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

$.data() を使用して属性を設定し、その後$.attr() を使用して属性値を取得します。
同時に、パフォーマンスの観点から、set および get 操作には $.data() を使用することをお勧めします。これは、
の属性値のみを変更するためです。 Jquey オブジェクト
は、追加の DOM 操作を引き起こしません。

推奨される関連ビデオチュートリアル:

jQuery チュートリアル (ビデオ)

以上がjqueryのdata()とattr()の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。