jquery升级到高版本之后新增了prop方法
平时我们取html元素上的值都使用的是attr方法
取dom元素属性直接获取dom元素然后使用的属性
1.attr
attr平时用的很多，对应的是原生js的getAttribute和setAttribute；
按照我的理解，凡是你在html元素上能看到的属性都可以使用attr去获取和设置
<a id="test" name="test" href="#" data-action="action" value="aaa" >
$("#a").attr("id");
$("#a").attr("name");
$("#a").attr("href");
$("#a").attr("data-action");
$("#a").attr("value");
2.prop
prop反映的是dom对象的属性，所有attr属性在dom属性里都有对应的数据
多数情况下prop和attr能返回同样的值
有一个说法prop属性是attr属性通过某种逻辑计算后的结果
最明显的例子就是checkbox
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
$("input").attr('checked'); //checked
$("input").prop('checked');//true/false
3.同名属性
html元素和dom元素上会出现同名参数的情况
例如：
id
该参数在html上和dom上是一致的
document.getElementById("bbb").id="aaa";
document.getElementById("bbb").setAttribute("id","aaa");
其最终结果是一变都变，但是这是特例
name
document.getElementById("bbb").name="1111111"
document.getElementById("bbb").setAttribute("name","2222222")
console.log(document.getElementById("bbb").name)//1111111
虽然同名，但是不是一个属性，存储的位置不同
attr相关连的会显示在html上，直接属性不会
大多数新增属性都会是这个特性（原dom对象上没有的属性）
value
这个属性也有点特殊
<input id="aaa" value="1">
console.log($("#aaa").val()) //1
console.log($("#aaa").prop("value")) //1
$("#aaa").val("2")
console.log($("#aaa").val()) //2
$("#aaa").attr("value",3)
console.log($("#aaa").val()) //2
console.log($("#aaa").attr("value")) //3
console.log($("#aaa").prop("value")) //2
html元素上的value属性作为初始值，在没有给dom对象的value属性赋值的时候，通过val()方法和prop方法取值的时候返回的是都attr的属性，一旦赋值就不会在取attr属性
所以在存在value属性的html标签上面可以使用attr的value属性赋初始值
disabled，readonly, checked
<input id="aaa" value="1">
$("#aaa").attr("disabled")//undefined
$("#aaa").attr("prop")//false
$("#aaa").attr("disabled","disabled");
$("#aaa").attr("disabled")//disabled
$("#aaa").attr("prop")//true
$("#aaa").prop("disabled",true);
$("#aaa").attr("disabled")//disabled
$("#aaa").attr("prop")//true
readonly, checked与disabled一样，只不过各自的文本值为readonly与 checked
网友评论