【學習筆記】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") === ;
$("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()進行操作