prop()
prop()是 jQuery 1.6 开始新增了一个方法,官方建议具有 true 和 false 两个属性值的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()。
prop()与attr()的区别
- 两者相同点:
1、获取标签的属性;
2、给指定标签添加属性; - 区别:
1、获取属性是标签自带的属性值时,使用prop()方法;
2、获取自定义的属性时,只能使用attr()方法; - 什么时候使用prop()与attr()?
例子1:获取button标签的自带属性、自定义属性<button goodsid="531" class="addShopping">+</button>
goodsid
属性是自定义的属性,在使用attr()方法时:
而使用prop()方法时:> $('.addShopping').attr("goodsid") "531"
> $('.addShopping').prop("goodsid") undefined
calss
是button标签自带的属性,但使用attr()、prop()方法获取属性值时:
例子2:获取input标签的checked、disabled、selected属性:> $('.addShopping').prop("class") "addShopping" > $('.addShopping').attr("class") "addShopping"
查询结果:<!--复选框--> <input type="checkbox" checked id="12"> <!--输入框--> <input type="text" disabled id="23"> <!--下拉选择框--> <select id="34"> <option>aaa</option> <option selected="">bbb</option> </select>
例子2中使用//复选框 > $('#12').attr('checked') "checked" > $('#12').prop('checked') false //输入框 > $('#23').attr('disabled') "disabled" > $('#23').prop('disabled') true //下拉选择框 > $('#34').find('option').attr('selected') "selected" > $('#34').find('option').prop('selected') false
attr()
查询属性值为true
与false
的属性,查询结果不方便使用;但是使用prop()
查询结果为true
与false
。
总结
1、获取标签中自带的属性时,使用 prop()、attr()
均可以;
2、获取自定义属性时,建议使用attr()
;
3、获取属性的属性值为true
或false
时,如:属性为disabled
、checked
、selected
时,建议使用 prop()
。