jQuery .prop（）返回undefined，而.attr（）按预期工作 – 数据 – *

我只想从两个元素中获取几个属性。 从input元素获取属性value按预期工作。 问题是从button元素获取属性data-detail属性。 它在使用.prop()时返回undefined ，但在使用.attr()时按预期工作。

谁能解释我目睹的这种奇怪的行为？

HTML

 
 First name 
 Edit Save Close 
   

JS

 $(".saveBtn").on("click", function() { var saveBtn = $(this); // The following statement yields undefined. When using .attr() it works as expected. var detail = saveBtn.prop("data-detail"); var relevantInput = saveBtn.parent().next(); // The following statement works as expected. var value = relevantInput.prop("value"); // ... }); 

Answer 1

那是因为HTML元素上没有data-detail 属性 。

以下是.data（） ,. prop（）和.attr（）的快速解释：

DOM元素是一个对象 ，它具有methods和properties （来自DOM ）和attributes （来自呈现的HTML ）。 其中一些properties通过properties获得initial value
id->id, class->className, title->title, style->style etc.

考虑这个元素：

以下结果将是：

 $('input').prop('id'); // => " "-empty string, property id exist on the element (defined by DOM) , but is not set. $('input').attr('id');// => undefined - doesn't exist. 

---

如果您执行以下操作：

 $('input').attr('id',"someID"); $('input').prop('id'); // => "someID" $('input').attr('id'); // => "someID" 

并且：

 $('input').prop('id',"someOtherID"); $('input').prop('id');// => "someOtherID" $('input').attr('id');// => "someOtherID" 

因此，某些属性和属性具有1：1映射 。 （改变支柱的attr结果变化，反之亦然）。

---

请考虑以下内容：

 $('input').prop('value'); // => "someValue" $('input').val(); // => "someValue" $('input').attr('value'); // => "someValue" 

如果你这样做：

 $('input').prop('value','newVal'); // or $('input').val('newVal'); $('input').prop('value'); // => "newVal" -value of the property $('input').val(); // => "newVal" -value of the property $('input').attr('value'); // => "someValue" -value of the attr didn't change, since in this case it is not 1:1 mapping (change of the prop value doesn't reflect to the attribute value). 

---

.data（）的情况

1）如何获得：

–请记住， attribute name是data-* ， property name是dataset ，因此：

  $('input')[0].dataset; //=> [object DOMStringMap] { detail: "somedata"} $('input')[0].dataset.detail; // => "somedata" $('input').prop('dataset'); //=>[object DOMStringMap] { detail: "somedata"} $('input').prop('dataset').detail; // => "somedata" $('input').data('detail'); // => "somedata" $('input').attr('data-detail'); // => "somedata" 

2）如何设置：

I） $('input').prop('dataset').detail='newData';

  $('input').prop('dataset'); //=> [object DOMStringMap] { detail: "newData"} $('input').prop('dataset').detail; // => "newData" $('input').attr('data-detail'); // => "newData" $('input').data('detail'); // => "newData" 

II） $('input').attr('data-detail','newData');

  $('input').prop('dataset'); //=> [object DOMStringMap] { detail: "newData"} $('input').prop('dataset').detail; // => "newData" $('input').attr('data-detail'); // => "newData" $('input').data('detail'); // => "newData" 

所以你可以看到这里是1：1映射，attr变化反映了prop，反之亦然。

但检查第三种方式：

III） $('input').data('detail','newData');

  $('input').prop('dataset'); // => [object DOMStringMap] { detail: "somedata"} $('input').prop('dataset').detail; // => "somedata" $('input').attr('data-detail'); // => "somedata" $('input').data('detail'); // => "newData" <-----****** 

那么，这里发生了什么？

$(elem).data(key, value)不会更改元素的HTML5 data-*属性。 它在内部将其值存储在$.cache 。

因此，对于获取data-* .data()永远不会出错：

 $(".saveBtn").on("click", function() { var saveBtn = $(this); var detail = saveBtn.data("detail"); var relevantInput = saveBtn.parent().next(); var value = relevantInput.prop("value"); });