總結Jquery中獲取自定義屬性使用.attr()和.data()以及.prop()的區別
一、.attr()和.data()的區別：
.attr()和.data()本質上屬於DOM屬性和Jquery物件屬性的區別。
看一個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery中.attr和.data的區別</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 元素 中取屬性的值，即和檢視中標籤內的屬性值保持一致。
$.attr('data-foo')會從標籤內獲得data-foo屬性值；
$.attr('data-foo', 'world')會將字串'world'塞到標籤的'data-foo'屬性中；
$.data()是從 Jquery物件 中取值，由於物件屬性值儲存在記憶體中，因此可能和視圖裡的屬性值不一致的情況。
$.data('foo')會從 Jquery物件 內獲得foo的屬性值，不是從標籤內獲得data-foo屬性值；
$.data('foo', 'world')會將字串'world'塞到 Jquery物件 的'foo'屬性中，而不是塞到檢視標籤的data-foo屬性中。
總結：.attr()和.data()應該避免混合使用。
若是通過.attr()賦值，就要使用.attr()取值。
若是通過.data()賦值，就要通過.data()取值。
效能角度來說，建議使用.data()進行set和get操作，因為它僅僅修改的jquery物件的屬性值，沒有操作DOM。
二、prop和.attr()的區別
prop是該版本的jquery引入的。
區別：
- 對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
- 對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。
舉例說明：
<a href="http://www.baidu.com" target="_self" class="btn">百度</a>
<a>元素的DOM屬性有“href、target和class"，這些屬性就是<a>元素本身就帶有的屬 性，也是W3C標準裡就包含有這幾個屬性這些就叫做固有屬性。建議使用prop方法。
“action”屬性是 我們自己自定義上去的，<a>元素本身是沒有這個屬性的。這種就是自定義的DOM屬性。處理這些屬性時，建議使用attr方法。使用prop 方法取值和設定屬性值時，都會返回undefined值。
再舉一個例子：
像checkbox，radio和select這樣的元素，選中屬性對應“checked”和“selected”，這些也屬於固有屬性，因此需要使用prop方法去操作才能獲得正確的結果。
使用attr取值若沒有設定值會打印出undefined。