【学习笔记】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"));//domaconsole.log("data:"+adom.data("name"));//name1</script>

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