Rumah > Artikel > hujung hadapan web > Apakah perbezaan antara data() dan attr() dalam jquery

Apakah perbezaan antara data() dan attr() dalam jquery

青灯夜游asal: 2021-11-15 14:38:581972semak imbas

Perbezaan: "$.attr()" mengambil nilai atribut daripada elemen DOM setiap kali, iaitu, ia konsisten dengan nilai atribut dalam teg dalam paparan manakala "$.data() " mengambil nilai daripada Jquery Oleh kerana nilai atribut objek disimpan dalam ingatan, ia mungkin tidak konsisten dengan nilai atribut dalam paparan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

$.attr() dan $.data() pada asasnya tergolong dalam perbezaan antara DOM属性 dan Jquery对象属性.

Contoh mudah

<!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() mengambil nilai atribut daripada DOM元素 setiap kali, iaitu nilai atribut dalam teg dalam nilai atribut paparan kekal konsisten.
- $.attr('data-foo') akan mendapat nilai atribut data-foo daripada teg; ' data-foo', 'world') akan memasukkan rentetan 'world' ke dalam atribut 'data-foo' bagi teg; ( ) mengambil nilai daripada
  Memandangkan nilai atribut objek disimpan dalam ingatan, ia mungkin tidak konsisten dengan nilai atribut dalam paparan.
- $.data('foo') akan mendapat nilai atribut foo daripada
$.data('foo', 'world') akan memasukkan rentetan 'world' ke dalam atribut 'foo'
Jquery对象
- Menggabungkan kod dan penjelasan di atas, anda seharusnya dapat memahami perbezaan antara keduanya.
  Jquery对象Jadi $.attr() dan $.data() harus mengelakkan penggunaan bercampur, iaitu, dua situasi berikut harus dielakkan sebaik mungkin:
- Dengan $. attr() untuk menetapkan atribut, dan kemudian gunakan $.data() untuk mendapatkan nilai atribut; gunakan $.attr() Dapatkan nilai atribut. Jquery对象
Pada masa yang sama, dari perspektif prestasi, adalah disyorkan untuk menggunakan $.data() untuk set dan dapatkan operasi, kerana ia hanya mengubah suai nilai atribut

Tutorial video berkaitan yang disyorkan:

Tutorial jQuery

(Video)

Atas ialah kandungan terperinci Apakah perbezaan antara data() dan attr() dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery 字符串对象 dom

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Apakah gt jquery?Artikel seterusnya：Apakah gt jquery?

Artikel berkaitan

Lihat lagi