ホームページ > 記事 > ウェブフロントエンド > jqueryのdata()とattr()の違いは何ですか
違い: 「$.attr()」は毎回 DOM 要素から属性値を取得します。つまり、ビュー内のタグの属性値と一致しますが、「$.data()」は「Jqueryから値を取得します」 オブジェクトから値を取得する場合、オブジェクトの属性値はメモリ上に格納されるため、必ずしもビュー内の属性値と一致するとは限りません。
このチュートリアルの動作環境: 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 = $('#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 の属性値を取得します。
Jquery オブジェクト の 'foo' 属性に詰め込みます。 view タグの data-foo 属性。
の属性値のみを変更するためです。 Jquey オブジェクト
は、追加の DOM 操作を引き起こしません。jQuery チュートリアル (ビデオ)
以上がjqueryのdata()とattr()の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。