jQuery中.attr()和.data()的差別-js教程-PHP中文網

首頁

web前端

js教程

jQuery中.attr()和.data()的差別

Dec 29, 2017 am 11:20 AM

jquery

$.attr()和$.data()本質上屬於 DOM屬性和 Jquery物件屬性的區別。下面透過一個範例來跟大家介紹jQuery中.attr()和.data()的區別，一起看看吧

$.attr()和$.data()本質上屬於DOM屬性和Jquery對象屬性的區別。

Jquery物件屬性和DOM屬性

一個簡單的範例

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;Jquery中.attr和.data的区别&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p id=&quot;app&quot; data-foo=&quot;hello&quot;&gt;&lt;/p&gt;
  &lt;/body&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    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 ***
  &lt;/script&gt;
&lt;/html&gt;