prop()是jQuery 1.6中新出的一个方法,其用法和attr类似,因此也就引起了质疑,为什么attr()已经存在还要引入prop()呢?两者有什么区别?
根据官方的建议:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
来看一段代码:
一个复选框
html:
<label for="iii"><input type="checkbox" id="iii">选</label>
jQuery:
console.log($("#iii").prop("checked"),$("#iii").attr("checked"))
浏览器中显示如下:
扫描二维码关注公众号,回复:
1802674 查看本文章
可以看出prop()输出结果为 false ;attr() 结果为 undefined
input节点checked属性为 false。
结论先不说。。继续看下面的图。
接着用attr()设置checked属性
$("#iii").attr({
checked: 'checked'
})
浏览器中显示如下:
可以看出,浏览器说显示的DOM节点中添加了属性节点checked
而prop()结果为true;attr() 结果为 checked。
input节点checked属性为 true。
下面换 prop()设置checked属性
$("#iii").prop({
checked: 'checked'
})
浏览器中显示如下:
与attr()添加结果对比可以看出,浏览器说显示的DOM节点中并没有属性节点checked
而prop()结果为true;attr() 结果为 undefined。
input节点checked属性为 true。
由以上三个结果对比可以推测出:
attr()操作的是元素属性节点,元素节点上没有属性节点checked时,返回的必然是undefined;
prop()操作的是元素节点的 节点属性 checked的值
或者直接分析jQuery该方法源码,推荐:https://www.cnblogs.com/zhwl/p/3520162.html