ホームページ > 記事 > ウェブフロントエンド > jQueryの.attr()と.data()の違い
$.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' 属性に詰め込まれます。
関連する推奨事項:
jQuery の attr() と prop() の違い
以上がjQueryの.attr()と.data()の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。