jquery中data()和attr()的區(qū)別有哪些

本篇內(nèi)容介紹了“jquery中data()和attr()的區(qū)別有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、重慶小程序開發(fā)公司、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了井陘免費建站歡迎大家使用！

區(qū)別：“$.attr()”每次都從DOM元素中取屬性的值，即和視圖中標簽內(nèi)的屬性值保持一致；而“$.data()”是從Jquery對象中取值，由于對象屬性值保存在內(nèi)存中，和視圖中的屬性值不一定一致。

jquery中data()和attr()的區(qū)別有哪些

本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。

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

一個簡單的例子

<!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 設置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元素中取屬性的值，即和視圖中標簽內(nèi)的屬性值保持一致。

    • $.attr('data-foo')會從標簽內(nèi)獲得data-foo屬性值；

    • $.attr('data-foo', 'world')會將字符串'world'塞到標簽的'data-foo'屬性中；

  • $.data()是從Jquery對象中取值，由于對象屬性值保存在內(nèi)存中，因此可能和視圖里的屬性值不一致的情況。

    • $.data('foo')會從Jquery對象內(nèi)獲得foo的屬性值，不是從標簽內(nèi)獲得data-foo屬性值；

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

結合上面代碼和解釋，大家應該能夠理解兩者的區(qū)別。

所以$.attr()和$.data()應避免混合用，也就是應該盡量避免如下兩種情況的出現(xiàn)：

  • 通過$.attr()來進行set屬性，然后通過$.data()進行get屬性值；

  • 通過$.data()來進行set屬性，然后通過$.attr()進行get屬性值。

同時從性能的角度來說，建議使用$.data()來進行set和get操作，因為它僅僅修改的Jquey對象的屬性值，不會引起額外的DOM操作。

“jquery中data()和attr()的區(qū)別有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

當前標題：jquery中data()和attr()的區(qū)別有哪些
鏈接URL：http://muchs.cn/article4/ghegoe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、面包屑導航、網(wǎng)站設計、云服務器、網(wǎng)頁設計公司、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設