【学习笔记】jQuery中的prop()、attr()、data()方法的对比

一、prop和attr对比
（1）prop：property指的是元素对象的属性如：className、nodeType、nodeName等
attr:attribute指的是元素标签的属性如：type、name、class等

$("input").attr("type") = "text";
$(input).prop("nodeName") = "input"; 

（2）在利用attr和prop对checked等属性操作
attr()返回的是字符串，prop返回的则是Boolean

<input type= "CheckBox" value="123" id="input" checked>
$("input").attr("checked") = "checked";
$(input).prop("checked") = true;

<input type= "CheckBox" value="123" id="input">
$("input").attr("checked") = undefined;
$(input).prop("checked") = false;

同时利用prop()才能对radio、checkBox等状态进行改变，如果同时它的返回值能正确对应元素的状态，所以在对这些元素的这些属性进行操作时做好是利用prop()。

二、attr()和data()对比
data主要是对HTML5中的自定义属性data-进行操作

<div data-role="page" data-last-value="43" data-hidden="true" data-options=‘{"name":"noahlu"}‘></div>

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "noahlu";

attr也可以获取到上面的属性，但是当利用data进行修改之后，利用attr是获取不到该属性的。

<a href="javascript:;" id="adom" data-name="doma"></a>
<script>
var adom = $("#adom");
adom.data("name","name1");
console.log("attr:"+adom.attr("data-name"));//doma
console.log("data:"+adom.data("name"));//name1
</script>

所以对于自定义的属性最好是利用data()进行操作