jQuery中的attr()與data()方法的區別

時間 2019-12-05

原文原文鏈接

在開發的過程當中，咱們能夠在html標籤中加入自定義屬性 data-xx 來存放咱們須要的數據，若是咱們想動態的添加data-xx屬性，在jQuery中有兩種方法可使用.data()，但他們又存在區別，若是使用不慎，還可能會形成意想不到的bug。javascript

<html>
<head>
  <meta charset="utf-8">
  <title>測試</title>
  </style>
</head>
<body>
  <div data-id="1234" id="app"></div>

  <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
  <script>
    var getAttr1 = $("#app").attr("data-id");
    var getData1 = $("#app").data("id");
    console.log(getAttr1); //1234
    console.log(getData1); //1234
    /*attr()設置*/
    $("#app").attr("data-id", "5678");
    var getAttr2 = $("#app").attr("data-id");
    var getData2 = $("#app").data("id");
    console.log(getAttr2); //5678
    console.log(getData2); //1234
    /*data()設置  注意要想出如下效果，先要註釋掉上邊attr()方法的代碼*/
    $("#app").data("id","5678");
    var getAttr3 = $("#app").attr("data-id");
    var getData3 = $("#app").data("id");
    console.log(getAttr3); //1234
    console.log(getData3); //5678
  </script>

</body>
</html>
複製代碼

注意要想出效果，先要註釋掉上邊attr()方法的代碼 出現上述問題的代碼是由於attr()與data()方法存在原理上的區別：css

一、attr()方法原理是改變DOM元素的值。

attr()方法直接改變DOM元素上的屬性值:html

/*data()設置*/
  $('#app').attr('data-id', '5678');
  var getAttr2 = $('#app').attr('data-id');
  var getData2 = $('#app').data('id');
  console.log(getAttr2); //5678
  console.log(getData2); //1234
複製代碼

二、data()方法原理是jquery對象的值。

data()方法不會直接改變DOM元素上的屬性值，咱們觀察元素髮現：java

/*data()設置*/
$('#app').data('id','5678');
var getAttr3 = $('#app').attr('data-id');
var getData3 = $('#app').data('id');
console.log(getAttr3); //1234
console.log(getData3); //5678
複製代碼