溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery中.attr()與.data()有什么區(qū)別

發(fā)布時(shí)間：2021-02-11 08:57:33 來(lái)源：億速云 閱讀：174 作者：Leah 欄目：web開發(fā)

jQuery中.attr()與.data()有什么區(qū)別？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

$.attr()和$.data()本質(zhì)上屬于 DOM屬性 和 Jquery對(duì)象屬性 的區(qū)別。

Jquery對(duì)象屬性和DOM屬性

一個(gè)簡(jiǎn)單的例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jquery中.attr和.data的區(qū)別</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 設(shè)置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 設(shè)置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 元素 中取屬性的值，即和視圖中標(biāo)簽內(nèi)的屬性值保持一致。 ?$.attr('data-foo')會(huì)從標(biāo)簽內(nèi)獲得data-foo屬性值；

?$.attr('data-foo', 'world')會(huì)將字符串'world'塞到標(biāo)簽的'data-foo'屬性中；

?$.data()是從 Jquery對(duì)象 中取值，由于對(duì)象屬性值保存在內(nèi)存中，因此可能和視圖里的屬性值不一致的情況。 ?$.data('foo')會(huì)從 Jquery對(duì)象 內(nèi)獲得foo的屬性值，不是從標(biāo)簽內(nèi)獲得data-foo屬性值；

?$.data('foo', 'world')會(huì)將字符串'world'塞到 Jquery對(duì)象 的'foo'屬性中，而不是塞到視圖標(biāo)簽的data-foo屬性中。

關(guān)于jQuery中.attr()與.data()有什么區(qū)別問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手