jquery dataプロパティattr vs data
20048 ワード
html 5のカスタムdataプロパティは、誰も知らないと信じています.必要なデータを指定した要素にバインドすることができます.そしてjquery設定でデータを取得するのは、楽しくてたまらないでしょう.要素の属性値を設定、取得するには、まずjqueryのことを思い浮かべます.attr()メソッドですが、jqueryにはもう一つあることを知っています.data()の方法.本人は以前ずっと萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌え萌えdata()メソッドは公式にもっとお勧めです(名前を見ると正規軍だと感じます).しかし、その後、本人がプロジェクトをする過程で、この2つの方法でdataの属性が異なることに気づいた(考えてみれば、同じなら、dataの毛を乾かす).くだらないことは言わないで、次は何かします.
このコードは簡単ではないかどうか説明します.attr()と.data()data属性を処理する際の違い:ここではdivに「data-my-value」属性を追加し、ページロード時にデータがサーバによって取得されることが多い.ここではDOMを構築する際に「data-my-value」を「サーバレンダリングデータ」に割り当てる方法でサーバデータレンダリングをシミュレートする.まず3、4ボタンをクリックすると、取得したデータはすべて「サーバレンダリングデータ」であることがわかります.何の違いもないようです.焦らないで、見続けてください. 次にブラウザデバッグツールを開き、div要素に注意して1ボタンをクリックすると、divの「data-my-value」が「attrで変更したデータ」に変わり、3ボタンをクリックすると、取得したデータは「attrで変更したデータ」になり、4ボタンをクリックすると、取得したデータは「サーバレンダリングデータ」になります.デバッガでは、要素の「data-my-value」属性が「attrで変更したデータ」であることを発見しました.なぜ通過したのか.data()メソッドで取得したデータは依然として「サーバレンダリングデータ」ですか?次の操作を見てみましょう. は2ボタンをクリックし、デバッガでdivの「data-my-value」属性データに変化がないことを発見し、3ボタンをクリックして取得したデータは「attrで変更したデータ」、4ボタンをクリックして取得したデータは「dataで変更したデータ」である.what?
問題があったら、まず公式マニュアルを調べなければなりません.マニュアルを調べることとStack Overflowで資料を調べることで、以下の点をまとめました(間違っているところがあれば、皆さんの指摘を歓迎します): jqueryはattrの直感的な設定、data属性値を取得し、dataはカスタム属性であるが、attr処理は処理標準要素と同じである. jqueryのdataメソッドは、要素に関連付けられたオブジェクトにデータを格納、要素の属性値を変更するのではなく、通過する.data()は(パラメータを追加しない)オブジェクトを得ることができます.上のdemoのボタン6をクリックすると、コンソールでオブジェクトを表示できます. ページがロードされると、jqueryはデフォルトでdata属性のデータをこの関連するオブジェクトに追加し、後でdata(key,value)法でデータを修正したり、新しいデータやオブジェクトを追加したりすることができます.もちろん、追加した新しいdata属性はDOMに反映されません(ボタン5をクリックして新しい属性を追加し、6をクリックして表示します).
とにかく、.attr()メソッド処理data属性は標準属性と同じである.使用するdata()メソッドの全過程においてjqueryは,DOMにおける要素自体の属性に関係なく,要素に関連付けられたこのオブジェクトを操作し続けた.
文の中には間違っているところがあるので、皆さんのご指摘を歓迎します.
参照先:http://api.jquery.com/attr/https://api.jquery.com/data/https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attributehttps://stackoverflow.com/questions/7261619/jquery-data-vs-attr
1 <html>
2 <head>
3 <meta charset="UTF-8">
4 <script src="https://code.jquery.com/jquery-1.11.3.min.js">script>
5
6 <script>
7 $(function(){
8 $("#btn1").click(function(){
9 $("div").attr("data-my-value", " attr ");
10 $("p").text(" attr ");
11 });
12 $("#btn2").click(function(){
13 $("div").data("myValue", " data ");
14 $("p").text(" data ");
15 });
16 $("#btn3").click(function(){
17 var v = $("div").attr("data-my-value");
18 $("p").text(" attr ："+v);
19 });
20 $("#btn4").click(function(){
21 var v = $("div").data("myValue");
22 $("p").text(" data ："+v);
23 });
24 $("#btn5").click(function(){
25 $("div").data("person", {age:12, name:"wang"});
26 $("p").text(" data person ");
27 });
28 $("#btn6").click(function(){
29 console.log($("div").data());
30 });
31 });
32 script>
33 head>
34
35 <body>
36 <button id="btn1">1. attr button>
37 <button id="btn2">2. data button>
38 <button id="btn3">3. attr button>
39 <button id="btn4">4. data button>
40 <button id="btn5">5. data person button>
41 <button id="btn6">6. databutton>
42 <div data-my-value=" ">div>
43 <p>p>
44 body>
45 html>このコードは簡単ではないかどうか説明します.attr()と.data()data属性を処理する際の違い:ここではdivに「data-my-value」属性を追加し、ページロード時にデータがサーバによって取得されることが多い.ここではDOMを構築する際に「data-my-value」を「サーバレンダリングデータ」に割り当てる方法でサーバデータレンダリングをシミュレートする.
問題があったら、まず公式マニュアルを調べなければなりません.マニュアルを調べることとStack Overflowで資料を調べることで、以下の点をまとめました(間違っているところがあれば、皆さんの指摘を歓迎します):
とにかく、.attr()メソッド処理data属性は標準属性と同じである.使用するdata()メソッドの全過程においてjqueryは,DOMにおける要素自体の属性に関係なく,要素に関連付けられたこのオブジェクトを操作し続けた.
文の中には間違っているところがあるので、皆さんのご指摘を歓迎します.
参照先:http://api.jquery.com/attr/https://api.jquery.com/data/https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attributehttps://stackoverflow.com/questions/7261619/jquery-data-vs-attr